littlejsengine 1.13.1 → 1.14.2

package/dist/littlejs.release.js

@@ -3,10 +3,10 @@
 
 'use strict';
 
-/** 
+/**
  * LittleJS - The Tiny Fast JavaScript Game Engine
  * MIT License - Copyright 2021 Frank Force
- * 
+ *
  * Engine Features
  * - Object oriented system with base class engine object
  * - Base class object handles update, physics, collision, rendering, etc
@@ -33,7 +33,7 @@ const engineName = 'LittleJS';
  *  @type {string}
  *  @default
  *  @memberof Engine */
-const engineVersion = '1.13.1';
+const engineVersion = '1.14.2';
 
 /** Frames per second to update
  *  @type {number}
@@ -123,7 +123,7 @@ function engineAddPlugin(updateFunction, renderFunction)
  *  // Basic engine startup
  *  engineInit(
  *    () => { console.log('Game initialized!'); },  // gameInit
- *    () => { updatePlayer(); },                    // gameUpdate  
+ *    () => { updateGameLogic(); },                 // gameUpdate
  *    () => { updateUI(); },                        // gameUpdatePost
  *    () => { drawBackground(); },                  // gameRender
  *    () => { drawHUD(); },                         // gameRenderPost
@@ -149,7 +149,7 @@ async function engineInit(gameInit, gameUpdate, gameUpdatePost, gameRender, game
         mainCanvasSize = vec2(mainCanvas.width, mainCanvas.height);
 
         // disable smoothing for pixel art
-        overlayContext.imageSmoothingEnabled = 
+        overlayContext.imageSmoothingEnabled =
             mainContext.imageSmoothingEnabled = !tilesPixelated;
 
         // setup gl rendering if enabled
@@ -197,7 +197,7 @@ async function engineInit(gameInit, gameUpdate, gameUpdatePost, gameRender, game
                 deltaSmooth = frameTimeBufferMS;
                 frameTimeBufferMS = 0;
             }
-            
+
             // update multiple frames if necessary in case of slow framerate
             for (;frameTimeBufferMS >= 0; frameTimeBufferMS -= 1e3 / frameRate)
             {
@@ -242,7 +242,7 @@ async function engineInit(gameInit, gameUpdate, gameUpdatePost, gameRender, game
                 overlayContext.textBaseline = 'top';
                 overlayContext.font = '1em monospace';
                 overlayContext.fillStyle = '#000';
-                const text = engineName + ' ' + 'v' + engineVersion + ' / ' 
+                const text = engineName + ' ' + 'v' + engineVersion + ' / '
                     + drawCount + ' / ' + engineObjects.length + ' / ' + averageFPS.toFixed(1)
                     + (glEnable ? ' GL' : ' 2D') ;
                 overlayContext.fillText(text, mainCanvas.width-3, 3);
@@ -258,13 +258,13 @@ async function engineInit(gameInit, gameUpdate, gameUpdatePost, gameRender, game
     function updateCanvas()
     {
         if (headlessMode) return;
-        
+
         if (canvasFixedSize.x)
         {
             // clear canvas and set fixed size
             mainCanvas.width  = canvasFixedSize.x;
             mainCanvas.height = canvasFixedSize.y;
-            
+
             // fit to window by adding space on top or bottom if necessary
             const aspect = innerWidth / innerHeight;
             const fixedAspect = mainCanvas.width / mainCanvas.height;
@@ -274,10 +274,10 @@ async function engineInit(gameInit, gameUpdate, gameUpdatePost, gameRender, game
         else
         {
             // clear canvas and set size to same as window
-            mainCanvas.width  = min(innerWidth,  canvasMaxSize.x);
+            mainCanvas.width = min(innerWidth, canvasMaxSize.x);
             mainCanvas.height = min(innerHeight, canvasMaxSize.y);
         }
-        
+
         // clear overlay canvas and set size
         overlayCanvas.width  = mainCanvas.width;
         overlayCanvas.height = mainCanvas.height;
@@ -296,16 +296,14 @@ async function engineInit(gameInit, gameUpdate, gameUpdatePost, gameRender, game
         return startEngine();
 
     // setup html
-    const styleRoot = 
+    const styleRoot =
         'margin:0;' +                 // fill the window
         'overflow:hidden;' +          // no scroll bars
         'background:#000;' +          // set background color
-        (canvasPixelated ? 'image-rendering:pixelated;' : '') + // pixel art
         'user-select:none;' +         // prevent hold to select
         '-webkit-user-select:none;' + // compatibility for ios
-        (!touchInputEnable ? '' :     // no touch css settings
         'touch-action:none;' +        // prevent mobile pinch to resize
-        '-webkit-touch-callout:none');// compatibility for ios
+        '-webkit-touch-callout:none';// compatibility for ios
     rootElement.style.cssText = styleRoot;
     drawCanvas = mainCanvas = document.createElement('canvas');
     rootElement.appendChild(mainCanvas);
@@ -322,20 +320,27 @@ async function engineInit(gameInit, gameUpdate, gameUpdatePost, gameRender, game
     rootElement.appendChild(overlayCanvas);
     overlayContext = overlayCanvas.getContext('2d');
 
-    // set canvas style
+    // set canvases
     const styleCanvas = 'position:absolute;'+ // allow canvases to overlap
         'top:50%;left:50%;transform:translate(-50%,-50%)'; // center on screen
     mainCanvas.style.cssText = overlayCanvas.style.cssText = styleCanvas;
     if (glCanvas)
         glCanvas.style.cssText = styleCanvas;
+    setCanvasPixelated(canvasPixelated);
+    setOverlayCanvasPixelated(overlayCanvasPixelated);
     updateCanvas();
-    
+    glPreRender();
+
+    // create offscreen canvas for image processing
+    workCanvas = new OffscreenCanvas(256, 256);
+    workContext = workCanvas.getContext('2d', { willReadFrequently: true });
+
     // create promises for loading images
     const promises = imageSources.map((src, textureIndex)=>
-        new Promise(resolve => 
+        new Promise(resolve =>
         {
             const image = new Image;
-            image.onerror = image.onload = ()=> 
+            image.onerror = image.onload = ()=>
             {
                 const textureInfo = new TextureInfo(image);
                 textureInfo.createWebGLTexture();
@@ -350,7 +355,7 @@ async function engineInit(gameInit, gameUpdate, gameUpdatePost, gameRender, game
     if (!imageSources.length)
     {
         // no images to load
-        promises.push(new Promise(resolve => 
+        promises.push(new Promise(resolve =>
         {
             const textureInfo = new TextureInfo(new Image);
             textureInfos[0] = textureInfo;
@@ -362,7 +367,7 @@ async function engineInit(gameInit, gameUpdate, gameUpdatePost, gameRender, game
     if (showSplashScreen)
     {
         // draw splash screen
-        promises.push(new Promise(resolve => 
+        promises.push(new Promise(resolve =>
         {
             let t = 0;
             console.log(`${engineName} Engine v${engineVersion}`);
@@ -594,7 +599,7 @@ function drawEngineSplashScreen(t)
     line(36,20,60,20);
 
     // engine front light
-    circle(60,30,4,PI,3*PI,color(3,2)); 
+    circle(60,30,4,PI,3*PI,color(3,2));
     circle(60,30,4,PI,2*PI,color(3,3));
     circle(60,30,4,PI,3*PI);
 
@@ -643,10 +648,10 @@ function drawEngineSplashScreen(t)
         x[j?'strokeText':'fillText'](s[i],X+w/2,55.5,17*p);
         X += w;
     }
-    
+
     x.restore();
 }
-/** 
+/**
  * LittleJS - Release Mode
  * - This file is used for release builds in place of engineDebug.js
  * - Debug functionality is disabled to reduce size and increase performance
@@ -759,7 +764,19 @@ function lerp(valueA, valueB, percent)
     if (valueA >= 0 && valueA <= 1 && ((valueB < 0 || valueB > 1) && (percent < 0 || percent > 1)))
         console.warn('lerp() parameter order changed! use lerp(start, end, p)');
     return valueA + clamp(percent) * (valueB-valueA);
- }
+}
+
+/** Gets percent between percentA and percentB and linearly interpolates between lerpA and lerpB
+ *  A shortcut for lerp(lerpA, lerpB, percent(value, percentA, percentB))
+ *  @param {number} value
+ *  @param {number} percentA
+ *  @param {number} percentB
+ *  @param {number} lerpA
+ *  @param {number} lerpB
+ *  @return {number}
+ *  @memberof Utilities */
+function percentLerp(value, percentA, percentB, lerpA, lerpB)
+{ return lerp(lerpA, lerpB, percent(value, percentA, percentB)); }
 
 /** Returns signed wrapped distance between the two values passed in
  *  @param {number} valueA
@@ -811,22 +828,23 @@ function smoothStep(percent) { return percent * percent * (3 - 2 * percent); }
  *  @memberof Utilities */
 function isPowerOfTwo(value) { return !(value & (value - 1)); }
 
-/** Returns the nearest power of two not less then the value
+/** Returns the nearest power of two not less than the value
  *  @param {number} value
  *  @return {number}
  *  @memberof Utilities */
 function nearestPowerOfTwo(value) { return 2**Math.ceil(Math.log2(value)); }
 
-/** Returns true if two axis aligned bounding boxes are overlapping 
+/** Returns true if two axis aligned bounding boxes are overlapping
+ *  this can be used for simple collision detection between objects
  *  @param {Vector2} posA          - Center of box A
  *  @param {Vector2} sizeA         - Size of box A
  *  @param {Vector2} posB          - Center of box B
- *  @param {Vector2} [sizeB=(0,0)] - Size of box B, a point if undefined
+ *  @param {Vector2} [sizeB=(0,0)] - Size of box B, uses a point if undefined
  *  @return {boolean}              - True if overlapping
  *  @memberof Utilities */
 function isOverlapping(posA, sizeA, posB, sizeB=vec2())
-{ 
-    return abs(posA.x - posB.x)*2 < sizeA.x + sizeB.x 
+{
+    return abs(posA.x - posB.x)*2 < sizeA.x + sizeB.x
         && abs(posA.y - posB.y)*2 < sizeA.y + sizeB.y;
 }
 
@@ -875,12 +893,13 @@ function isIntersecting(start, end, pos, size)
  *  @param {number} [frequency] - Frequency of the wave in Hz
  *  @param {number} [amplitude] - Amplitude (max height) of the wave
  *  @param {number} [t=time]    - Value to use for time of the wave
+ *  @param {number} [offset]    - Value to use for time offset of the wave
  *  @return {number}            - Value waving between 0 and amplitude
  *  @memberof Utilities */
-function wave(frequency=1, amplitude=1, t=time)
-{ return amplitude/2 * (1 - Math.cos(t*frequency*2*PI)); }
+function wave(frequency=1, amplitude=1, t=time, offset=0)
+{ return amplitude/2 * (1 - Math.cos(offset + t*frequency*2*PI)); }
 
-/** Formats seconds to mm:ss style for display purposes 
+/** Formats seconds to mm:ss style for display purposes
  *  @param {number} t - time in seconds
  *  @return {string}
  *  @memberof Utilities */
@@ -896,13 +915,12 @@ async function fetchJSON(url)
     return response.json();
 }
 
-/** 
+/**
  * Check if object is a valid number, not NaN or undefined, but it may be infinite
  * @param {any} n
  * @return {boolean}
- * @memberof Utilities
- */
-function isNumber(n) { return typeof n == 'number' && !isNaN(n); }
+ * @memberof Utilities */
+function isNumber(n) { return typeof n === 'number' && !isNaN(n); }
 
 ///////////////////////////////////////////////////////////////////////////////
 
@@ -957,13 +975,13 @@ function randInCircle(radius=1, minRadius=0)
  *  @memberof Random */
 function randColor(colorA=new Color, colorB=new Color(0,0,0,1), linear=false)
 {
-    return linear ? colorA.lerp(colorB, rand()) : 
+    return linear ? colorA.lerp(colorB, rand()) :
         new Color(rand(colorA.r,colorB.r), rand(colorA.g,colorB.g), rand(colorA.b,colorB.b), rand(colorA.a,colorB.a));
 }
 
 ///////////////////////////////////////////////////////////////////////////////
 
-/** 
+/**
  * Seeded random number generator
  * - Can be used to create a deterministic random number sequence
  * @example
@@ -990,8 +1008,8 @@ class RandomGenerator
     float(valueA=1, valueB=0)
     {
         // xorshift algorithm
-        this.seed ^= this.seed << 13; 
-        this.seed ^= this.seed >>> 17; 
+        this.seed ^= this.seed << 13;
+        this.seed ^= this.seed >>> 17;
         this.seed ^= this.seed << 5;
         return valueB + (valueA - valueB) * ((this.seed >>> 0) / 2**32);
     }
@@ -1040,16 +1058,14 @@ class RandomGenerator
  * let a = vec2(0, 1); // vector with coordinates (0, 1)
  * a = vec2(5);        // set a to (5, 5)
  * b = vec2();         // set b to (0, 0)
- * @memberof Utilities
- */
+ * @memberof Utilities */
 function vec2(x=0, y) { return new Vector2(x, y === undefined ? x : y); }
 
-/** 
+/**
  * Check if object is a valid Vector2
  * @param {any} v
  * @return {boolean}
- * @memberof Utilities
- */
+ * @memberof Utilities */
 function isVector2(v) { return v instanceof Vector2; }
 
 // vector2 asserts
@@ -1058,10 +1074,10 @@ function ASSERT_NUMBER_VALID(n) { ASSERT(isNumber(n), 'Number is invalid.', n);
 function ASSERT_VECTOR2_NORMAL(v)
 {
     ASSERT_VECTOR2_VALID(v);
-    ASSERT(abs(v.lengthSquared()-1) < .01, 'Vector2 is not normal.', v); 
+    ASSERT(abs(v.lengthSquared()-1) < .01, 'Vector2 is not normal.', v);
 }
 
-/** 
+/**
  * 2D Vector object with vector math library
  * - Functions do not change this so they can be chained together
  * @example
@@ -1185,7 +1201,7 @@ class Vector2
      * @param {number} [angle]
      * @param {number} [length]
      * @return {Vector2} */
-    setAngle(angle=0, length=1) 
+    setAngle(angle=0, length=1)
     {
         ASSERT_NUMBER_VALID(angle);
         ASSERT_NUMBER_VALID(length);
@@ -1200,7 +1216,7 @@ class Vector2
     rotate(angle)
     {
         ASSERT_NUMBER_VALID(angle);
-        const c = Math.cos(-angle), s = Math.sin(-angle); 
+        const c = Math.cos(-angle), s = Math.sin(-angle);
         return new Vector2(this.x*c - this.y*s, this.x*s + this.y*c);
     }
 
@@ -1212,9 +1228,9 @@ class Vector2
         ASSERT_NUMBER_VALID(direction);
         ASSERT_NUMBER_VALID(length);
         direction = mod(direction, 4);
-        ASSERT(direction==0 || direction==1 || direction==2 || direction==3,
+        ASSERT(direction===0 || direction===1 || direction===2 || direction===3,
             'Vector2.setDirection() direction must be an integer between 0 and 3.');
-        return vec2(direction%2 ? direction-1 ? -length : length : 0, 
+        return vec2(direction%2 ? direction-1 ? -length : length : 0,
             direction%2 ? 0 : direction ? -length : length);
     }
 
@@ -1266,7 +1282,7 @@ class Vector2
     /** Returns this vector expressed as a string
      * @param {number} digits - precision to display
      * @return {string} */
-    toString(digits=3) 
+    toString(digits=3)
     {
         ASSERT_NUMBER_VALID(digits);
         if (debug)
@@ -1285,7 +1301,7 @@ class Vector2
 
 ///////////////////////////////////////////////////////////////////////////////
 
-/** 
+/**
  * Create a color object with RGBA values, white by default
  * @param {number} [r=1] - red
  * @param {number} [g=1] - green
@@ -1296,29 +1312,27 @@ class Vector2
  */
 function rgb(r, g, b, a) { return new Color(r, g, b, a); }
 
-/** 
+/**
  * Create a color object with HSLA values, white by default
  * @param {number} [h=0] - hue
  * @param {number} [s=0] - saturation
  * @param {number} [l=1] - lightness
  * @param {number} [a=1] - alpha
  * @return {Color}
- * @memberof Utilities
- */
+ * @memberof Utilities */
 function hsl(h, s, l, a) { return new Color().setHSLA(h, s, l, a); }
 
-/** 
+/**
  * Check if object is a valid Color
  * @param {any} c
  * @return {boolean}
- * @memberof Utilities
- */
+ * @memberof Utilities */
 function isColor(c) { return c instanceof Color; }
 
 // color asserts
 function ASSERT_COLOR_VALID(c) { ASSERT(isColor(c) && c.isValid(), 'Color is invalid.', c); }
 
-/** 
+/**
  * Color object (red, green, blue, alpha) with some helpful functions
  * @example
  * let a = new Color;              // white
@@ -1390,7 +1404,7 @@ class Color
      * @param {number} scale
      * @param {number} [alphaScale=scale]
      * @return {Color} */
-    scale(scale, alphaScale=scale) 
+    scale(scale, alphaScale=scale)
     { return new Color(this.r*scale, this.g*scale, this.b*scale, this.a*alphaScale); }
 
     /** Returns a copy of this color clamped to the valid range between 0 and 1
@@ -1407,9 +1421,9 @@ class Color
         ASSERT_NUMBER_VALID(percent);
         const p = clamp(percent);
         return new Color(
-            c.r*p + this.r*(1-p), 
-            c.g*p + this.g*(1-p), 
-            c.b*p + this.b*(1-p), 
+            c.r*p + this.r*(1-p),
+            c.g*p + this.g*(1-p),
+            c.b*p + this.b*(1-p),
             c.a*p + this.a*(1-p));
     }
 
@@ -1449,15 +1463,15 @@ class Color
         const minC = min(r, g, b);
         const l = (maxC + minC) / 2;
         let h = 0, s = 0;
-        if (maxC != minC)
+        if (maxC !== minC)
         {
             let d = maxC - minC;
             s = l > .5 ? d / (2 - maxC - minC) : d / (maxC + minC);
-            if (r == maxC)
+            if (r === maxC)
                 h = (g - b) / d + (g < b ? 6 : 0);
-            else if (g == maxC)
+            else if (g === maxC)
                 h = (b - r) / d + 2;
-            else if (b == maxC)
+            else if (b === maxC)
                 h =  (r - g) / d + 4;
         }
         return [h / 6, s, l, a];
@@ -1467,7 +1481,7 @@ class Color
      * @param {number} [amount]
      * @param {number} [alphaAmount]
      * @return {Color} */
-    mutate(amount=.05, alphaAmount=0) 
+    mutate(amount=.05, alphaAmount=0)
     {
         ASSERT_NUMBER_VALID(amount);
         ASSERT_NUMBER_VALID(alphaAmount);
@@ -1483,47 +1497,47 @@ class Color
     /** Returns this color expressed as a hex color code
      * @param {boolean} [useAlpha] - if alpha should be included in result
      * @return {string} */
-    toString(useAlpha = true)      
+    toString(useAlpha = true)
     {
-        ASSERT(typeof useAlpha == 'boolean', 'Use alpha boolean is invalid.', useAlpha);
+        ASSERT(typeof useAlpha === 'boolean', 'Use alpha boolean is invalid.', useAlpha);
         if (debug && !this.isValid())
             return `#000`;
         const toHex = (c)=> ((c=clamp(c)*255|0)<16 ? '0' : '') + c.toString(16);
         return '#' + toHex(this.r) + toHex(this.g) + toHex(this.b) + (useAlpha ? toHex(this.a) : '');
     }
-    
+
     /** Set this color from a hex code
      * @param {string} hex - html hex code
      * @return {Color} */
     setHex(hex)
     {
-        ASSERT(typeof hex == 'string' && hex[0] == '#', 'Color hex code must be a string starting with #');
+        ASSERT(typeof hex === 'string' && hex[0] === '#', 'Color hex code must be a string starting with #');
         ASSERT([4,5,7,9].includes(hex.length), 'Invalid hex');
 
         if (hex.length < 6)
         {
             const fromHex = (c)=> clamp(parseInt(hex[c],16)/15);
             this.r = fromHex(1);
-            this.g = fromHex(2),
+            this.g = fromHex(2);
             this.b = fromHex(3);
-            this.a = hex.length == 5 ? fromHex(4) : 1;
+            this.a = hex.length === 5 ? fromHex(4) : 1;
         }
         else
         {
             const fromHex = (c)=> clamp(parseInt(hex.slice(c,c+2),16)/255);
             this.r = fromHex(1);
-            this.g = fromHex(3),
+            this.g = fromHex(3);
             this.b = fromHex(5);
-            this.a = hex.length == 9 ? fromHex(7) : 1;
+            this.a = hex.length === 9 ? fromHex(7) : 1;
         }
 
         ASSERT_COLOR_VALID(this);
         return this;
     }
-    
+
     /** Returns this color expressed as 32 bit RGBA value
      * @return {number} */
-    rgbaInt()  
+    rgbaInt()
     {
         const r = clamp(this.r)*255|0;
         const g = clamp(this.g)*255<<8;
@@ -1535,9 +1549,7 @@ class Color
     /** Checks if this is a valid color
      * @return {boolean} */
     isValid()
-    { 
-        return isNumber(this.r) && isNumber(this.g) && isNumber(this.b) && isNumber(this.a);
-    }
+    { return isNumber(this.r) && isNumber(this.g) && isNumber(this.b) && isNumber(this.a); }
 }
 
 ///////////////////////////////////////////////////////////////////////////////
@@ -1546,7 +1558,7 @@ class Color
 /** Color - White #ffffff
  *  @type {Color}
  *  @memberof Utilities */
-const WHITE = rgb(); 
+const WHITE = rgb();
 
 /** Color - Clear White #ffffff with 0 alpha
  *  @type {Color}
@@ -1661,11 +1673,11 @@ class Timer
     /** Get percentage elapsed based on time it was set to, returns 0 if not set
      * @return {number} */
     getPercent() { return this.isSet()? 1-percent(this.time - time, 0, this.setTime) : 0; }
-    
+
     /** Returns this timer expressed as a string
      * @return {string} */
     toString() { if (debug) { return this.isSet() ? Math.abs(this.get()) + ' seconds ' + (this.get()<0 ? 'before' : 'after' ) : 'unset'; }}
-    
+
     /** Get how long since elapsed, returns 0 if not set (returns negative if currently active)
      * @return {number} */
     valueOf() { return this.get(); }
@@ -1700,6 +1712,13 @@ let cameraScale = 32;
 ///////////////////////////////////////////////////////////////////////////////
 // Display settings
 
+/** Enable applying color to tiles when using canvas2d
+ *  - This is slower but should be the same as WebGL rendering
+ *  @type {boolean}
+ *  @default
+ *  @memberof Settings */
+let canvasColorTiles = true;
+
 /** The max size of the canvas, centered if window is larger
  *  @type {Vector2}
  *  @default Vector2(1920,1080)
@@ -1713,14 +1732,21 @@ let canvasMaxSize = vec2(1920, 1080);
  *  @memberof Settings */
 let canvasFixedSize = vec2();
 
-/** Use nearest neighbor canvas scaling for more pixelated look
- *  - Must be set before startup to take effect
+/** Use nearest canvas scaling for more pixelated look
  *  - If enabled sets css image-rendering:pixelated
  *  @type {boolean}
  *  @default
  *  @memberof Settings */
 let canvasPixelated = true;
 
+/** Use nearest canvas scaling for more pixelated look
+ *  - If enabled sets css image-rendering:pixelated
+ *  - This defaults to false because text looks better with smoothing
+ *  @type {boolean}
+ *  @default
+ *  @memberof Settings */
+let overlayCanvasPixelated = false;
+
 /** Disables texture filtering for crisper pixel art
  *  @type {boolean}
  *  @default
@@ -1733,14 +1759,13 @@ let tilesPixelated = true;
  *  @memberof Settings */
 let fontDefault = 'arial';
 
-/** Enable to show the LittleJS splash screen be shown on startup
+/** Enable to show the LittleJS splash screen on startup
  *  @type {boolean}
  *  @default
  *  @memberof Settings */
 let showSplashScreen = false;
 
 /** Disables all rendering, audio, and input for servers
- *  - Must be set before startup to take effect
  *  @type {boolean}
  *  @default
  *  @memberof Settings */
@@ -1749,13 +1774,18 @@ let headlessMode = false;
 ///////////////////////////////////////////////////////////////////////////////
 // WebGL settings
 
-/** Enable webgl rendering, webgl can be disabled and removed from build (with some features disabled)
- *  - Must be set before startup to take effect
+/** Enable WebGL accelerated rendering
  *  @type {boolean}
  *  @default
  *  @memberof Settings */
 let glEnable = true;
 
+/** How many sided poly to use when drawing circles and ellipses with WebGL
+ *  @type {number}
+ *  @default
+ *  @memberof Settings */
+let glCircleSides = 32;
+
 ///////////////////////////////////////////////////////////////////////////////
 // Tile sheet settings
 
@@ -1837,13 +1867,13 @@ let particleEmitRateScale = 1;
  *  @memberof Settings */
 let gamepadsEnable = true;
 
-/** If true, the dpad input is also routed to the left analog stick (for better accessability)
+/** If true, the dpad input is also routed to the left analog stick (for better accessibility)
  *  @type {boolean}
  *  @default
  *  @memberof Settings */
 let gamepadDirectionEmulateStick = true;
 
-/** If true the WASD keys are also routed to the direction keys (for better accessability)
+/** If true the WASD keys are also routed to the direction keys (for better accessibility)
  *  @type {boolean}
  *  @default
  *  @memberof Settings */
@@ -1851,7 +1881,6 @@ let inputWASDEmulateDirection = true;
 
 /** True if touch input is enabled for mobile devices
  *  - Touch events will be routed to mouse events
- *  - Must be set before startup to take effect
  *  @type {boolean}
  *  @default
  *  @memberof Settings */
@@ -1859,7 +1888,6 @@ let touchInputEnable = true;
 
 /** True if touch gamepad should appear on mobile devices
  *  - Supports left analog stick, 4 face buttons and start button (button 9)
- *  - Must be set before startup to take effect
  *  @type {boolean}
  *  @default
  *  @memberof Settings */
@@ -1961,6 +1989,14 @@ function setCameraAngle(angle) { cameraAngle = angle; }
  *  @memberof Settings */
 function setCameraScale(scale) { cameraScale = scale; }
 
+/** Set if tiles should be colorized when using canvas2d
+ *  This can be slower but results should look nearly identical to WebGL rendering
+ *  It can be enabled/disabled at any time
+ *  Optimized for performance, and will use faster method if color is white or untextured
+ *  @param {boolean} colorTiles
+ *  @memberof Settings */
+function setCanvasColorTiles(colorTiles) { canvasColorTiles = colorTiles; }
+
 /** Set max size of the canvas
  *  @param {Vector2} size
  *  @memberof Settings */
@@ -1971,10 +2007,30 @@ function setCanvasMaxSize(size) { canvasMaxSize = size; }
  *  @memberof Settings */
 function setCanvasFixedSize(size) { canvasFixedSize = size; }
 
-/** Use nearest neighbor scaling algorithm for canvas for more pixelated look
+/** Use nearest scaling algorithm for canvas for more pixelated look
+ *  - If enabled sets css image-rendering:pixelated
+ *  @param {boolean} pixelated
+ *  @memberof Settings */
+function setCanvasPixelated(pixelated)
+{
+    canvasPixelated = pixelated;
+    if (mainCanvas)
+        mainCanvas.style.imageRendering = pixelated ? 'pixelated' : '';
+    if (glCanvas)
+        glCanvas.style.imageRendering = pixelated ? 'pixelated' : '';
+}
+
+/** Use nearest scaling algorithm for canvas for more pixelated look
+ *  - If enabled sets css image-rendering:pixelated
+ *  - This defaults to false because text looks better with smoothing
  *  @param {boolean} pixelated
  *  @memberof Settings */
-function setCanvasPixelated(pixelated) { canvasPixelated = pixelated; }
+function setOverlayCanvasPixelated(pixelated)
+{
+    overlayCanvasPixelated = pixelated;
+    if (overlayCanvas)
+        overlayCanvas.style.imageRendering = pixelated ? 'pixelated' : '';
+}
 
 /** Disables texture filtering for crisper pixel art
  *  @param {boolean} pixelated
@@ -1986,7 +2042,7 @@ function setTilesPixelated(pixelated) { tilesPixelated = pixelated; }
  *  @memberof Settings */
 function setFontDefault(font) { fontDefault = font; }
 
-/** Set if the LittleJS splash screen be shown on startup
+/** Set if the LittleJS splash screen should be shown on startup
  *  @param {boolean} show
  *  @memberof Settings */
 function setShowSplashScreen(show) { showSplashScreen = show; }
@@ -1996,10 +2052,20 @@ function setShowSplashScreen(show) { showSplashScreen = show; }
  *  @memberof Settings */
 function setHeadlessMode(headless) { headlessMode = headless; }
 
-/** Set if webgl rendering is enabled
+/** Set if WebGL rendering is enabled
  *  @param {boolean} enable
  *  @memberof Settings */
-function setGLEnable(enable) { glEnable = enable; }
+function setGLEnable(enable)
+{
+    glEnable = enable;
+    if (glCanvas) // hide glCanvas if WebGL is disabled
+        glCanvas.style.visibility = enable ? 'visible' : 'hidden';
+}
+
+/** Set how many sided polygons to use when drawing circles and elipses with WebGL
+ *  @param {number} sides
+ *  @memberof Settings */
+function setGLCircleSides(sides) { glCircleSides = sides; }
 
 /** Set default size of tiles in pixels
  *  @param {Vector2} size
@@ -2031,7 +2097,7 @@ function setObjectDefaultDamping(damp) { objectDefaultDamping = damp; }
  *  @memberof Settings */
 function setObjectDefaultAngleDamping(damp) { objectDefaultAngleDamping = damp; }
 
-/** Set how much to bounce when a collision occur
+/** Set how much to bounce when a collision occurs
  *  @param {number} restitution
  *  @memberof Settings */
 function setObjectDefaultRestitution(restitution) { objectDefaultRestitution = restitution; }
@@ -2155,11 +2221,11 @@ function setShowWatermark(show) { showWatermark = show; }
  *  @param {string} key
  *  @memberof Debug */
 function setDebugKey(key) { debugKey = key; }
-/** 
+/**
  * LittleJS Object System
  */
 
-/** 
+/**
  * LittleJS Object Base Object Class
  * - Top level object class used by the engine
  * - Automatically adds self to object list
@@ -2182,7 +2248,7 @@ function setDebugKey(key) { debugKey = key; }
  * @example
  * // create an engine object, normally you would first extend the class with your own
  * const pos = vec2(2,3);
- * const object = new EngineObject(pos); 
+ * const object = new EngineObject(pos);
  */
 class EngineObject
 {
@@ -2200,9 +2266,9 @@ class EngineObject
         ASSERT(isVector2(pos) && pos.isValid(), 'object pos should be a vec2');
         ASSERT(isVector2(size) && size.isValid(), 'object size should be a vec2');
         ASSERT(!tileInfo || tileInfo instanceof TileInfo, 'object tileInfo should be a TileInfo or undefined');
-        ASSERT(typeof angle == 'number' && isFinite(angle), 'object angle should be a number');
+        ASSERT(typeof angle === 'number' && isFinite(angle), 'object angle should be a number');
         ASSERT(isColor(color) && color.isValid(), 'object color should be a valid rgba color');
-        ASSERT(typeof renderOrder == 'number', 'object renderOrder should be a number');
+        ASSERT(typeof renderOrder === 'number', 'object renderOrder should be a number');
 
         /** @property {Vector2} - World space position of the object */
         this.pos = pos.copy();
@@ -2270,7 +2336,7 @@ class EngineObject
         // add to list of objects
         engineObjects.push(this);
     }
-    
+
     /** Update the object transform, called automatically by engine even when paused */
     updateTransforms()
     {
@@ -2339,7 +2405,7 @@ class EngineObject
             for (const o of engineObjectsCollide)
             {
                 // non solid objects don't collide with each other
-                if (!this.isSolid && !o.isSolid || o.destroyed || o.parent || o == this)
+                if (!this.isSolid && !o.isSolid || o.destroyed || o.parent || o === this)
                     continue;
 
                 // check collision
@@ -2362,8 +2428,8 @@ class EngineObject
                     this.velocity = this.velocity.add(velocity);
                     if (o.mass) // push away if not fixed
                         o.velocity = o.velocity.subtract(velocity);
-                        
-                    debugOverlay && debugPhysics && debugOverlap(this.pos, this.size, o.pos, o.size, '#f00');
+
+                    debugPhysics && debugOverlap(this.pos, this.size, o.pos, o.size, '#f00');
                     continue;
                 }
 
@@ -2373,7 +2439,7 @@ class EngineObject
                 const isBlockedX = abs(oldPos.y - o.pos.y)*2 < sizeBoth.y;
                 const isBlockedY = abs(oldPos.x - o.pos.x)*2 < sizeBoth.x;
                 const restitution = max(this.restitution, o.restitution);
-                
+
                 if (smallStepUp || isBlockedY || !isBlockedX) // resolve y collision
                 {
                     // push outside object collision
@@ -2425,7 +2491,7 @@ class EngineObject
                     else // bounce if other object is fixed
                         this.velocity.x *= -restitution;
                 }
-                debugOverlay && debugPhysics && debugOverlap(this.pos, this.size, o.pos, o.size, '#f0f');
+                debugPhysics && debugOverlap(this.pos, this.size, o.pos, o.size, '#f0f');
             }
         }
         if (this.collideTiles)
@@ -2461,7 +2527,7 @@ class EngineObject
                         {
                             // move to previous position
                             this.pos.y = oldPos.y;
-                            this.groundObject = undefined; 
+                            this.groundObject = undefined;
                         }
                     }
                     if (blockedLayerX)
@@ -2470,25 +2536,25 @@ class EngineObject
                         this.pos.x = oldPos.x;
                         this.velocity.x *= -this.restitution;
                     }
-                    debugOverlay && debugPhysics && debugRect(this.pos, this.size, '#f00');
+                    debugPhysics && debugRect(this.pos, this.size, '#f00');
                 }
             }
         }
     }
-       
+
     /** Render the object, draws a tile by default, automatically called each frame, sorted by renderOrder */
     render()
     {
         // default object render
         drawTile(this.pos, this.drawSize || this.size, this.tileInfo, this.color, this.angle, this.mirror, this.additiveColor);
     }
-    
+
     /** Destroy this object, destroy its children, detach it's parent, and mark it for removal */
     destroy()
-    { 
+    {
         if (this.destroyed)
             return;
-        
+
         // disconnect from parent and destroy children
         this.destroyed = 1;
         this.parent && this.parent.removeChild(this);
@@ -2514,7 +2580,7 @@ class EngineObject
     /** Convert from world space to local space for a vector (rotation only)
      *  @param {Vector2} vec - world space vector */
     worldToLocalVector(vec) { return vec.rotate(-this.angle); }
-    
+
     /** Called to check if a tile collision should be resolved
      *  @param {number}  tileData - the value of the tile at the position
      *  @param {Vector2} pos      - tile where the collision occurred
@@ -2533,16 +2599,19 @@ class EngineObject
 
     /** Apply acceleration to this object (adjust velocity, not affected by mass)
      *  @param {Vector2} acceleration */
-    applyAcceleration(acceleration) { if (this.mass) this.velocity = this.velocity.add(acceleration); }
+    applyAcceleration(acceleration)
+    { if (this.mass) this.velocity = this.velocity.add(acceleration); }
 
-    /** Apply angular acceleration to this object 
+    /** Apply angular acceleration to this object
      *  @param {number} acceleration */
-    applyAngularAcceleration(acceleration) { if (this.mass) this.angleVelocity += acceleration; }
+    applyAngularAcceleration(acceleration)
+    { if (this.mass) this.angleVelocity += acceleration; }
 
     /** Apply force to this object (adjust velocity, affected by mass)
      *  @param {Vector2} force */
-    applyForce(force) { this.applyAcceleration(force.scale(1/this.mass)); }
-    
+    applyForce(force)
+    { if (this.mass) this.applyAcceleration(force.scale(1/this.mass)); }
+
     /** Get the direction of the mirror
      *  @return {number} -1 if this.mirror is true, or 1 if not mirrored */
     getMirrorSign() { return this.mirror ? -1 : 1; }
@@ -2564,7 +2633,7 @@ class EngineObject
      *  @param {EngineObject} child */
     removeChild(child)
     {
-        ASSERT(child.parent == this && this.children.includes(child));
+        ASSERT(child.parent === this && this.children.includes(child));
         this.children.splice(this.children.indexOf(child), 1);
         child.parent = 0;
     }
@@ -2610,7 +2679,7 @@ class EngineObject
     {
         if (!debug)
             return;
-        
+
         // show object info for debugging
         const size = vec2(max(this.size.x, .2), max(this.size.y, .2));
         const color = rgb(this.collideTiles?1:0, this.collideSolidObjects?1:0, this.isSolid?1:0, .5);
@@ -2620,24 +2689,24 @@ class EngineObject
         this.parent && drawLine(this.pos, this.parent.pos, .1, rgb(1,1,1,.5));
     }
 }
-/** 
+/**
  * LittleJS Drawing System
  * - Hybrid system with both Canvas2D and WebGL available
  * - Super fast tile sheet rendering with WebGL
  * - Can apply rotation, mirror, color and additive color
  * - Font rendering system with built in engine font
  * - Many useful utility functions
- * 
+ *
  * LittleJS uses a hybrid rendering solution with the best of both Canvas2D and WebGL.
  * There are 3 canvas/contexts available to draw to...
  * mainCanvas - 2D background canvas, non WebGL stuff like tile layers are drawn here.
  * glCanvas - Used by the accelerated WebGL batch rendering system.
  * overlayCanvas - Another 2D canvas that appears on top of the other 2 canvases.
- * 
+ *
  * The WebGL rendering system is very fast with some caveats...
  * - Switching blend modes (additive) or textures causes another draw call which is expensive in excess
  * - Group additive rendering together using renderOrder to mitigate this issue
- * 
+ *
  * The LittleJS rendering solution is intentionally simple, feel free to adjust it for your needs!
  * @namespace Draw
  */
@@ -2672,7 +2741,17 @@ let drawCanvas;
  *  @memberof Draw */
 let drawContext;
 
-/** The size of the main canvas (and other secondary canvases) 
+/** Offscreen canvas that can be used for image processing
+ *  @type {OffscreenCanvas}
+ *  @memberof Draw */
+let workCanvas;
+
+/** Offscreen canvas that can be used for image processing
+ *  @type {OffscreenCanvasRenderingContext2D}
+ *  @memberof Draw */
+let workContext;
+
+/** The size of the main canvas (and other secondary canvases)
  *  @type {Vector2}
  *  @memberof Draw */
 let mainCanvasSize = vec2();
@@ -2687,29 +2766,28 @@ let drawCount;
 
 ///////////////////////////////////////////////////////////////////////////////
 
-/** 
+/**
  * Create a tile info object using a grid based system
  * - This can take vecs or floats for easier use and conversion
  * - If an index is passed in, the tile size and index will determine the position
- * @param {Vector2|number} [pos=0]                - Index of tile in sheet
+ * @param {Vector2|number} [pos=0] - Index of tile in sheet
  * @param {Vector2|number} [size=tileSizeDefault] - Size of tile in pixels
- * @param {number} [textureIndex]                   - Texture index to use
- * @param {number} [padding]                        - How many pixels padding around tiles
+ * @param {number} [textureIndex] - Texture index to use
+ * @param {number} [padding] - How many pixels padding around tiles
  * @return {TileInfo}
  * @example
  * tile(2)                       // a tile at index 2 using the default tile size of 16
  * tile(5, 8)                    // a tile at index 5 using a tile size of 8
  * tile(1, 16, 3)                // a tile at index 1 of size 16 on texture 3
  * tile(vec2(4,8), vec2(30,10))  // a tile at index (4,8) with a size of (30,10)
- * @memberof Draw
- */
+ * @memberof Draw */
 function tile(pos=new Vector2, size=tileSizeDefault, textureIndex=0, padding=0)
 {
     if (headlessMode)
         return new TileInfo;
 
     // if size is a number, make it a vector
-    if (typeof size == 'number')
+    if (typeof size === 'number')
     {
         ASSERT(size > 0);
         size = new Vector2(size, size);
@@ -2718,24 +2796,24 @@ function tile(pos=new Vector2, size=tileSizeDefault, textureIndex=0, padding=0)
     // create tile info object
     const tileInfo = new TileInfo(new Vector2, size, textureIndex, padding);
 
-    // use get the pos of the tile
+    // get the position of the tile
     const textureInfo = textureInfos[textureIndex];
     ASSERT(!!textureInfo, 'Texture not loaded');
     const sizePaddedX = size.x + padding*2;
     const sizePaddedY = size.y + padding*2;
-    if (typeof pos == 'number')
+    if (typeof pos === 'number')
     {
         const cols = textureInfo.size.x / sizePaddedX |0;
-        ASSERT(cols>0, 'Tile size is too big for texture');
+        ASSERT(cols > 0, 'Tile size is too big for texture');
         const posX = pos % cols, posY = (pos / cols) |0;
         tileInfo.pos.set(posX*sizePaddedX+padding, posY*sizePaddedY+padding);
     }
     else
         tileInfo.pos.set(pos.x*sizePaddedX+padding, pos.y*sizePaddedY+padding);
-    return tileInfo; 
+    return tileInfo;
 }
 
-/** 
+/**
  * Tile Info - Stores info about how to draw a tile
  */
 class TileInfo
@@ -2773,14 +2851,14 @@ class TileInfo
     */
     frame(frame)
     {
-        ASSERT(typeof frame == 'number');
+        ASSERT(typeof frame === 'number');
         return this.offset(new Vector2(frame*(this.size.x+this.padding*2), 0));
     }
 
     /**
      * Set this tile to use a full image
      * @param {HTMLImageElement|OffscreenCanvas} image
-     * @param {WebGLTexture} [glTexture] - webgl texture
+     * @param {WebGLTexture} [glTexture] - WebGL texture
      * @return {TileInfo}
      */
     setFullImage(image, glTexture)
@@ -2798,7 +2876,7 @@ class TextureInfo
     /**
      * Create a TextureInfo, called automatically by the engine
      * @param {HTMLImageElement|OffscreenCanvas} image
-     * @param {WebGLTexture} [glTexture] - webgl texture 
+     * @param {WebGLTexture} [glTexture] - WebGL texture
      */
     constructor(image, glTexture)
     {
@@ -2808,7 +2886,7 @@ class TextureInfo
         this.size = vec2(image.width, image.height);
         /** @property {Vector2} - inverse of the size, cached for rendering */
         this.sizeInverse = vec2(1/image.width, 1/image.height);
-        /** @property {WebGLTexture} - webgl texture */
+        /** @property {WebGLTexture} - WebGL texture */
         this.glTexture = glTexture;
     }
 
@@ -2821,76 +2899,28 @@ class TextureInfo
 }
 
 ///////////////////////////////////////////////////////////////////////////////
-
-/** Convert from screen to world space coordinates
- *  @param {Vector2} screenPos
- *  @return {Vector2}
- *  @memberof Draw */
-function screenToWorld(screenPos)
-{
-    let cameraPosRelativeX = (screenPos.x - mainCanvasSize.x/2 + .5) /  cameraScale;
-    let cameraPosRelativeY = (screenPos.y - mainCanvasSize.y/2 + .5) / -cameraScale;
-    if (cameraAngle) 
-    {
-        // apply camera rotation
-        const cos = Math.cos(-cameraAngle), sin = Math.sin(-cameraAngle);
-        const rotatedX = cameraPosRelativeX * cos - cameraPosRelativeY * sin;
-        const rotatedY = cameraPosRelativeX * sin + cameraPosRelativeY * cos;
-        cameraPosRelativeX = rotatedX;
-        cameraPosRelativeY = rotatedY;
-    }
-    return new Vector2(cameraPosRelativeX + cameraPos.x, cameraPosRelativeY + cameraPos.y);
-}
-
-/** Convert from world to screen space coordinates
- *  @param {Vector2} worldPos
- *  @return {Vector2}
- *  @memberof Draw */
-function worldToScreen(worldPos)
-{
-    let cameraPosRelativeX = worldPos.x - cameraPos.x;
-    let cameraPosRelativeY = worldPos.y - cameraPos.y;
-    if (cameraAngle)
-    {
-        // apply inverse camera rotation
-        const cos = Math.cos(cameraAngle), sin = Math.sin(cameraAngle);
-        const rotatedX = cameraPosRelativeX * cos - cameraPosRelativeY * sin;
-        const rotatedY = cameraPosRelativeX * sin + cameraPosRelativeY * cos;
-        cameraPosRelativeX = rotatedX;
-        cameraPosRelativeY = rotatedY;
-    }
-    return new Vector2
-    (
-        cameraPosRelativeX *  cameraScale + mainCanvasSize.x/2 - .5,
-        cameraPosRelativeY * -cameraScale + mainCanvasSize.y/2 - .5
-    );
-}
-
-/** Get the camera's visible area in world space
- *  @return {Vector2}
- *  @memberof Draw */
-function getCameraSize() { return mainCanvasSize.scale(1/cameraScale); }
+// Drawing functions
 
 /** Draw textured tile centered in world space, with color applied if using WebGL
- *  @param {Vector2} pos                        - Center of the tile in world space
- *  @param {Vector2} [size=(1,1)]               - Size of the tile in world space
- *  @param {TileInfo}[tileInfo]                 - Tile info to use, untextured if undefined
- *  @param {Color}   [color=(1,1,1,1)]          - Color to modulate with
- *  @param {number}  [angle]                    - Angle to rotate by
- *  @param {boolean} [mirror]                   - If true image is flipped along the Y axis
- *  @param {Color}   [additiveColor]            - Additive color to be applied if any
- *  @param {boolean} [useWebGL=glEnable]        - Use accelerated WebGL rendering
- *  @param {boolean} [screenSpace=false]        - If true the pos and size are in screen space
+ *  @param {Vector2}  pos                 - Center of the tile in world space
+ *  @param {Vector2}  [size=(1,1)]        - Size of the tile in world space
+ *  @param {TileInfo} [tileInfo]          - Tile info to use, untextured if undefined
+ *  @param {Color}    [color=(1,1,1,1)]   - Color to modulate with
+ *  @param {number}   [angle]             - Angle to rotate by
+ *  @param {boolean}  [mirror]            - Is image flipped along the Y axis?
+ *  @param {Color}    [additiveColor]     - Additive color to be applied if any
+ *  @param {boolean}  [useWebGL=glEnable] - Use accelerated WebGL rendering?
+ *  @param {boolean}  [screenSpace=false] - Are the pos and size are in screen space?
  *  @param {CanvasRenderingContext2D|OffscreenCanvasRenderingContext2D} [context] - Canvas 2D context to draw to
  *  @memberof Draw */
-function drawTile(pos, size=new Vector2(1), tileInfo, color=new Color,
+function drawTile(pos, size=new Vector2(1), tileInfo, color=WHITE,
     angle=0, mirror, additiveColor, useWebGL=glEnable, screenSpace, context)
 {
-    ASSERT(!context || !useWebGL, 'context only supported in canvas 2D mode'); 
     ASSERT(isVector2(pos) && pos.isValid(), 'drawTile pos should be a vec2');
     ASSERT(isVector2(size) && size.isValid(), 'drawTile size should be a vec2');
     ASSERT(isColor(color) && (!additiveColor || isColor(additiveColor)), 'drawTile color is invalid');
     ASSERT(isNumber(angle), 'drawTile angle should be a number');
+    ASSERT(!context || !useWebGL, 'context only supported in canvas 2D mode');
 
     const textureInfo = tileInfo && tileInfo.textureInfo;
     if (useWebGL)
@@ -2914,22 +2944,22 @@ function drawTile(pos, size=new Vector2(1), tileInfo, color=new Color,
             {
                 const tileImageFixBleedX = sizeInverse.x*tileFixBleedScale;
                 const tileImageFixBleedY = sizeInverse.y*tileFixBleedScale;
-                glDraw(pos.x, pos.y, mirror ? -size.x : size.x, size.y, angle, 
-                    x + tileImageFixBleedX,     y + tileImageFixBleedY, 
-                    x - tileImageFixBleedX + w, y - tileImageFixBleedY + h, 
-                    color.rgbaInt(), additiveColor && additiveColor.rgbaInt()); 
+                glDraw(pos.x, pos.y, mirror ? -size.x : size.x, size.y, angle,
+                    x + tileImageFixBleedX,     y + tileImageFixBleedY,
+                    x - tileImageFixBleedX + w, y - tileImageFixBleedY + h,
+                    color.rgbaInt(), additiveColor && additiveColor.rgbaInt());
             }
             else
             {
-                glDraw(pos.x, pos.y, mirror ? -size.x : size.x, size.y, angle, 
-                    x, y, x + w, y + h, 
-                    color.rgbaInt(), additiveColor && additiveColor.rgbaInt()); 
+                glDraw(pos.x, pos.y, mirror ? -size.x : size.x, size.y, angle,
+                    x, y, x + w, y + h,
+                    color.rgbaInt(), additiveColor && additiveColor.rgbaInt());
             }
         }
         else
         {
             // if no tile info, force untextured
-            glDraw(pos.x, pos.y, size.x, size.y, angle, 0, 0, 0, 0, 0, color.rgbaInt()); 
+            glDraw(pos.x, pos.y, size.x, size.y, angle, 0, 0, 0, 0, 0, color.rgbaInt());
         }
     }
     else
@@ -2942,18 +2972,15 @@ function drawTile(pos, size=new Vector2(1), tileInfo, color=new Color,
             if (textureInfo)
             {
                 // calculate uvs and render
-                const x = tileInfo.pos.x + tileFixBleedScale;
-                const y = tileInfo.pos.y + tileFixBleedScale;
-                const w = tileInfo.size.x - 2*tileFixBleedScale;
-                const h = tileInfo.size.y - 2*tileFixBleedScale;
-                context.globalAlpha = color.a; // only alpha is supported
-                context.drawImage(textureInfo.image, x, y, w, h, -.5, -.5, 1, 1);
-                context.globalAlpha = 1; // set back to full alpha
+                const x = tileInfo.pos.x,  y = tileInfo.pos.y;
+                const w = tileInfo.size.x, h = tileInfo.size.y;
+                drawImageColor(context, textureInfo.image, x, y, w, h, -.5, -.5, 1, 1, color, additiveColor);
             }
             else
             {
-                // if no tile info, force untextured
-                context.fillStyle = color.toString();
+                // if no tile info, use untextured rect
+                const c = additiveColor ? color.add(additiveColor) : color;
+                context.fillStyle = c.toString();
                 context.fillRect(-.5, -.5, 1, 1);
             }
         }, screenSpace, context);
@@ -2966,12 +2993,12 @@ function drawTile(pos, size=new Vector2(1), tileInfo, color=new Color,
  *  @param {Color}   [color=(1,1,1,1)]
  *  @param {number}  [angle]
  *  @param {boolean} [useWebGL=glEnable]
- *  @param {boolean} [screenSpace=false]
+ *  @param {boolean} [screenSpace]
  *  @param {CanvasRenderingContext2D|OffscreenCanvasRenderingContext2D} [context]
  *  @memberof Draw */
 function drawRect(pos, size, color, angle, useWebGL, screenSpace, context)
-{ 
-    drawTile(pos, size, undefined, color, angle, false, undefined, useWebGL, screenSpace, context); 
+{
+    drawTile(pos, size, undefined, color, angle, false, undefined, useWebGL, screenSpace, context);
 }
 
 /** Draw colored line between two points
@@ -2979,72 +3006,138 @@ function drawRect(pos, size, color, angle, useWebGL, screenSpace, context)
  *  @param {Vector2} posB
  *  @param {number}  [thickness]
  *  @param {Color}   [color=(1,1,1,1)]
+ *  @param {Vector2} [pos=(0,0)] - Offset to apply
+ *  @param {number}  [angle] - Angle to rotate by
  *  @param {boolean} [useWebGL=glEnable]
- *  @param {boolean} [screenSpace=false]
+ *  @param {boolean} [screenSpace]
  *  @param {CanvasRenderingContext2D|OffscreenCanvasRenderingContext2D} [context]
  *  @memberof Draw */
-function drawLine(posA, posB, thickness=.1, color, useWebGL, screenSpace, context)
+function drawLine(posA, posB, thickness=.1, color, pos=vec2(), angle=0, useWebGL, screenSpace, context)
 {
     const halfDelta = vec2((posB.x - posA.x)/2, (posB.y - posA.y)/2);
     const size = vec2(thickness, halfDelta.length()*2);
-    drawRect(posA.add(halfDelta), size, color, halfDelta.angle(), useWebGL, screenSpace, context);
+    pos = pos.add(posA.add(halfDelta));
+    angle += halfDelta.angle();
+    drawRect(pos, size, color, angle, useWebGL, screenSpace, context);
+}
+
+/** Draw colored regular polygon using passed in number of sides
+ *  @param {Vector2} pos
+ *  @param {Vector2} [size=(1,1)]
+ *  @param {number}  [sides]
+ *  @param {Color}   [color=(1,1,1,1)]
+ *  @param {number}  [angle]
+ *  @param {number}  [lineWidth]
+ *  @param {Color}   [lineColor=(0,0,0,1)]
+ *  @param {boolean} [useWebGL=glEnable]
+ *  @param {boolean} [screenSpace]
+ *  @param {CanvasRenderingContext2D|OffscreenCanvasRenderingContext2D} [context]
+ *  @memberof Draw */
+function drawRegularPoly(pos, size=vec2(1), sides=3, color=WHITE, lineWidth=0, lineColor=BLACK, angle=0, useWebGL=glEnable, screenSpace=false, context)
+{
+    // build regular polygon points
+    const points = [];
+    for (let i=sides; i--;)
+    {
+        const a = (i/sides)*PI*2;
+        points.push(vec2(Math.sin(a)*size.x, Math.cos(a)*size.y));
+    }
+    drawPoly(points, color, lineWidth, lineColor, pos, angle, useWebGL, screenSpace, context);
 }
 
 /** Draw colored polygon using passed in points
- *  @param {Array<Vector2>}   points - Array of Vector2 points
+ *  @param {Array<Vector2>} points - Array of Vector2 points
  *  @param {Color}   [color=(1,1,1,1)]
- *  @param {number}  [lineWidth=0]
+ *  @param {number}  [lineWidth]
  *  @param {Color}   [lineColor=(0,0,0,1)]
- *  @param {boolean} [screenSpace=false]
- *  @param {CanvasRenderingContext2D|OffscreenCanvasRenderingContext2D} [context=drawContext]
+ *  @param {Vector2} [pos=(0,0)] - Offset to apply
+ *  @param {number}  [angle] - Angle to rotate by
+ *  @param {boolean} [useWebGL=glEnable]
+ *  @param {boolean} [screenSpace]
+ *  @param {CanvasRenderingContext2D|OffscreenCanvasRenderingContext2D} [context]
  *  @memberof Draw */
-function drawPoly(points, color=new Color, lineWidth=0, lineColor=new Color(0,0,0), screenSpace, context=drawContext)
+function drawPoly(points, color=WHITE, lineWidth=0, lineColor=BLACK, pos=vec2(), angle=0, useWebGL=glEnable, screenSpace=false, context=undefined)
 {
-    ASSERT(isColor(color) && isColor(lineColor));
-    context.fillStyle = color.toString();
-    context.beginPath();
-    for (const point of screenSpace ? points : points.map(worldToScreen))
-        context.lineTo(point.x, point.y);
-    context.closePath();
-    context.fill();
-    if (lineWidth)
+    ASSERT(isVector2(pos) && pos.isValid(), 'drawPoly pos should be a vec2');
+    ASSERT(Array.isArray(points), 'drawPoly points should be an array');
+    ASSERT(isColor(color) && isColor(lineColor), 'drawPoly color is invalid');
+    ASSERT(isNumber(lineWidth), 'drawPoly lineWidth should be a number');
+    ASSERT(isNumber(angle), 'drawPoly angle should be a number');
+    ASSERT(!context || !useWebGL, 'context only supported in canvas 2D mode');
+    if (useWebGL)
     {
-        context.strokeStyle = lineColor.toString();
-        context.lineWidth = screenSpace ? lineWidth : lineWidth*cameraScale;
-        context.stroke();
+        let scale = 1;
+        if (screenSpace)
+        {
+            // convert to world space
+            pos = screenToWorld(pos);
+            scale = 1/cameraScale;
+        }
+        glDrawPointsTransform(points, color.rgbaInt(), pos.x, pos.y, scale, scale, angle);
+        if (lineWidth > 0)
+            glDrawOutlineTransform(points, lineColor.rgbaInt(), lineWidth, pos.x, pos.y, scale, scale, angle);
+    }
+    else
+    {
+        drawCanvas2D(pos, vec2(1), angle, false, context=>
+        {
+            context.fillStyle = color.toString();
+            context.beginPath();
+            for (const point of points)
+                context.lineTo(point.x, point.y);
+            context.closePath();
+            context.fill();
+            if (lineWidth)
+            {
+                context.strokeStyle = lineColor.toString();
+                context.lineWidth = lineWidth;
+                context.stroke();
+            }
+        }, screenSpace, context);
     }
 }
 
 /** Draw colored ellipse using passed in point
  *  @param {Vector2} pos
- *  @param {number}  [width=1]
- *  @param {number}  [height=1]
- *  @param {number}  [angle=0]
+ *  @param {Vector2} [size=(1,1)]
  *  @param {Color}   [color=(1,1,1,1)]
- *  @param {number}  [lineWidth=0]
+ *  @param {number}  [angle]
+ *  @param {number}  [lineWidth]
  *  @param {Color}   [lineColor=(0,0,0,1)]
- *  @param {boolean} [screenSpace=false]
- *  @param {CanvasRenderingContext2D|OffscreenCanvasRenderingContext2D} [context=drawContext]
+ *  @param {boolean} [useWebGL=glEnable]
+ *  @param {boolean} [screenSpace]
+ *  @param {CanvasRenderingContext2D|OffscreenCanvasRenderingContext2D} [context]
  *  @memberof Draw */
-function drawEllipse(pos, width=1, height=1, angle=0, color=new Color, lineWidth=0, lineColor=new Color(0,0,0), screenSpace, context=drawContext)
+function drawEllipse(pos, size=vec2(1), color=WHITE, angle=0, lineWidth=0, lineColor=BLACK, useWebGL=glEnable, screenSpace=false, context)
 {
-    ASSERT(isColor(color) && isColor(lineColor));
-    if (!screenSpace)
+    ASSERT(isVector2(pos) && pos.isValid(), 'drawEllipse pos should be a vec2');
+    ASSERT(isVector2(size) && size.isValid(), 'drawEllipse size should be a vec2');
+    ASSERT(isColor(color) && isColor(lineColor), 'drawEllipse color is invalid');
+    ASSERT(isNumber(angle), 'drawEllipse angle should be a number');
+    ASSERT(isNumber(lineWidth), 'drawEllipse lineWidth should be a number');
+    ASSERT(lineWidth >= 0 && lineWidth < size.x && lineWidth < size.y, 'drawEllipse invalid lineWidth');
+    ASSERT(!context || !useWebGL, 'context only supported in canvas 2D mode');
+    if (useWebGL)
     {
-        pos = worldToScreen(pos);
-        width *= cameraScale;
-        height *= cameraScale;
-        lineWidth *= cameraScale;
+        // draw as a regular polygon
+        const sides = glCircleSides;
+        drawRegularPoly(pos, size, sides, color, lineWidth, lineColor, angle, useWebGL, screenSpace, context);
     }
-    context.fillStyle = color.toString();
-    context.beginPath();
-    context.ellipse(pos.x, pos.y, width, height, angle, 0, 9);
-    context.fill();
-    if (lineWidth)
+    else
     {
-        context.strokeStyle = lineColor.toString();
-        context.lineWidth = lineWidth;
-        context.stroke();
+        drawCanvas2D(pos, vec2(1), angle, false, context=>
+        {
+            context.fillStyle = color.toString();
+            context.beginPath();
+            context.ellipse(0, 0, size.x, size.y, 0, 0, 9);
+            context.fill();
+            if (lineWidth)
+            {
+                context.strokeStyle = lineColor.toString();
+                context.lineWidth = lineWidth;
+                context.stroke();
+            }
+        }, screenSpace, context);
     }
 }
 
@@ -3054,11 +3147,12 @@ function drawEllipse(pos, width=1, height=1, angle=0, color=new Color, lineWidth
  *  @param {Color}   [color=(1,1,1,1)]
  *  @param {number}  [lineWidth=0]
  *  @param {Color}   [lineColor=(0,0,0,1)]
- *  @param {boolean} [screenSpace=false]
- *  @param {CanvasRenderingContext2D|OffscreenCanvasRenderingContext2D} [context=drawContext]
+ *  @param {boolean} [useWebGL=glEnable]
+ *  @param {boolean} [screenSpace]
+ *  @param {CanvasRenderingContext2D|OffscreenCanvasRenderingContext2D} [context]
  *  @memberof Draw */
-function drawCircle(pos, radius=1, color=new Color, lineWidth=0, lineColor=new Color(0,0,0), screenSpace, context=drawContext)
-{ drawEllipse(pos, radius, radius, 0, color, lineWidth, lineColor, screenSpace, context); }
+function drawCircle(pos, radius=1, color=WHITE, lineWidth=0, lineColor=BLACK, useWebGL=glEnable, screenSpace=false, context)
+{ drawEllipse(pos, vec2(radius), color, 0, lineWidth, lineColor, useWebGL, screenSpace, context); }
 
 /** Draw directly to a 2d canvas context in world space
  *  @param {Vector2}  pos
@@ -3066,7 +3160,7 @@ function drawCircle(pos, radius=1, color=new Color, lineWidth=0, lineColor=new C
  *  @param {number}   angle
  *  @param {boolean}  [mirror]
  *  @param {Function} [drawFunction]
- *  @param {boolean} [screenSpace=false]
+ *  @param {boolean}  [screenSpace=false]
  *  @param {CanvasRenderingContext2D|OffscreenCanvasRenderingContext2D} [context=drawContext]
  *  @memberof Draw */
 function drawCanvas2D(pos, size, angle=0, mirror=false, drawFunction, screenSpace=false, context=drawContext)
@@ -3085,6 +3179,9 @@ function drawCanvas2D(pos, size, angle=0, mirror=false, drawFunction, screenSpac
     context.restore();
 }
 
+///////////////////////////////////////////////////////////////////////////////
+// Text Drawing Functions
+
 /** Draw text on main canvas in world space
  *  Automatically splits new lines into rows
  *  @param {string}  text
@@ -3133,7 +3230,7 @@ function drawTextOverlay(text, pos, size=1, color, lineWidth=0, lineColor, textA
  *  @param {number}  [maxWidth]
  *  @param {CanvasRenderingContext2D|OffscreenCanvasRenderingContext2D} [context=overlayContext]
  *  @memberof Draw */
-function drawTextScreen(text, pos, size=1, color=new Color, lineWidth=0, lineColor=new Color(0,0,0), textAlign='center', font=fontDefault, maxWidth=undefined, context=overlayContext)
+function drawTextScreen(text, pos, size=1, color=WHITE, lineWidth=0, lineColor=BLACK, textAlign='center', font=fontDefault, maxWidth, context=overlayContext)
 {
     context.fillStyle = color.toString();
     context.strokeStyle = lineColor.toString();
@@ -3154,22 +3251,67 @@ function drawTextScreen(text, pos, size=1, color=new Color, lineWidth=0, lineCol
     });
 }
 
-/** Enable normal or additive blend mode
- *  @param {boolean} [additive]
- *  @param {boolean} [useWebGL=glEnable]
- *  @param {CanvasRenderingContext2D|OffscreenCanvasRenderingContext2D} [context]
+///////////////////////////////////////////////////////////////////////////////
+// Drawing utilities
+
+/** Convert from screen to world space coordinates
+ *  @param {Vector2} screenPos
+ *  @return {Vector2}
  *  @memberof Draw */
-function setBlendMode(additive=false, useWebGL=glEnable, context)
+function screenToWorld(screenPos)
 {
-    ASSERT(!context || !useWebGL, 'context only supported in canvas 2D mode');
-    if (useWebGL)
-        glAdditive = additive;
-    else
+    let cameraPosRelativeX = (screenPos.x - mainCanvasSize.x/2 + .5) /  cameraScale;
+    let cameraPosRelativeY = (screenPos.y - mainCanvasSize.y/2 + .5) / -cameraScale;
+    if (cameraAngle)
     {
-        if (!context)
-            context = drawContext;
-        context.globalCompositeOperation = additive ? 'lighter' : 'source-over';
+        // apply camera rotation
+        const cos = Math.cos(-cameraAngle), sin = Math.sin(-cameraAngle);
+        const rotatedX = cameraPosRelativeX * cos - cameraPosRelativeY * sin;
+        const rotatedY = cameraPosRelativeX * sin + cameraPosRelativeY * cos;
+        cameraPosRelativeX = rotatedX;
+        cameraPosRelativeY = rotatedY;
     }
+    return new Vector2(cameraPosRelativeX + cameraPos.x, cameraPosRelativeY + cameraPos.y);
+}
+
+/** Convert from world to screen space coordinates
+ *  @param {Vector2} worldPos
+ *  @return {Vector2}
+ *  @memberof Draw */
+function worldToScreen(worldPos)
+{
+    let cameraPosRelativeX = worldPos.x - cameraPos.x;
+    let cameraPosRelativeY = worldPos.y - cameraPos.y;
+    if (cameraAngle)
+    {
+        // apply inverse camera rotation
+        const cos = Math.cos(cameraAngle), sin = Math.sin(cameraAngle);
+        const rotatedX = cameraPosRelativeX * cos - cameraPosRelativeY * sin;
+        const rotatedY = cameraPosRelativeX * sin + cameraPosRelativeY * cos;
+        cameraPosRelativeX = rotatedX;
+        cameraPosRelativeY = rotatedY;
+    }
+    return new Vector2
+    (
+        cameraPosRelativeX *  cameraScale + mainCanvasSize.x/2 - .5,
+        cameraPosRelativeY * -cameraScale + mainCanvasSize.y/2 - .5
+    );
+}
+
+/** Get the camera's visible area in world space
+ *  @return {Vector2}
+ *  @memberof Draw */
+function getCameraSize() { return mainCanvasSize.scale(1/cameraScale); }
+
+/** Enable normal or additive blend mode
+ *  @param {boolean} [additive]
+ *  @param {CanvasRenderingContext2D|OffscreenCanvasRenderingContext2D} [context]
+ *  @memberof Draw */
+function setBlendMode(additive=false, context)
+{
+    glAdditive = additive;
+    context ||= drawContext;
+    context.globalCompositeOperation = additive ? 'lighter' : 'source-over';
 }
 
 /** Combines all LittleJS canvases onto the main canvas and clears them
@@ -3186,11 +3328,107 @@ function combineCanvases()
     overlayCanvas.width |= 0;
 }
 
+/** Helper function to draw an image with color and additive color applied
+ *  This is slower then normal drawImage when color is applied
+    *  @param {CanvasRenderingContext2D|OffscreenCanvasRenderingContext2D} context
+    *  @param {HTMLImageElement|OffscreenCanvas} image
+    *  @param {number} sx
+    *  @param {number} sy
+    *  @param {number} sWidth
+    *  @param {number} sHeight
+    *  @param {number} dx
+    *  @param {number} dy
+    *  @param {number} dWidth
+    *  @param {number} dHeight
+    *  @param {Color} color
+    *  @param {Color} [additiveColor]
+ *  @memberof Draw */
+function drawImageColor(context, image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight, color, additiveColor)
+{
+    function isWhite(c) { return c.r >= 1 && c.g >= 1 && c.b >= 1; }
+    function isBlack(c) { return c.r <= 0 && c.g <= 0 && c.b <= 0 && c.a <= 0; }
+    const sx2 = tileFixBleedScale;
+    const sy2 = tileFixBleedScale;
+    const sWidth2  = sWidth  - 2*tileFixBleedScale;
+    const sHeight2 = sHeight - 2*tileFixBleedScale;
+    if (!canvasColorTiles || (additiveColor ? isWhite(color.add(additiveColor)) && additiveColor.a <= 0 : isWhite(color)))
+    {
+        // white texture with no additive alpha, no need to tint
+        context.globalAlpha = color.a;
+        context.drawImage(image, sx+sx2, sy+sy2, sWidth2, sHeight2, dx, dy, dWidth, dHeight);
+        context.globalAlpha = 1;
+    }
+    else
+    {
+        // copy to offscreen canvas
+        workCanvas.width = sWidth;
+        workCanvas.height = sHeight;
+        workContext.drawImage(image, sx, sy, sWidth, sHeight, 0, 0, sWidth, sHeight);
+
+        // tint image using offscreen work context
+        const imageData = workContext.getImageData(0, 0, sWidth, sHeight);
+        const data = imageData.data;
+        if (additiveColor && !isBlack(additiveColor))
+        {
+            // slower path with additive color
+            const colorMultiply = [color.r, color.g, color.b, color.a];
+            const colorAdd = [additiveColor.r * 255, additiveColor.g * 255, additiveColor.b * 255, additiveColor.a * 255];
+            for (let i = 0; i < data.length; ++i)
+                data[i] = data[i] * colorMultiply[i&3] + colorAdd[i&3] |0;
+            workContext.putImageData(imageData, 0, 0);
+            context.drawImage(workCanvas, sx2, sy2, sWidth2, sHeight2, dx, dy, dWidth, dHeight);
+        }
+        else
+        {
+            // faster path with no additive color
+            for (let i = 0; i < data.length; i+=4)
+            {
+                data[i  ] *= color.r;
+                data[i+1] *= color.g;
+                data[i+2] *= color.b;
+            }
+            workContext.putImageData(imageData, 0, 0);
+            context.globalAlpha = color.a;
+            context.drawImage(workCanvas, sx2, sy2, sWidth2, sHeight2, dx, dy, dWidth, dHeight);
+            context.globalAlpha = 1;
+        }
+    }
+}
+
+
+/** Returns true if fullscreen mode is active
+ *  @return {boolean}
+ *  @memberof Draw */
+function isFullscreen() { return !!document.fullscreenElement; }
+
+/** Toggle fullscreen mode
+ *  @memberof Draw */
+function toggleFullscreen()
+{
+    const rootElement = mainCanvas.parentElement;
+    if (isFullscreen())
+    {
+        if (document.exitFullscreen)
+            document.exitFullscreen();
+    }
+    else if (rootElement.requestFullscreen)
+        rootElement.requestFullscreen();
+}
+
+/** Set the cursor style
+ *  @param {string}  [cursorStyle] - CSS cursor style (auto, none, crosshair, etc)
+ *  @memberof Draw */
+function setCursor(cursorStyle = 'auto')
+{
+    const rootElement = mainCanvas.parentElement;
+    rootElement.style.cursor = cursorStyle;
+}
+
 ///////////////////////////////////////////////////////////////////////////////
 
 let engineFontImage;
 
-/** 
+/**
  * Font Image Object - Draw text on a 2D canvas by using characters in an image
  * - 96 characters (from space to tilde) are stored in an image
  * - Uses a default 8x8 font if none is supplied
@@ -3198,7 +3436,7 @@ let engineFontImage;
  * @example
  * // use built in font
  * const font = new FontImage;
- * 
+ *
  * // draw text
  * font.drawTextScreen("LittleJS\nHello World!", vec2(200, 50));
  */
@@ -3208,7 +3446,6 @@ class FontImage
      *  @param {HTMLImageElement} [image]    - Image for the font, if undefined default font is used
      *  @param {Vector2} [tileSize=(8,8)]    - Size of the font source tiles
      *  @param {Vector2} [paddingSize=(0,1)] - How much extra space to add between characters
-     *  @param {CanvasRenderingContext2D|OffscreenCanvasRenderingContext2D} [context=overlayContext] - context to draw to
      */
     constructor(image, tileSize=vec2(8), paddingSize=vec2(0,1), context=overlayContext)
     {
@@ -3222,7 +3459,6 @@ class FontImage
         this.image = image || engineFontImage;
         this.tileSize = tileSize;
         this.paddingSize = paddingSize;
-        this.context = context;
     }
 
     /** Draw text in world space using the image font
@@ -3230,30 +3466,39 @@ class FontImage
      *  @param {Vector2} pos
      *  @param {number}  [scale=.25]
      *  @param {boolean} [center]
+     *  @param {CanvasRenderingContext2D|OffscreenCanvasRenderingContext2D}[context=drawContext] 
      */
-    drawText(text, pos, scale=1, center)
+    drawText(text, pos, scale=1, center, context=drawContext)
     {
-        this.drawTextScreen(text, worldToScreen(pos).floor(), scale*cameraScale|0, center);
+        this.drawTextScreen(text, worldToScreen(pos).floor(), scale*cameraScale|0, center, context);
     }
 
-    /** Draw text in screen space using the image font
+    /** Draw text on overlay canvas in world space using the image font
      *  @param {string}  text
      *  @param {Vector2} pos
      *  @param {number}  [scale]
      *  @param {boolean} [center]
      */
-    drawTextScreen(text, pos, scale=4, center)
+    drawTextOverlay(text, pos, scale=4, center)
+    { this.drawText(text, pos, scale, center, overlayContext); }
+
+    /** Draw text on overlay canvas in screen space using the image font
+     *  @param {string}  text
+     *  @param {Vector2} pos
+     *  @param {number}  [scale]
+     *  @param {boolean} [center]
+     *  @param {CanvasRenderingContext2D|OffscreenCanvasRenderingContext2D} [context=drawContext]
+     */
+    drawTextScreen(text, pos, scale=4, center, context=overlayContext)
     {
-        const context = this.context;
         context.save();
-
         const size = this.tileSize;
         const drawSize = size.add(this.paddingSize).scale(scale);
         const cols = this.image.width / this.tileSize.x |0;
         (text+'').split('\n').forEach((line, i)=>
         {
             const centerOffset = center ? line.length * size.x * scale / 2 |0 : 0;
-            for(let j=line.length; j--;)
+            for (let j=line.length; j--;)
             {
                 // draw each character
                 let charCode = line[j].charCodeAt(0);
@@ -3265,46 +3510,14 @@ class FontImage
                 const x = tile % cols;
                 const y = tile / cols |0;
                 const drawPos = pos.add(vec2(j,i).multiply(drawSize));
-                context.drawImage(this.image, x * size.x, y * size.y, size.x, size.y, 
+                context.drawImage(this.image, x * size.x, y * size.y, size.x, size.y,
                     drawPos.x - centerOffset, drawPos.y, size.x * scale, size.y * scale);
             }
         });
-
         context.restore();
     }
-}
-
-///////////////////////////////////////////////////////////////////////////////
-// Display functions
-
-/** Returns true if fullscreen mode is active
- *  @return {boolean}
- *  @memberof Draw */
-function isFullscreen() { return !!document.fullscreenElement; }
-
-/** Toggle fullscreen mode
- *  @memberof Draw */
-function toggleFullscreen()
-{
-    const rootElement = mainCanvas.parentElement;
-    if (isFullscreen())
-    {
-        if (document.exitFullscreen)
-            document.exitFullscreen();
-    }
-    else if (rootElement.requestFullscreen)
-        rootElement.requestFullscreen();
-}
-
-/** Set the cursor style
- *  @param {string}  cursorStyle - CSS cursor style (auto, none, crosshair, etc)
- *  @memberof Draw */
-function setCursor(cursorStyle = 'auto')
-{
-    const rootElement = mainCanvas.parentElement;
-    rootElement.style.cursor = cursorStyle;
 }
-/** 
+/**
  * LittleJS Input System
  * - Tracks keyboard down, pressed, and released
  * - Tracks mouse buttons, position, and wheel
@@ -3320,10 +3533,10 @@ function setCursor(cursorStyle = 'auto')
  *  @return {boolean}
  *  @memberof Input */
 function keyIsDown(key, device=0)
-{ 
+{
     ASSERT(key !== undefined, 'key is undefined');
-    ASSERT(device > 0 || typeof key != 'number' || key < 3, 'use code string for keyboard');
-    return inputData[device] && !!(inputData[device][key] & 1); 
+    ASSERT(device > 0 || typeof key !== 'number' || key < 3, 'use code string for keyboard');
+    return inputData[device] && !!(inputData[device][key] & 1);
 }
 
 /** Returns true if device key was pressed this frame
@@ -3332,10 +3545,10 @@ function keyIsDown(key, device=0)
  *  @return {boolean}
  *  @memberof Input */
 function keyWasPressed(key, device=0)
-{ 
+{
     ASSERT(key !== undefined, 'key is undefined');
-    ASSERT(device > 0 || typeof key != 'number' || key < 3, 'use code string for keyboard');
-    return inputData[device] && !!(inputData[device][key] & 2); 
+    ASSERT(device > 0 || typeof key !== 'number' || key < 3, 'use code string for keyboard');
+    return inputData[device] && !!(inputData[device][key] & 2);
 }
 
 /** Returns true if device key was released this frame
@@ -3344,9 +3557,9 @@ function keyWasPressed(key, device=0)
  *  @return {boolean}
  *  @memberof Input */
 function keyWasReleased(key, device=0)
-{ 
+{
     ASSERT(key !== undefined, 'key is undefined');
-    ASSERT(device > 0 || typeof key != 'number' || key < 3, 'use code string for keyboard');
+    ASSERT(device > 0 || typeof key !== 'number' || key < 3, 'use code string for keyboard');
     return inputData[device] && !!(inputData[device][key] & 4);
 }
 
@@ -3468,7 +3681,7 @@ function gamepadWasReleased(button, gamepad=0)
  *  @param {number} [gamepad]
  *  @return {Vector2}
  *  @memberof Input */
-function gamepadStick(stick,  gamepad=0)
+function gamepadStick(stick, gamepad=0)
 { return gamepadStickData[gamepad] ? gamepadStickData[gamepad][stick] || vec2() : vec2(); }
 
 ///////////////////////////////////////////////////////////////////////////////
@@ -3545,10 +3758,10 @@ function inputInit()
     {
         // handle remapping wasd keys to directions
         return inputWASDEmulateDirection ?
-            c == 'KeyW' ? 'ArrowUp' :
-            c == 'KeyS' ? 'ArrowDown' :
-            c == 'KeyA' ? 'ArrowLeft' :
-            c == 'KeyD' ? 'ArrowRight' : c : c;
+            c === 'KeyW' ? 'ArrowUp' :
+            c === 'KeyS' ? 'ArrowDown' :
+            c === 'KeyA' ? 'ArrowLeft' :
+            c === 'KeyD' ? 'ArrowRight' : c : c;
     }
     function onMouseDown(e)
     {
@@ -3556,9 +3769,9 @@ function inputInit()
             return;
 
         // fix stalled audio requiring user interaction
-        if (soundEnable && !headlessMode && audioContext && audioContext.state != 'running')
+        if (soundEnable && !headlessMode && audioContext && !audioIsRunning())
             audioContext.resume();
-        
+
         isUsingGamepad = false;
         inputData[0][e.button] = 3;
         mousePosScreen = mouseEventToScreen(vec2(e.x,e.y));
@@ -3601,8 +3814,8 @@ function gamepadsUpdate()
     const applyDeadZones = (v)=>
     {
         const min=.3, max=.8;
-        const deadZone = (v)=> 
-            v >  min ?  percent( v, min, max) : 
+        const deadZone = (v)=>
+            v > min ? percent(v, min, max) :
             v < -min ? -percent(-v, min, max) : 0;
         return vec2(deadZone(v.x), deadZone(-v.y)).clampLength();
     }
@@ -3610,30 +3823,29 @@ function gamepadsUpdate()
     // update touch gamepad if enabled
     if (touchGamepadEnable && isTouchDevice)
     {
-        ASSERT(touchGamepadButtons, 'set touchGamepadEnable before calling init!');
-        if (touchGamepadTimer.isSet())
+        if (!touchGamepadTimer.isSet())
+            return;
+
+        // read virtual analog stick
+        const sticks = gamepadStickData[0] || (gamepadStickData[0] = []);
+        sticks[0] = vec2();
+        if (touchGamepadAnalog)
+            sticks[0] = applyDeadZones(touchGamepadStick);
+        else if (touchGamepadStick.lengthSquared() > .3)
         {
-            // read virtual analog stick
-            const sticks = gamepadStickData[0] || (gamepadStickData[0] = []);
-            sticks[0] = vec2();
-            if (touchGamepadAnalog)
-                sticks[0] = applyDeadZones(touchGamepadStick);
-            else if (touchGamepadStick.lengthSquared() > .3)
-            {
-                // convert to 8 way dpad
-                sticks[0].x = Math.round(touchGamepadStick.x);
-                sticks[0].y = -Math.round(touchGamepadStick.y);
-                sticks[0] = sticks[0].clampLength();
-            }
+            // convert to 8 way dpad
+            sticks[0].x = Math.round(touchGamepadStick.x);
+            sticks[0].y = -Math.round(touchGamepadStick.y);
+            sticks[0] = sticks[0].clampLength();
+        }
 
-            // read virtual gamepad buttons
-            const data = inputData[1] || (inputData[1] = []);
-            for (let i=10; i--;)
-            {
-                const j = i == 3 ? 2 : i == 2 ? 3 : i; // fix button locations
-                const wasDown = gamepadIsDown(j,0);
-                data[j] = touchGamepadButtons[i] ? wasDown ? 1 : 3 : wasDown ? 4 : 0;
-            }
+        // read virtual gamepad buttons
+        const data = inputData[1] || (inputData[1] = []);
+        for (let i=10; i--;)
+        {
+            const j = i === 3 ? 2 : i === 2 ? 3 : i; // fix button locations
+            const wasDown = gamepadIsDown(j,0);
+            data[j] = touchGamepadButtons[i] ? wasDown ? 1 : 3 : wasDown ? 4 : 0;
         }
     }
 
@@ -3659,7 +3871,7 @@ function gamepadsUpdate()
             // read analog sticks
             for (let j = 0; j < gamepad.axes.length-1; j+=2)
                 sticks[j>>1] = applyDeadZones(vec2(gamepad.axes[j],gamepad.axes[j+1]));
-            
+
             // read buttons
             for (let j = gamepad.buttons.length; j--;)
             {
@@ -3675,14 +3887,14 @@ function gamepadsUpdate()
             {
                 // copy dpad to left analog stick when pressed
                 const dpad = vec2(
-                    (gamepadIsDown(15,i)&&1) - (gamepadIsDown(14,i)&&1), 
+                    (gamepadIsDown(15,i)&&1) - (gamepadIsDown(14,i)&&1),
                     (gamepadIsDown(12,i)&&1) - (gamepadIsDown(13,i)&&1));
                 if (dpad.lengthSquared())
                     sticks[0] = dpad.clampLength();
             }
 
             // disable touch gamepad if using real gamepad
-            touchGamepadEnable && isUsingGamepad && touchGamepadTimer.unset(); 
+            touchGamepadEnable && isUsingGamepad && touchGamepadTimer.unset();
         }
     }
 }
@@ -3707,20 +3919,13 @@ function vibrateStop() { vibrate(0); }
 const isTouchDevice = !headlessMode && window.ontouchstart !== undefined;
 
 // touch gamepad internal variables
-let touchGamepadTimer = new Timer, touchGamepadButtons, touchGamepadStick;
+let touchGamepadTimer = new Timer, touchGamepadButtons = [], touchGamepadStick = vec2();
 
 // enable touch input mouse passthrough
 function touchInputInit()
 {
     // add non passive touch event listeners
     let handleTouch = handleTouchDefault;
-    if (touchGamepadEnable)
-    {
-        // touch input internal variables
-        handleTouch = handleTouchGamepad;
-        touchGamepadButtons = [];
-        touchGamepadStick = vec2();
-    }
     document.addEventListener('touchstart', (e) => handleTouch(e), { passive: false });
     document.addEventListener('touchmove',  (e) => handleTouch(e), { passive: false });
     document.addEventListener('touchend',   (e) => handleTouch(e), { passive: false });
@@ -3729,8 +3934,15 @@ function touchInputInit()
     let wasTouching;
     function handleTouchDefault(e)
     {
+        if (!touchInputEnable)
+            return;
+
+        // route touch to gamepad
+        if (touchGamepadEnable)
+            handleTouchGamepad(e);
+
         // fix stalled audio requiring user interaction
-        if (soundEnable && !headlessMode && audioContext && audioContext.state != 'running')
+        if (soundEnable && !headlessMode && audioContext && !audioIsRunning())
             audioContext.resume();
 
         // check if touching and pass to mouse events
@@ -3759,7 +3971,7 @@ function touchInputInit()
         // prevent default handling like copy and magnifier lens
         if (inputPreventDefault && document.hasFocus()) // allow document to get focus
             e.preventDefault();
-        
+
         // must return true so the document will get focus
         return true;
     }
@@ -3771,7 +3983,7 @@ function touchInputInit()
         touchGamepadStick = vec2();
         touchGamepadButtons = [];
         isUsingGamepad = true;
-            
+
         const touching = e.touches.length;
         if (touching)
         {
@@ -3780,9 +3992,6 @@ function touchInputInit()
             {
                 // touch anywhere to press start when paused
                 touchGamepadButtons[9] = 1;
-
-                // call default touch handler so normal touch events still work
-                handleTouchDefault(e);
                 return;
             }
         }
@@ -3813,12 +4022,6 @@ function touchInputInit()
                 touchGamepadButtons[9] = 1;
             }
         }
-
-        // call default touch handler so normal touch events still work
-        handleTouchDefault(e);
-        
-        // must return true so the document will get focus
-        return true;
     }
 }
 
@@ -3828,7 +4031,7 @@ function touchGamepadRender()
     if (!touchInputEnable || !isTouchDevice || headlessMode) return;
     if (!touchGamepadEnable || !touchGamepadTimer.isSet())
         return;
-    
+
     // fade off when not touching or paused
     const alpha = percent(touchGamepadTimer.get(), 4, 3);
     if (!alpha || paused)
@@ -3854,16 +4057,16 @@ function touchGamepadRender()
     }
     else // draw cross shaped gamepad
     {
-        for(let i=10; i--;)
+        for (let i=10; i--;)
         {
             const angle = i*PI/4;
             context.arc(leftCenter.x, leftCenter.y,touchGamepadSize*.6, angle + PI/8, angle + PI/8);
             i%2 && context.arc(leftCenter.x, leftCenter.y, touchGamepadSize*.33, angle, angle);
-            i==1 && context.fill();
+            i===1 && context.fill();
         }
         context.stroke();
     }
-    
+
     // draw right face buttons
     const rightCenter = vec2(mainCanvasSize.x-touchGamepadSize, mainCanvasSize.y-touchGamepadSize);
     for (let i=4; i--;)
@@ -3898,8 +4101,8 @@ function pointerLockExit() { document.exitPointerLock && document.exitPointerLoc
 /** Check if pointer is locked (true if locked)
  *  @return {boolean}
  *  @memberof Input */
-function pointerLockIsActive() { return document.pointerLockElement == mainCanvas }
-/** 
+function pointerLockIsActive() { return document.pointerLockElement === mainCanvas; }
+/**
  * LittleJS Audio System
  * - <a href=https://killedbyapixel.github.io/ZzFX/>ZzFX Sound Effects</a> - ZzFX Sound Effect Generator
  * - <a href=https://keithclark.github.io/ZzFXM/>ZzFXM Music</a> - ZzFXM Music System
@@ -3920,10 +4123,21 @@ let audioContext = new AudioContext;
  *  @memberof Audio */
 let audioMasterGain;
 
+/** Default sample rate used for sounds
+ *  @default 44100
+ *  @memberof Audio */
+const audioDefaultSampleRate = 44100;
+
+/** Check if the audio context is running and available for playback
+ *  @return {boolean} - True if the audio context is running
+ *  @memberof Audio */
+function audioIsRunning()
+{ return audioContext.state === 'running'; }
+
 function audioInit()
 {
     if (!soundEnable || headlessMode) return;
-    
+
     audioMasterGain = audioContext.createGain();
     audioMasterGain.connect(audioContext.destination);
     audioMasterGain.gain.value = soundVolume; // set starting value
@@ -3931,14 +4145,14 @@ function audioInit()
 
 ///////////////////////////////////////////////////////////////////////////////
 
-/** 
+/**
  * Sound Object - Stores a sound for later use and can be played positionally
- * 
+ *
  * <a href=https://killedbyapixel.github.io/ZzFX/>Create sounds using the ZzFX Sound Designer.</a>
  * @example
  * // create a sound
  * const sound_example = new Sound([.5,.5]);
- * 
+ *
  * // play the sound
  * sound_example.play();
  */
@@ -3955,33 +4169,41 @@ class Sound
 
         /** @property {number} - World space max range of sound */
         this.range = range;
-
         /** @property {number} - At what percentage of range should it start tapering */
         this.taper = taper;
-
         /** @property {number} - How much to randomize frequency each time sound plays */
         this.randomness = 0;
+        /** @property {number} - Sample rate for this sound */
+        this.sampleRate = audioDefaultSampleRate;
+        /** @property {number} - Percentage of this sound currently loaded */
+        this.loadedPercent = 0;
 
+        // generate zzfx sound now for fast playback
         if (zzfxSound)
         {
-            // generate zzfx sound now for fast playback
-            const defaultRandomness = .05;
-            this.randomness = zzfxSound[1] != undefined ? zzfxSound[1] : defaultRandomness;
-            zzfxSound[1] = 0; // generate without randomness
+            // remove randomness so it can be applied on playback
+            const randomnessIndex = 1, defaultRandomness = .05;
+            this.randomness = zzfxSound[randomnessIndex] !== undefined ? 
+                zzfxSound[randomnessIndex] : defaultRandomness;
+            zzfxSound[randomnessIndex] = 0;
+
+            // generate the zzfx samples
             this.sampleChannels = [zzfxG(...zzfxSound)];
-            this.sampleRate = zzfxR;
+            this.loadedPercent = 1;
         }
     }
 
     /** Play the sound
-     *  @param {Vector2} [pos] - World space position to play the sound, sound is not attenuated if null
-     *  @param {number}  [volume] - How much to scale volume by (in addition to range fade)
-     *  @param {number}  [pitch] - How much to scale pitch by (also adjusted by this.randomness)
-     *  @param {number}  [randomnessScale] - How much to scale randomness
-     *  @param {boolean} [loop] - Should the sound loop
-     *  @return {AudioBufferSourceNode} - The audio source node
+     *  Sounds may not play until a user interaction occurs
+     *  @param {Vector2} [pos] - World space position to play the sound if any
+     *  @param {number}  [volume] - How much to scale volume by
+     *  @param {number}  [pitch] - How much to scale pitch by
+     *  @param {number}  [randomnessScale] - How much to scale pitch randomness
+     *  @param {boolean} [loop] - Should the sound loop?
+     *  @param {boolean} [paused] - Should the sound start paused
+     *  @return {SoundInstance} - The audio source node
      */
-    play(pos, volume=1, pitch=1, randomnessScale=1, loop=false)
+    play(pos, volume=1, pitch=1, randomnessScale=1, loop=false, paused=false)
     {
         if (!soundEnable || headlessMode) return;
         if (!this.sampleChannels) return;
@@ -4004,75 +4226,55 @@ class Sound
             // get pan from screen space coords
             pan = worldToScreen(pos).x * 2/mainCanvas.width - 1;
         }
-
-        // play the sound
-        const playbackRate = pitch + pitch * this.randomness*randomnessScale*rand(-1,1);
-        this.gainNode = audioContext.createGain();
-        this.source = playSamples(this.sampleChannels, volume, playbackRate, pan, loop, this.sampleRate, this.gainNode);
-        return this.source;
-    }
-
-    /** Set the sound volume of the most recently played instance of this sound
-     *  @param {number}  [volume] - How much to scale volume by
-     */
-    setVolume(volume=1)
-    {
-        if (this.gainNode)
-            this.gainNode.gain.value = volume;
-    }
-
-    /** Stop the last instance of this sound that was played
-     *  @param {number}  [fadeTime] - How long to fade out (seconds)
-     */
-    stop(fadeTime=0)
-    {
-        if (!this.source)
-            return;
         
-        // ramp off gain
-        const startFade = audioContext.currentTime;
-        const endFade = startFade + fadeTime;
-        this.gainNode.gain.linearRampToValueAtTime(1, startFade);
-        this.gainNode.gain.linearRampToValueAtTime(0, endFade);
-        this.source.stop(endFade);
-        this.source = undefined;
+        // Create and return sound instance
+        const rate = pitch + pitch * this.randomness*randomnessScale*rand(-1,1);
+        return new SoundInstance(this, volume, rate, pan, loop, paused);
     }
     
-    /** Get source of most recent instance of this sound that was played
-     *  @return {AudioBufferSourceNode}
+    /** Play a music track that loops by default
+     *  @param {number} [volume] - Volume to play the music at
+     *  @param {boolean} [loop] - Should the music loop?
+     *  @param {boolean} [paused] - Should the music start paused
+     *  @return {SoundInstance} - The audio source node
      */
-    getSource() { return this.source; }
+    playMusic(volume=1, loop=true, paused=false)
+    { return this.play(undefined, volume, 1, 0, loop, paused); }
 
-    /** Play the sound as a note with a semitone offset
+    /** Play the sound as a musical note with a semitone offset
+     *  This can be used to play music with chromatic scales
      *  @param {number}  semitoneOffset - How many semitones to offset pitch
-     *  @param {Vector2} [pos] - World space position to play the sound, sound is not attenuated if null
-     *  @param {number}  [volume=1] - How much to scale volume by (in addition to range fade)
-     *  @return {AudioBufferSourceNode} - The audio source node
+     *  @param {Vector2} [pos] - World space position to play the sound if any
+     *  @param {number}  [volume=1] - How much to scale volume by
+     *  @return {SoundInstance} - The audio source node
      */
     playNote(semitoneOffset, pos, volume)
-    { return this.play(pos, volume, 2**(semitoneOffset/12), 0); }
+    {
+        const pitch = getNoteFrequency(semitoneOffset, 1);
+        return this.play(pos, volume, pitch, 0);
+    }
 
     /** Get how long this sound is in seconds
      *  @return {number} - How long the sound is in seconds (undefined if loading)
      */
-    getDuration() 
+    getDuration()
     { return this.sampleChannels && this.sampleChannels[0].length / this.sampleRate; }
-    
-    /** Check if sound is loading, for sounds fetched from a url
-     *  @return {boolean} - True if sound is loading and not ready to play
+
+    /** Check if sound is loaded, for sounds fetched from a url
+     *  @return {boolean} - True if sound is loaded and ready to play
      */
-    isLoading() { return !this.sampleChannels; }
+    isLoaded() { return this.loadedPercent === 1; }
 }
 
 ///////////////////////////////////////////////////////////////////////////////
 
-/** 
+/**
  * Sound Wave Object - Stores a wave sound for later use and can be played positionally
  * - this can be used to play wave, mp3, and ogg files
  * @example
  * // create a sound
  * const sound_example = new SoundWave('sound.mp3');
- * 
+ *
  * // play the sound
  * sound_example.play();
  */
@@ -4104,26 +4306,202 @@ class SoundWave extends Sound
         const response = await fetch(filename);
         const arrayBuffer = await response.arrayBuffer();
         const audioBuffer = await audioContext.decodeAudioData(arrayBuffer);
-        this.sampleChannels = [];
-        for (let i = audioBuffer.numberOfChannels; i--;)
-            this.sampleChannels[i] = Array.from(audioBuffer.getChannelData(i));
+        
+        // convert audio buffer to sample channels across multiple frames
+        const channelCount = audioBuffer.numberOfChannels;
+        const samplesPerFrame = 1e5;
+        const sampleChannels = [];
+        for (let channel = 0; channel < channelCount; channel++)
+        {
+            const channelData = audioBuffer.getChannelData(channel);
+            const channelLength = channelData.length;
+            sampleChannels[channel] = new Array(channelLength);
+            let sampleIndex = 0;
+            while (sampleIndex < channelLength)
+            {
+                // yield to next frame
+                await new Promise(resolve => setTimeout(resolve, 0));
+
+                // copy chunk of samples
+                const endIndex = min(sampleIndex + samplesPerFrame, channelLength);
+                for (; sampleIndex < endIndex; sampleIndex++)
+                    sampleChannels[channel][sampleIndex] = channelData[sampleIndex];
+
+                // update loaded percent
+                const samplesTotal = channelCount * channelLength;
+                const samplesProcessed = channel * channelLength + sampleIndex;
+                this.loadedPercent = samplesProcessed / samplesTotal;
+            }
+        }
+        
+        // setup the sound to be played
         this.sampleRate = audioBuffer.sampleRate;
+        this.sampleChannels = sampleChannels;
+        this.loadedPercent = 1;
         if (this.onloadCallback)
             this.onloadCallback();
     }
 }
 
-/** Play an mp3, ogg, or wav audio from a local file or url
- *  @param {string}  filename - Location of sound file to play
- *  @param {number}  [volume] - How much to scale volume by
- *  @param {boolean} [loop] - True if the music should loop
- *  @return {SoundWave} - The sound object for this file
- *  @memberof Audio */
-function playAudioFile(filename, volume=1, loop=false)
+///////////////////////////////////////////////////////////////////////////////
+
+/** 
+ * Sound Instance - Wraps an AudioBufferSourceNode for individual sound control
+ * Represents a single playing instance of a sound with pause/resume capabilities
+ * @example
+ * // Play a sound and get an instance for control
+ * const jumpSound = new Sound([.5,.5,220]);
+ * const instance = jumpSound.play();
+ * 
+ * // Control the individual instance
+ * instance.setVolume(.5);
+ * instance.pause();
+ * instance.unpause();
+ * instance.stop();
+ */
+class SoundInstance
 {
-    if (!soundEnable || headlessMode) return;
+    /** Create a sound instance
+     *  @param {Sound}    sound    - The sound object
+     *  @param {number}   [volume] - How much to scale volume by
+     *  @param {number}   [rate]   - The playback rate to use
+     *  @param {number}   [pan]    - How much to apply stereo panning
+     *  @param {boolean}  [loop]   - Should the sound loop?
+     *  @param {boolean}  [paused] - Should the sound start paused? */
+    constructor(sound, volume=1, rate=1, pan=0, loop=false, paused=false)
+    {
+        ASSERT(sound instanceof Sound, 'SoundInstance requires a valid Sound object');
+        ASSERT(volume >= 0, 'Sound volume must be positive or zero');
+        ASSERT(rate >= 0, 'Sound rate must be positive or zero');
+        ASSERT(isNumber(pan), 'Sound pan must be a number');
+
+        /** @property {Sound} - The sound object */
+        this.sound = sound;
+        /** @property {number} - How much to scale volume by */
+        this.volume = volume;
+        /** @property {number} - The playback rate to use */
+        this.rate = rate;
+        /** @property {number} - How much to apply stereo panning */
+        this.pan = pan;
+        /** @property {boolean} - Should the sound loop */
+        this.loop = loop;
+        /** @property {number} - Timestamp for audio context when paused */
+        this.pausedTime = 0;
+        /** @property {number} - Timestamp for audio context when started */
+        this.startTime = undefined;
+        /** @property {GainNode} - Gain node for the sound */
+        this.gainNode = undefined;
+        /** @property {AudioBufferSourceNode} - Source node of the audio */
+        this.source = undefined;
+        // setup end callback and start sound
+        this.onendedCallback = (source)=>
+        {
+            if (source === this.source)
+                this.source = undefined;
+        };
+        if (!paused)
+            this.start();
+    }
 
-    return new SoundWave(filename,0,0,0, s=>s.play(undefined, volume, 1, 1, loop));
+    /** Start playing the sound instance from the offset time
+     *  @param {number} [offset] - Offset in seconds to start playback from 
+     */
+    start(offset=0)
+    {
+        ASSERT(offset >= 0, 'Sound start offset must be positive or zero');
+        if (this.isPlaying())
+            this.stop();
+        this.gainNode = audioContext.createGain();
+        this.source = playSamples(this.sound.sampleChannels, this.volume, this.rate, this.pan, this.loop, this.sound.sampleRate, this.gainNode, offset, this.onendedCallback);
+        this.startTime = audioContext.currentTime - offset;
+        this.pausedTime = undefined;
+    }
+
+    /** Set the volume of this sound instance
+     *  @param {number} volume */
+    setVolume(volume)
+    {
+        ASSERT(volume >= 0, 'Sound volume must be positive or zero');
+        this.volume = volume;
+        if (this.gainNode)
+            this.gainNode.gain.value = volume;
+    }
+
+    /** Stop this sound instance and reset position to the start */
+    stop(fadeTime=0)
+    {
+        ASSERT(fadeTime >= 0, 'Sound fade time must be positive or zero');
+        if (this.isPlaying())
+        {
+            if (fadeTime)
+            {
+                // ramp off gain
+                const startFade = audioContext.currentTime;
+                const endFade = startFade + fadeTime;
+                this.gainNode.gain.linearRampToValueAtTime(1, startFade);
+                this.gainNode.gain.linearRampToValueAtTime(0, endFade);
+                this.source.stop(endFade);
+            }
+            else
+                this.source.stop();
+        }
+        this.pausedTime = 0;
+        this.source = undefined;
+        this.startTime = undefined;
+    }
+
+    /** Pause this sound instance */
+    pause()
+    {
+        if (this.isPaused())
+            return;
+
+        // save current time and stop sound
+        this.pausedTime = this.getCurrentTime();
+        this.source.stop();
+        this.source = undefined;
+        this.startTime = undefined;
+    }
+
+    /** Unpauses this sound instance */
+    resume()
+    {
+        if (!this.isPaused())
+            return;
+        
+        // restart sound from paused time
+        this.start(this.pausedTime);
+    }
+
+    /** Check if this instance is currently playing
+     *  @return {boolean} - True if playing
+     */
+    isPlaying() { return !!this.source; }
+
+    /** Check if this instance is paused and was not stopped
+     *  @return {boolean} - True if paused
+     */
+    isPaused() { return !this.isPlaying(); }
+
+    /** Get the current playback time in seconds
+     *  @return {number} - Current playback time
+     */
+    getCurrentTime()
+    {
+        const deltaTime = mod(audioContext.currentTime - this.startTime, 
+            this.getDuration());
+        return this.isPlaying() ? deltaTime : this.pausedTime;
+    }
+
+    /** Get the total duration of this sound
+     *  @return {number} - Total duration in seconds
+     */
+    getDuration() { return this.sound.getDuration() / this.rate; }
+
+    /** Get source of this sound instance
+     *  @return {AudioBufferSourceNode}
+     */
+    getSource() { return this.source; }
 }
 
 ///////////////////////////////////////////////////////////////////////////////
@@ -4177,9 +4555,11 @@ function getNoteFrequency(semitoneOffset, rootFrequency=220)
  *  @param {boolean}  [loop] - True if the sound should loop when it reaches the end
  *  @param {number}   [sampleRate=44100] - Sample rate for the sound
  *  @param {GainNode} [gainNode] - Optional gain node for volume control while playing
+ *  @param {number}   [offset] - Offset in seconds to start playback from
+ *  @param {Function} [onended] - Callback for when the sound ends
  *  @return {AudioBufferSourceNode} - The audio node of the sound played
  *  @memberof Audio */
-function playSamples(sampleChannels, volume=1, rate=1, pan=0, loop=false, sampleRate=zzfxR, gainNode) 
+function playSamples(sampleChannels, volume=1, rate=1, pan=0, loop=false, sampleRate=audioDefaultSampleRate, gainNode, offset=0, onended)
 {
     if (!soundEnable || headlessMode) return;
 
@@ -4204,16 +4584,20 @@ function playSamples(sampleChannels, volume=1, rate=1, pan=0, loop=false, sample
     const pannerNode = new StereoPannerNode(audioContext, {'pan':clamp(pan, -1, 1)});
     source.connect(pannerNode).connect(gainNode);
 
-    // play the sound
-    if (audioContext.state != 'running')
+    // callback when the sound ends
+    if (onended)
+        source.addEventListener('ended', ()=> onended(source));
+
+    if (!audioIsRunning())
     {
-        // fix stalled audio and play
-        audioContext.resume().then(()=>source.start());
+        // fix stalled audio, this sound won't be able to play
+        audioContext.resume();
+        return;
     }
-    else
-        source.start();
 
-    // return sound
+    // play and return sound
+    const startOffset = offset * rate;
+    source.start(0, startOffset);
     return source;
 }
 
@@ -4221,18 +4605,13 @@ function playSamples(sampleChannels, volume=1, rate=1, pan=0, loop=false, sample
 // ZzFXMicro - Zuper Zmall Zound Zynth - v1.3.2 by Frank Force
 
 /** Generate and play a ZzFX sound
- *  
+ *
  *  <a href=https://killedbyapixel.github.io/ZzFX/>Create sounds using the ZzFX Sound Designer.</a>
  *  @param {Array} zzfxSound - Array of ZzFX parameters, ex. [.5,.5]
  *  @return {AudioBufferSourceNode} - The audio node of the sound played
  *  @memberof Audio */
 function zzfx(...zzfxSound) { return playSamples([zzfxG(...zzfxSound)]); }
 
-/** Sample rate used for all ZzFX sounds
- *  @default 44100
- *  @memberof Audio */
-const zzfxR = 44100; 
-
 /** Generate samples for a ZzFX sound
  *  @param {number}  [volume] - Volume scale (percent)
  *  @param {number}  [randomness] - How much to randomize frequency (percent Hz)
@@ -4256,11 +4635,10 @@ const zzfxR = 44100;
  *  @param {number}  [tremolo] - Trembling effect, rate controlled by repeat time (percent)
  *  @param {number}  [filter] - Filter cutoff frequency, positive for HPF, negative for LPF (Hz)
  *  @return {Array} - Array of audio samples
- *  @memberof Audio
- */
+ *  @memberof Audio */
 function zzfxG
 (
-    volume = 1, 
+    volume = 1,
     randomness = .05,
     frequency = 220,
     attack = 0,
@@ -4268,11 +4646,11 @@ function zzfxG
     release = .1,
     shape = 0,
     shapeCurve = 1,
-    slide = 0, 
-    deltaSlide = 0, 
-    pitchJump = 0, 
-    pitchJumpTime = 0, 
-    repeatTime = 0, 
+    slide = 0,
+    deltaSlide = 0,
+    pitchJump = 0,
+    pitchJumpTime = 0,
+    repeatTime = 0,
     noise = 0,
     modulation = 0,
     bitCrush = 0,
@@ -4284,19 +4662,19 @@ function zzfxG
 )
 {
     // init parameters
-    let sampleRate = zzfxR,
-        PI2 = PI*2, 
+    let sampleRate = audioDefaultSampleRate,
+        PI2 = PI*2,
         startSlide = slide *= 500 * PI2 / sampleRate / sampleRate,
-        startFrequency = frequency *= 
+        startFrequency = frequency *=
             (1 + rand(randomness,-randomness)) * PI2 / sampleRate,
-        modOffset = 0, // modulation offset  
+        modOffset = 0, // modulation offset
         repeat = 0,    // repeat offset
         crush = 0,     // bit crush offset
         jump = 1,      // pitch jump timer
         length,        // sample length
         b = [],        // sample buffer
         t = 0,         // sample time
-        i = 0,         // sample index 
+        i = 0,         // sample index
         s = 0,         // sample value
         f,             // wave frequency
 
@@ -4304,7 +4682,7 @@ function zzfxG
         quality = 2, w = PI2 * abs(filter) * 2 / sampleRate,
         cos = Math.cos(w), alpha = Math.sin(w) / 2 / quality,
         a0 = 1 + alpha, a1 = -2*cos / a0, a2 = (1 - alpha) / a0,
-        b0 = (1 + sign(filter) * cos) / 2 / a0, 
+        b0 = (1 + sign(filter) * cos) / 2 / a0,
         b1 = -(sign(filter) + cos) / a0, b2 = b0,
         x2 = 0, x1 = 0, y2 = 0, y1 = 0;
 
@@ -4322,7 +4700,7 @@ function zzfxG
         repeatTime = repeatTime * sampleRate | 0;
 
     // generate waveform
-    for(length = attack + decay + sustain + release + delay | 0;
+    for (length = attack + decay + sustain + release + delay | 0;
         i < length; b[i++] = s * volume)                   // sample
     {
         if (!(++crush%(bitCrush*100|0)))                   // bit crush
@@ -4350,7 +4728,7 @@ function zzfxG
                 0);                                      // post release
 
             s = delay ? s/2 + (delay > i ? 0 :           // delay
-                (i<length-delay? 1 : (length-i)/delay) * // release delay 
+                (i<length-delay? 1 : (length-i)/delay) * // release delay
                 b[i-delay|0]/2/volume) : s;              // sample delay
 
             if (filter)                                  // apply filter
@@ -4362,14 +4740,14 @@ function zzfxG
         t += f + f*noise*Math.sin(i**5);        // noise
 
         if (jump && ++jump > pitchJumpTime)     // pitch jump
-        { 
+        {
             frequency += pitchJump;             // apply pitch jump
             startFrequency += pitchJump;        // also apply to start
             jump = 0;                           // stop pitch jump time
-        } 
+        }
 
         if (repeatTime && !(++repeat % repeatTime)) // repeat
-        { 
+        {
             frequency = startFrequency;   // reset frequency
             slide = startSlide;           // reset slide
             jump ||= 1;                   // reset pitch jump time
@@ -4378,7 +4756,7 @@ function zzfxG
 
     return b; // return sample buffer
 }
-/** 
+/**
  * LittleJS Tile Layer System
  * - Caches arrays of tiles to off screen canvas for fast rendering
  * - Unlimited numbers of layers, allocates canvases as needed
@@ -4392,9 +4770,9 @@ function zzfxG
 // Tile Layer System
 
 /** Keep track of all tile layers with collision
- *  @type {Array<TileCollisionLayer>} 
+ *  @type {Array<TileCollisionLayer>}
  *  @memberof TileCollision */
-let tileCollisionLayers = [];
+const tileCollisionLayers = [];
 
 /** Get tile collision data for a given cell in the grid
 *  @param {Vector2} pos
@@ -4448,7 +4826,7 @@ function tileCollisionRaycast(posStart, posEnd, object, solidOnly=true)
 }
 
 ///////////////////////////////////////////////////////////////////////////////
-/** 
+/**
  * Load tile layers from exported data
  *  @param {Object}   tileMapData - Level data from exported data
  *  @param {TileInfo} [tileInfo] - Default tile info (used for size and texture)
@@ -4481,13 +4859,13 @@ function tileCollisionLoad(tileMapData, tileInfo=tile(), renderOrder=0, collisio
     {
         const dataLayer = tileMapData.layers[layerIndex];
         ASSERT(dataLayer.data && dataLayer.data.length);
-        ASSERT(levelSize.area() == dataLayer.data.length);
+        ASSERT(levelSize.area() === dataLayer.data.length);
 
         const layerRenderOrder = renderOrder - (layerCount - 1 - layerIndex);
         const tileLayer = new TileCollisionLayer(vec2(), levelSize, tileInfo, layerRenderOrder);
         tileLayers[layerIndex] = tileLayer;
 
-        for (let x=levelSize.x; x--;) 
+        for (let x=levelSize.x; x--;)
         for (let y=levelSize.y; y--;)
         {
             const pos = vec2(x, levelSize.y-1-y);
@@ -4546,7 +4924,7 @@ class TileLayerData
 /**
  * Canvas Layer - cached off screen rendering system
  * - Contains an offscreen canvas that can be rendered to
- * - Webgl rendering is optional, call useWebGL to enable
+ * - WebGL rendering is optional, call useWebGL to enable
  * @extends EngineObject
  * @example
  * const canvasLayer = new CanvasLayer(vec2(), vec2(200,100));
@@ -4568,18 +4946,18 @@ class CanvasLayer extends EngineObject
         this.canvas = headlessMode ? undefined : new OffscreenCanvas(canvasSize.x, canvasSize.y);
         /** @property {OffscreenCanvasRenderingContext2D} - The 2D canvas context used by this layer */
         this.context = headlessMode ? undefined : this.canvas.getContext('2d');
-        /** @property {WebGLTexture} - Texture if using webgl for this layer, call useWebGL to enable */
+        /** @property {WebGLTexture} - Texture if using WebGL for this layer, call useWebGL to enable */
         this.glTexture = undefined;
         this.gravityScale = 0; // disable gravity by default for canvas layers
     }
-   
+
     /** Destroy this canvas layer */
     destroy()
     {
         if (this.destroyed)
             return;
 
-        // free up the webgl texture
+        // free up the WebGL texture
         if (this.glTexture)
             glDeleteTexture(this.glTexture);
         super.destroy();
@@ -4604,12 +4982,12 @@ class CanvasLayer extends EngineObject
     draw(pos, size, angle=0, color=WHITE, mirror=false, additiveColor, screenSpace=false, context)
     {
         // draw the canvas layer as a single tile that uses the whole texture
-        const useWebgl = glEnable && this.glTexture != undefined;
+        const useWebGL = glEnable && this.glTexture !== undefined;
         const tileInfo = new TileInfo().setFullImage(this.canvas, this.glTexture);
-        drawTile(pos, size, tileInfo, color, angle, mirror, additiveColor, useWebgl, screenSpace, context);
+        drawTile(pos, size, tileInfo, color, angle, mirror, additiveColor, useWebGL, screenSpace, context);
     }
 
-    /** Draw onto the layer canvas in world space (bypass webgl)
+    /** Draw onto the layer canvas in world space (bypass WebGL)
      *  @param {Vector2}  pos
      *  @param {Vector2}  size
      *  @param {number}   angle
@@ -4643,8 +5021,8 @@ class CanvasLayer extends EngineObject
             if (textureInfo)
             {
                 context.globalAlpha = color.a; // only alpha is supported
-                context.drawImage(textureInfo.image, 
-                    tileInfo.pos.x,  tileInfo.pos.y, 
+                context.drawImage(textureInfo.image,
+                    tileInfo.pos.x,  tileInfo.pos.y,
                     tileInfo.size.x, tileInfo.size.y, -.5, -.5, 1, 1);
                 context.globalAlpha = 1;
             }
@@ -4662,11 +5040,11 @@ class CanvasLayer extends EngineObject
      *  @param {Vector2} [size=(1,1)]
      *  @param {Color}   [color=(1,1,1,1)]
      *  @param {number}  [angle=0] */
-    drawRect(pos, size, color, angle) 
+    drawRect(pos, size, color, angle)
     { this.drawTile(pos, size, undefined, color, angle); }
 
-    /** Create or update the webgl texture for this layer
-     *  @param {boolean} [enable] - enable webgl rendering and update the texture */
+    /** Create or update the WebGL texture for this layer
+     *  @param {boolean} [enable] - enable WebGL rendering and update the texture */
     useWebGL(enable=true)
     {
         if (glEnable && enable)
@@ -4712,7 +5090,7 @@ class TileLayer extends CanvasLayer
         this.canvas = new OffscreenCanvas(canvasSize.x, canvasSize.y);
         /** @property {OffscreenCanvasRenderingContext2D} - The 2D canvas context used by this tile layer */
         this.context = this.canvas.getContext('2d');
-        /** @property {WebGLTexture} - Texture if using webgl for this layer */
+        /** @property {WebGLTexture} - Texture if using WebGL for this layer */
         this.glTexture = useWebGL ? glCreateTexture(this.canvas) : undefined;
         // set no friction by default, applied friction is max of both objects
         this.friction = 0;
@@ -4737,7 +5115,7 @@ class TileLayer extends CanvasLayer
         }
     }
 
-    /** Set data at a given position in the array 
+    /** Set data at a given position in the array
      *  @param {Vector2}       layerPos - Local position in array
      *  @param {TileLayerData} data     - Data to set
      *  @param {boolean}       [redraw] - Force the tile to redraw if true */
@@ -4749,26 +5127,26 @@ class TileLayer extends CanvasLayer
             redraw && this.drawTileData(layerPos);
         }
     }
-    
-    /** Get data at a given position in the array 
+
+    /** Get data at a given position in the array
      *  @param {Vector2} layerPos - Local position in array
      *  @return {TileLayerData} */
     getData(layerPos)
     { return layerPos.arrayCheck(this.size) && this.data[(layerPos.y|0)*this.size.x+layerPos.x|0]; }
-    
+
     // Render the tile layer, called automatically by the engine
     render()
     {
-        ASSERT(drawContext != this.context, 'must call redrawEnd() after drawing tiles!');
-        
+        ASSERT(drawContext !== this.context, 'must call redrawEnd() after drawing tiles!');
+
         // draw the tile layer as a single tile
         const tileInfo = new TileInfo().setFullImage(this.canvas, this.glTexture);
         const pos = this.pos.add(this.size.scale(.5));
-        const useWebgl = glEnable && this.glTexture != undefined;
-        drawTile(pos, this.size, tileInfo, WHITE, 0, false, CLEAR_BLACK, useWebgl);
+        const useWebGL = glEnable && this.glTexture !== undefined;
+        drawTile(pos, this.size, tileInfo, WHITE, 0, false, CLEAR_BLACK, useWebGL);
     }
 
-    /** Draw all the tile data to an offscreen canvas 
+    /** Draw all the tile data to an offscreen canvas
      *  - This may be slow in some browsers but only needs to be done once */
     redraw()
     {
@@ -4778,7 +5156,7 @@ class TileLayer extends CanvasLayer
             this.drawTileData(vec2(x,y), false);
         this.redrawEnd();
         if (this.glTexture)
-            this.useWebGL(); // update webgl texture
+            this.useWebGL(); // update WebGL texture
     }
 
     /** Call to start the redraw process
@@ -4814,7 +5192,7 @@ class TileLayer extends CanvasLayer
     /** Call to end the redraw process */
     redrawEnd()
     {
-        ASSERT(drawContext == this.context, 'must call redrawStart() before drawing tiles');
+        ASSERT(drawContext === this.context, 'must call redrawStart() before drawing tiles');
         glCopyToContext(drawContext);
         //debugSaveCanvas(this.canvas);
 
@@ -4825,7 +5203,7 @@ class TileLayer extends CanvasLayer
     /** Draw the tile at a given position in the tile grid
      *  This can be used to clear out tiles when they are destroyed
      *  Tiles can also be redrawn if inside a redrawStart/End block
-     *  @param {Vector2} layerPos 
+     *  @param {Vector2} layerPos
      *  @param {boolean} [clear] - should the old tile be cleared out
      */
     drawTileData(layerPos, clear=true)
@@ -4840,9 +5218,9 @@ class TileLayer extends CanvasLayer
 
         // draw the tile if it has layer data
         const d = this.getData(layerPos);
-        if (d.tile != undefined)
+        if (d.tile !== undefined)
         {
-            ASSERT(drawContext == this.context, 'must call redrawStart() before drawing tiles');
+            ASSERT(drawContext === this.context, 'must call redrawStart() before drawing tiles');
             const pos = layerPos.add(vec2(.5));
             const tileInfo = tile(d.tile, s, this.tileInfo.textureIndex, this.tileInfo.padding);
             drawTile(pos, vec2(1), tileInfo, d.color, d.direction*PI/2, d.mirror);
@@ -4855,7 +5233,7 @@ class TileLayer extends CanvasLayer
  * Tile Collision Layer - a tile layer with collision
  * - adds collision data and functions to TileLayer
  * - there can be multiple tile collision layers
- * - tile collison layers should not overlap each other
+ * - tile collision layers should not overlap each other
  * @extends TileLayer
  */
 class TileCollisionLayer extends TileLayer
@@ -5006,7 +5384,7 @@ class TileCollisionLayer extends TileLayer
         debugRaycast && debugLine(posStart, posEnd, '#00f', .02);
     }
 }
-/** 
+/**
  * LittleJS Particle System
  */
 
@@ -5023,7 +5401,7 @@ class TileCollisionLayer extends TileLayer
  *     rgb(1,1,1,1), rgb(0,0,0,1), // colorStartA, colorStartB
  *     rgb(1,1,1,0), rgb(0,0,0,0), // colorEndA, colorEndB
  *     2, .2, .2, .1, .05,  // particleTime, sizeStart, sizeEnd, particleSpeed, particleAngleSpeed
- *     .99, 1, 1, PI, .05,  // damping, angleDamping, gravityScale, particleCone, fadeRate, 
+ *     .99, 1, 1, PI, .05,  // damping, angleDamping, gravityScale, particleCone, fadeRate,
  *     .5, 1                // randomness, collide, additive, randomColorLinear, renderOrder
  * );
  */
@@ -5031,35 +5409,35 @@ class ParticleEmitter extends EngineObject
 {
     /** Create a particle system with the given settings
      *  @param {Vector2} position - World space position of the emitter
-     *  @param {Number} [angle] - Angle to emit the particles
-     *  @param {Number|Vector2}  [emitSize] - World space size of the emitter (float for circle diameter, vec2 for rect)
-     *  @param {Number} [emitTime] - How long to stay alive (0 is forever)
-     *  @param {Number} [emitRate] - How many particles per second to spawn, does not emit if 0
-     *  @param {Number} [emitConeAngle=PI] - Local angle to apply velocity to particles from emitter
+     *  @param {number} [angle] - Angle to emit the particles
+     *  @param {number|Vector2}  [emitSize] - World space size of the emitter (float for circle diameter, vec2 for rect)
+     *  @param {number} [emitTime] - How long to stay alive (0 is forever)
+     *  @param {number} [emitRate] - How many particles per second to spawn, does not emit if 0
+     *  @param {number} [emitConeAngle=PI] - Local angle to apply velocity to particles from emitter
      *  @param {TileInfo} [tileInfo] - Tile info to render particles (undefined is untextured)
      *  @param {Color} [colorStartA=(1,1,1,1)] - Color at start of life 1, randomized between start colors
      *  @param {Color} [colorStartB=(1,1,1,1)] - Color at start of life 2, randomized between start colors
      *  @param {Color} [colorEndA=(1,1,1,0)] - Color at end of life 1, randomized between end colors
      *  @param {Color} [colorEndB=(1,1,1,0)] - Color at end of life 2, randomized between end colors
-     *  @param {Number} [particleTime]      - How long particles live
-     *  @param {Number} [sizeStart]         - How big are particles at start
-     *  @param {Number} [sizeEnd]           - How big are particles at end
-     *  @param {Number} [speed]             - How fast are particles when spawned
-     *  @param {Number} [angleSpeed]        - How fast are particles rotating
-     *  @param {Number} [damping]           - How much to dampen particle speed
-     *  @param {Number} [angleDamping]      - How much to dampen particle angular speed
-     *  @param {Number} [gravityScale]      - How much gravity effect particles
-     *  @param {Number} [particleConeAngle] - Cone for start particle angle
-     *  @param {Number} [fadeRate]          - How quick to fade particles at start/end in percent of life
-     *  @param {Number} [randomness]    - Apply extra randomness percent
+     *  @param {number} [particleTime]      - How long particles live
+     *  @param {number} [sizeStart]         - How big are particles at start
+     *  @param {number} [sizeEnd]           - How big are particles at end
+     *  @param {number} [speed]             - How fast are particles when spawned
+     *  @param {number} [angleSpeed]        - How fast are particles rotating
+     *  @param {number} [damping]           - How much to dampen particle speed
+     *  @param {number} [angleDamping]      - How much to dampen particle angular speed
+     *  @param {number} [gravityScale]      - How much gravity effect particles
+     *  @param {number} [particleConeAngle] - Cone for start particle angle
+     *  @param {number} [fadeRate]          - How quick to fade particles at start/end in percent of life
+     *  @param {number} [randomness]    - Apply extra randomness percent
      *  @param {boolean} [collideTiles] - Do particles collide against tiles
      *  @param {boolean} [additive]     - Should particles use additive blend
      *  @param {boolean} [randomColorLinear] - Should color be randomized linearly or across each component
-     *  @param {Number} [renderOrder] - Render order for particles (additive is above other stuff by default)
+     *  @param {number} [renderOrder] - Render order for particles (additive is above other stuff by default)
      *  @param {boolean}  [localSpace] - Should it be in local space of emitter (world space is default)
      */
     constructor
-    ( 
+    (
         position,
         angle,
         emitSize = 0,
@@ -5081,7 +5459,7 @@ class ParticleEmitter extends EngineObject
         gravityScale = 0,
         particleConeAngle = PI,
         fadeRate = .1,
-        randomness = .2, 
+        randomness = .2,
         collideTiles = false,
         additive = false,
         randomColorLinear = true,
@@ -5092,13 +5470,13 @@ class ParticleEmitter extends EngineObject
         super(position, vec2(), tileInfo, angle, undefined, renderOrder);
 
         // emitter settings
-        /** @property {Number|Vector2} - World space size of the emitter (float for circle diameter, vec2 for rect) */
+        /** @property {number|Vector2} - World space size of the emitter (float for circle diameter, vec2 for rect) */
         this.emitSize = emitSize
-        /** @property {Number} - How long to stay alive (0 is forever) */
+        /** @property {number} - How long to stay alive (0 is forever) */
         this.emitTime = emitTime;
-        /** @property {Number} - How many particles per second to spawn, does not emit if 0 */
+        /** @property {number} - How many particles per second to spawn, does not emit if 0 */
         this.emitRate = emitRate;
-        /** @property {Number} - Local angle to apply velocity to particles from emitter */
+        /** @property {number} - Local angle to apply velocity to particles from emitter */
         this.emitConeAngle = emitConeAngle;
 
         // color settings
@@ -5114,27 +5492,27 @@ class ParticleEmitter extends EngineObject
         this.randomColorLinear = randomColorLinear;
 
         // particle settings
-        /** @property {Number} - How long particles live */
+        /** @property {number} - How long particles live */
         this.particleTime      = particleTime;
-        /** @property {Number} - How big are particles at start */
+        /** @property {number} - How big are particles at start */
         this.sizeStart         = sizeStart;
-        /** @property {Number} - How big are particles at end */
+        /** @property {number} - How big are particles at end */
         this.sizeEnd           = sizeEnd;
-        /** @property {Number} - How fast are particles when spawned */
+        /** @property {number} - How fast are particles when spawned */
         this.speed             = speed;
-        /** @property {Number} - How fast are particles rotating */
+        /** @property {number} - How fast are particles rotating */
         this.angleSpeed        = angleSpeed;
-        /** @property {Number} - How much to dampen particle speed */
+        /** @property {number} - How much to dampen particle speed */
         this.damping           = damping;
-        /** @property {Number} - How much to dampen particle angular speed */
+        /** @property {number} - How much to dampen particle angular speed */
         this.angleDamping      = angleDamping;
-        /** @property {Number} - How much does gravity effect particles */
+        /** @property {number} - How much gravity affects particles */
         this.gravityScale      = gravityScale;
-        /** @property {Number} - Cone for start particle angle */
+        /** @property {number} - Cone for start particle angle */
         this.particleConeAngle = particleConeAngle;
-        /** @property {Number} - How quick to fade in particles at start/end in percent of life */
+        /** @property {number} - How quick to fade in particles at start/end in percent of life */
         this.fadeRate          = fadeRate;
-        /** @property {Number} - Apply extra randomness percent */
+        /** @property {number} - Apply extra randomness percent */
         this.randomness        = randomness;
         /** @property {boolean} - Do particles collide against tiles */
         this.collideTiles      = collideTiles;
@@ -5142,16 +5520,16 @@ class ParticleEmitter extends EngineObject
         this.additive          = additive;
         /** @property {boolean} - Should it be in local space of emitter */
         this.localSpace        = localSpace;
-        /** @property {Number} - If non zero the particle is drawn as a trail, stretched in the direction of velocity */
+        /** @property {number} - If non zero the particle is drawn as a trail, stretched in the direction of velocity */
         this.trailScale        = 0;
         /** @property {Function}   - Callback when particle is destroyed */
         this.particleDestroyCallback = undefined;
         /** @property {Function}   - Callback when particle is created */
         this.particleCreateCallback = undefined;
-        /** @property {Number} - Track particle emit time */
+        /** @property {number} - Track particle emit time */
         this.emitTimeBuffer    = 0;
     }
-    
+
     /** Update the emitter to spawn particles, called automatically by engine once each frame */
     update()
     {
@@ -5175,7 +5553,7 @@ class ParticleEmitter extends EngineObject
         if (debugParticles)
         {
             // show emitter bounds
-            const emitSize = typeof this.emitSize == 'number' ? vec2(this.emitSize) : this.emitSize;
+            const emitSize = typeof this.emitSize === 'number' ? vec2(this.emitSize) : this.emitSize;
             debugRect(this.pos, emitSize, '#0f0', 0, this.angle);
         }
     }
@@ -5185,7 +5563,7 @@ class ParticleEmitter extends EngineObject
     emitParticle()
     {
         // spawn a particle
-        let pos = typeof this.emitSize == 'number' ? // check if number was used
+        let pos = typeof this.emitSize === 'number' ? // check if number was used
             randInCircle(this.emitSize/2)            // circle emitter
             : vec2(rand(-.5,.5), rand(-.5,.5))       // box emitter
                 .multiply(this.emitSize).rotate(this.angle)
@@ -5210,15 +5588,22 @@ class ParticleEmitter extends EngineObject
         const colorStart    = randColor(this.colorStartA, this.colorStartB, this.randomColorLinear);
         const colorEnd      = randColor(this.colorEndA,   this.colorEndB, this.randomColorLinear);
         const velocityAngle = this.localSpace ? coneAngle : this.angle + coneAngle;
-        
+
         // build particle
         const particle = new Particle(pos, this.tileInfo, angle, colorStart, colorEnd, particleTime, sizeStart, sizeEnd, this.fadeRate, this.additive,  this.trailScale, this.localSpace && this, this.particleDestroyCallback);
         particle.velocity      = vec2().setAngle(velocityAngle, speed);
         particle.angleVelocity = angleSpeed;
+        if (!this.localSpace)
+        {
+            // apply emitter velocity to particle
+            particle.velocity.x += this.velocity.x;
+            particle.velocity.y += this.velocity.y;
+            particle.angleVelocity += this.angleVelocity;
+        }
         particle.fadeRate      = this.fadeRate;
         particle.damping       = this.damping;
         particle.angleDamping  = this.angleDamping;
-        particle.restitution    = this.restitution;
+        particle.restitution   = this.restitution;
         particle.friction      = this.friction;
         particle.gravityScale  = this.gravityScale;
         particle.collideTiles  = this.collideTiles;
@@ -5248,38 +5633,38 @@ class Particle extends EngineObject
      * Typically this is created automatically by a ParticleEmitter
      * @param {Vector2}  position   - World space position of the particle
      * @param {TileInfo} tileInfo   - Tile info to render particles
-     * @param {Number}   angle      - Angle to rotate the particle
+     * @param {number}   angle      - Angle to rotate the particle
      * @param {Color}    colorStart - Color at start of life
      * @param {Color}    colorEnd   - Color at end of life
-     * @param {Number}   lifeTime   - How long to live for
-     * @param {Number}   sizeStart  - Size at start of life
-     * @param {Number}   sizeEnd    - Size at end of life
-     * @param {Number}   fadeRate   - How quick to fade in/out
+     * @param {number}   lifeTime   - How long to live for
+     * @param {number}   sizeStart  - Size at start of life
+     * @param {number}   sizeEnd    - Size at end of life
+     * @param {number}   fadeRate   - How quick to fade in/out
      * @param {boolean}  additive   - Does it use additive blend mode
-     * @param {Number}   trailScale - If a trail, how long to make it
+     * @param {number}   trailScale - If a trail, how long to make it
      * @param {ParticleEmitter} [localSpaceEmitter] - Parent emitter if local space
      * @param {Function} [destroyCallback] - Callback when particle dies
      */
     constructor(position, tileInfo, angle, colorStart, colorEnd, lifeTime, sizeStart, sizeEnd, fadeRate, additive, trailScale, localSpaceEmitter, destroyCallback
     )
-    { 
-        super(position, vec2(), tileInfo, angle); 
-    
+    {
+        super(position, vec2(), tileInfo, angle);
+
         /** @property {Color} - Color at start of life */
         this.colorStart = colorStart;
         /** @property {Color} - Calculated change in color */
         this.colorEndDelta = colorEnd.subtract(colorStart);
-        /** @property {Number} - How long to live for */
+        /** @property {number} - How long to live for */
         this.lifeTime = lifeTime;
-        /** @property {Number} - Size at start of life */
+        /** @property {number} - Size at start of life */
         this.sizeStart = sizeStart;
-        /** @property {Number} - Calculated change in size */
+        /** @property {number} - Calculated change in size */
         this.sizeEndDelta = sizeEnd - sizeStart;
-        /** @property {Number} - How quick to fade in/out */
+        /** @property {number} - How quick to fade in/out */
         this.fadeRate = fadeRate;
         /** @property {boolean} - Is it additive */
         this.additive = additive;
-        /** @property {Number} - If a trail, how long to make it */
+        /** @property {number} - If a trail, how long to make it */
         this.trailScale = trailScale;
         /** @property {ParticleEmitter} - Parent emitter if local space */
         this.localSpaceEmitter = localSpaceEmitter;
@@ -5319,7 +5704,7 @@ class Particle extends EngineObject
             this.colorStart.r + p * this.colorEndDelta.r,
             this.colorStart.g + p * this.colorEndDelta.g,
             this.colorStart.b + p * this.colorEndDelta.b,
-            (this.colorStart.a + p * this.colorEndDelta.a) * 
+            (this.colorStart.a + p * this.colorEndDelta.a) *
              (p < fadeRate ? p/fadeRate : p > 1-fadeRate ? (1-p)/fadeRate : 1)); // fade alpha
 
         // draw the particle
@@ -5329,7 +5714,7 @@ class Particle extends EngineObject
         if (this.localSpaceEmitter)
         {
             // in local space of emitter
-            pos = this.localSpaceEmitter.pos.add(pos.rotate(-this.localSpaceEmitter.angle)); 
+            pos = this.localSpaceEmitter.pos.add(pos.rotate(-this.localSpaceEmitter.angle));
             angle += this.localSpaceEmitter.angle;
         }
         if (this.trailScale)
@@ -5353,7 +5738,7 @@ class Particle extends EngineObject
         this.additive && setBlendMode();
         debugParticles && debugRect(pos, size, '#f005', 0, angle);
 
-        if (p == 1)
+        if (p === 1)
         {
             // destroy particle when it's time runs out
             this.color = color;
@@ -5363,7 +5748,7 @@ class Particle extends EngineObject
         }
     }
 }
-/** 
+/**
  * LittleJS Medal System
  * - Tracks and displays medals
  * - Saves medals to local storage
@@ -5384,7 +5769,7 @@ let medalsDisplayQueue = [], medalsSaveName, medalsDisplayTimeLast;
 /** Initialize medals with a save name used for storage
  *  - Call this after creating all medals
  *  - Checks if medals are unlocked
- *  @param {String} saveName
+ *  @param {string} saveName
  *  @memberof Medals */
 function medalsInit(saveName)
 {
@@ -5399,7 +5784,7 @@ function medalsInit(saveName)
     {
         if (!medalsDisplayQueue.length)
             return;
-        
+
         // update first medal in queue
         const medal = medalsDisplayQueue[0];
         const time = timeReal - medalsDisplayTimeLast;
@@ -5414,7 +5799,7 @@ function medalsInit(saveName)
         {
             // slide on/off medals
             const slideOffTime = medalDisplayTime - medalDisplaySlideTime;
-            const hidePercent = 
+            const hidePercent =
                 time < medalDisplaySlideTime ? 1 - time / medalDisplaySlideTime :
                 time > slideOffTime ? (time - slideOffTime) / medalDisplaySlideTime : 0;
             medal.render(hidePercent);
@@ -5430,43 +5815,43 @@ function medalsForEach(callback)
 
 ///////////////////////////////////////////////////////////////////////////////
 
-/** 
- * Medal - Tracks an unlockable medal 
+/**
+ * Medal - Tracks an unlockable medal
  * @example
  * // create a medal
  * const medal_example = new Medal(0, 'Example Medal', 'More info about the medal goes here.', '🎖️');
- * 
+ *
  * // initialize medals
  * medalsInit('Example Game');
- * 
+ *
  * // unlock the medal
  * medal_example.unlock();
  */
 class Medal
 {
     /** Create a medal object and adds it to the list of medals
-     *  @param {Number} id            - The unique identifier of the medal
-     *  @param {String} name          - Name of the medal
-     *  @param {String} [description] - Description of the medal
-     *  @param {String} [icon]        - Icon for the medal
-     *  @param {String} [src]         - Image location for the medal
+     *  @param {number} id            - The unique identifier of the medal
+     *  @param {string} name          - Name of the medal
+     *  @param {string} [description] - Description of the medal
+     *  @param {string} [icon]        - Icon for the medal
+     *  @param {string} [src]         - Image location for the medal
      */
     constructor(id, name, description='', icon='🏆', src)
     {
         ASSERT(id >= 0 && !medals[id]);
-        
-        /** @property {Number} - The unique identifier of the medal */
+
+        /** @property {number} - The unique identifier of the medal */
         this.id = id;
-        
-        /** @property {String} - Name of the medal */
+
+        /** @property {string} - Name of the medal */
         this.name = name;
-        
-        /** @property {String} - Description of the medal */
+
+        /** @property {string} - Description of the medal */
         this.description = description;
-        
-        /** @property {String} - Icon for the medal */
+
+        /** @property {string} - Icon for the medal */
         this.icon = icon;
-        
+
         /** @property {boolean} - Is the medal unlocked? */
         this.unlocked = false;
 
@@ -5491,7 +5876,7 @@ class Medal
     }
 
     /** Render a medal
-     *  @param {Number} [hidePercent] - How much to slide the medal off screen
+     *  @param {number} [hidePercent] - How much to slide the medal off screen
      */
     render(hidePercent=0)
     {
@@ -5505,7 +5890,7 @@ class Medal
         context.save();
         context.beginPath();
         context.fillStyle = new Color(.9,.9,.9).toString();
-        context.strokeStyle = new Color(0,0,0).toString();
+        context.strokeStyle = BLACK.toString();
         context.lineWidth = 3;
         context.rect(x, y, width, height);
         context.fill();
@@ -5522,17 +5907,17 @@ class Medal
         const descriptionSize = height*.3;
         const pos = vec2(x + medalDisplayIconSize + 2*gap.x, y + gap.y*2 + nameSize/2);
         const textWidth = width - medalDisplayIconSize - 3*gap.x;
-        drawTextScreen(this.name, pos, nameSize, new Color(0,0,0), 0, undefined, 'left', undefined, textWidth);
+        drawTextScreen(this.name, pos, nameSize, BLACK, 0, undefined, 'left', undefined, textWidth);
 
         // draw the description
         pos.y = y + height - gap.y*2 - descriptionSize/2;
-        drawTextScreen(this.description, pos, descriptionSize, new Color(0,0,0), 0, undefined, 'left', undefined, textWidth);
+        drawTextScreen(this.description, pos, descriptionSize, BLACK, 0, undefined, 'left', undefined, textWidth);
         context.restore();
     }
 
     /** Render the icon for a medal
      *  @param {Vector2} pos - Screen space position
-     *  @param {Number} size - Screen space size
+     *  @param {number} size - Screen space size
      */
     renderIcon(pos, size)
     {
@@ -5540,21 +5925,22 @@ class Medal
         if (this.image)
             overlayContext.drawImage(this.image, pos.x-size/2, pos.y-size/2, size, size);
         else
-            drawTextScreen(this.icon, pos, size*.7, new Color(0,0,0));
+            drawTextScreen(this.icon, pos, size*.7, BLACK);
     }
- 
+
     // Get local storage key used by the medal
     storageKey() { return medalsSaveName + '_' + this.id; }
 }
 /**
  * LittleJS WebGL Interface
- * - All webgl used by the engine is wrapped up here
+ * - All WebGL used by the engine is wrapped up here
+ * - Will fall back to 2D canvas rendering if WebGL is not supported
  * - For normal stuff you won't need to see or call anything in this file
  * - For advanced stuff there are helper functions to create shaders, textures, etc
  * - Can be disabled with glEnable to revert to 2D canvas rendering
  * - Batches sprite rendering on GPU for incredibly fast performance
  * - Sprite transform math is done in the shader where possible
- * - Supports shadertoy style post processing shaders
+ * - Supports shadertoy style post processing shaders via plugin
  * @namespace WebGL
  */
 
@@ -5563,24 +5949,27 @@ class Medal
  *  @memberof WebGL */
 let glCanvas;
 
-/** 2d context for glCanvas
+/** WebGL2 context for `glCanvas`
  *  @type {WebGL2RenderingContext}
  *  @memberof WebGL */
 let glContext;
 
-/** Should webgl be setup with anti-aliasing? must be set before calling engineInit
+/** Should WebGL be setup with anti-aliasing? must be set before calling engineInit
  *  @type {boolean}
  *  @memberof WebGL */
 let glAntialias = true;
 
 // WebGL internal variables not exposed to documentation
-let glShader, glActiveTexture, glArrayBuffer, glGeometryBuffer, glPositionData, glColorData, glInstanceCount, glAdditive, glBatchAdditive;
+let glShader, glPolyShader, glPolyMode, glAdditive, glBatchAdditive, glActiveTexture, glArrayBuffer, glGeometryBuffer, glPositionData, glColorData, glBatchCount;
 
-// WebGL internal constants 
-const gl_MAX_INSTANCES = 1e4;
+// WebGL internal constants
+const gl_ARRAY_BUFFER_SIZE = 4e5;
 const gl_INDICES_PER_INSTANCE = 11;
 const gl_INSTANCE_BYTE_STRIDE = gl_INDICES_PER_INSTANCE * 4;
-const gl_INSTANCE_BUFFER_SIZE = gl_MAX_INSTANCES * gl_INSTANCE_BYTE_STRIDE;
+const gl_MAX_INSTANCES = gl_ARRAY_BUFFER_SIZE / gl_INSTANCE_BYTE_STRIDE | 0;
+const gl_INDICES_PER_POLY_VERTEX = 3;
+const gl_POLY_VERTEX_BYTE_STRIDE = gl_INDICES_PER_POLY_VERTEX * 4;
+const gl_MAX_POLY_VERTEXES = gl_ARRAY_BUFFER_SIZE / gl_POLY_VERTEX_BYTE_STRIDE | 0;
 
 ///////////////////////////////////////////////////////////////////////////////
 
@@ -5593,11 +5982,19 @@ function glInit()
     glCanvas = document.createElement('canvas');
     glContext = glCanvas.getContext('webgl2', {antialias:glAntialias});
 
-    // create the webgl canvas
+    if (!glContext)
+    {
+        console.warn('WebGL2 not supported, falling back to 2D canvas rendering!');
+        glCanvas = glContext = undefined;
+        glEnable = false;
+        return;
+    }
+
+    // create the WebGL canvas
     const rootElement = mainCanvas.parentElement;
     rootElement.appendChild(glCanvas);
 
-    // setup vertex and fragment shaders
+    // setup instanced rendering shader program
     glShader = glCreateProgram(
         '#version 300 es\n' +     // specify GLSL ES version
         'precision highp float;'+ // use highp for better accuracy
@@ -5625,40 +6022,59 @@ function glInit()
         '}'                       // end of shader
     );
 
+    // setup poly rendering shaders
+    glPolyShader = glCreateProgram(
+        '#version 300 es\n' +     // specify GLSL ES version
+        'precision highp float;'+ // use highp for better accuracy
+        'uniform mat4 m;'+        // transform matrix
+        'in vec2 p;'+             // in: position
+        'in vec4 c;'+             // in: color
+        'out vec4 d;'+            // out: color
+        'void main(){'+           // shader entry point
+        'gl_Position=m*vec4(p,1,1);'+ // transform position
+        'd=c;'+                   // pass color to fragment shader
+        '}'                       // end of shader
+        ,
+        '#version 300 es\n' +     // specify GLSL ES version
+        'precision highp float;'+ // use highp for better accuracy
+        'in vec4 d;'+             // in: color
+        'out vec4 c;'+            // out: color
+        'void main(){'+           // shader entry point
+        'c=d;'+                   // set color
+        '}'                       // end of shader
+    );
+
     // init buffers
-    const glInstanceData = new ArrayBuffer(gl_INSTANCE_BUFFER_SIZE);
+    const glInstanceData = new ArrayBuffer(gl_ARRAY_BUFFER_SIZE);
     glPositionData = new Float32Array(glInstanceData);
     glColorData = new Uint32Array(glInstanceData);
     glArrayBuffer = glContext.createBuffer();
     glGeometryBuffer = glContext.createBuffer();
 
     // create the geometry buffer, triangle strip square
-    const geometry = new Float32Array([glInstanceCount=0,0,1,0,0,1,1,1]);
+    const geometry = new Float32Array([glBatchCount=0,0,1,0,0,1,1,1]);
     glContext.bindBuffer(glContext.ARRAY_BUFFER, glGeometryBuffer);
     glContext.bufferData(glContext.ARRAY_BUFFER, geometry, glContext.STATIC_DRAW);
 }
 
-// Setup webgl render each frame, called automatically by engine
-// Also used by tile layer rendering when redrawing tiles
-function glPreRender()
+function glSetInstancedMode(force=false)
 {
-    if (!glEnable || headlessMode) return;
-
-    // set up the shader and canvas
-    glClearCanvas();
+    if (!glPolyMode && !force)
+        return;
+    
+    // setup instanced mode
+    glFlush();
+    glPolyMode = false;
     glContext.useProgram(glShader);
-    glContext.activeTexture(glContext.TEXTURE0);
-    if (textureInfos[0])
-        glContext.bindTexture(glContext.TEXTURE_2D, glActiveTexture = textureInfos[0].glTexture);
 
     // set vertex attributes
-    let offset = glAdditive = glBatchAdditive = 0;
+    let offset = 0;
     const initVertexAttribArray = (name, type, typeSize, size)=>
     {
         const location = glContext.getAttribLocation(glShader, name);
         const stride = typeSize && gl_INSTANCE_BYTE_STRIDE; // only if not geometry
         const divisor = typeSize && 1; // only if not geometry
-        const normalize = typeSize == 1; // only if color
+        const normalize = typeSize === 1; // only if color
         glContext.enableVertexAttribArray(location);
         glContext.vertexAttribPointer(location, size, type, normalize, stride, offset);
         glContext.vertexAttribDivisor(location, divisor);
@@ -5667,46 +6083,106 @@ function glPreRender()
     glContext.bindBuffer(glContext.ARRAY_BUFFER, glGeometryBuffer);
     initVertexAttribArray('g', glContext.FLOAT, 0, 2); // geometry
     glContext.bindBuffer(glContext.ARRAY_BUFFER, glArrayBuffer);
-    glContext.bufferData(glContext.ARRAY_BUFFER, gl_INSTANCE_BUFFER_SIZE, glContext.DYNAMIC_DRAW);
+    glContext.bufferData(glContext.ARRAY_BUFFER, gl_ARRAY_BUFFER_SIZE, glContext.DYNAMIC_DRAW);
     initVertexAttribArray('p', glContext.FLOAT, 4, 4); // position & size
     initVertexAttribArray('u', glContext.FLOAT, 4, 4); // texture coords
     initVertexAttribArray('c', glContext.UNSIGNED_BYTE, 1, 4); // color
     initVertexAttribArray('a', glContext.UNSIGNED_BYTE, 1, 4); // additiveColor
     initVertexAttribArray('r', glContext.FLOAT, 4, 1); // rotation
+}
+
+function glSetPolyMode()
+{
+    if (glPolyMode)
+        return;
     
+    // setup poly mode
+    glFlush();
+    glPolyMode = true;
+    glContext.useProgram(glPolyShader);
+
+    // set vertex attributes
+    let offset = 0;
+    const initVertexAttribArray = (name, type, typeSize, size)=>
+    {
+        const location = glContext.getAttribLocation(glPolyShader, name);
+        const normalize = typeSize === 1; // only normalize if color
+        const stride = gl_POLY_VERTEX_BYTE_STRIDE;
+        glContext.enableVertexAttribArray(location);
+        glContext.vertexAttribPointer(location, size, type, normalize, stride, offset);
+        glContext.vertexAttribDivisor(location, 0);
+        offset += size*typeSize;
+    }
+    glContext.bindBuffer(glContext.ARRAY_BUFFER, glArrayBuffer);
+    glContext.bufferData(glContext.ARRAY_BUFFER, gl_ARRAY_BUFFER_SIZE, glContext.DYNAMIC_DRAW);
+    initVertexAttribArray('p', glContext.FLOAT, 4, 2);         // position
+    initVertexAttribArray('c', glContext.UNSIGNED_BYTE, 1, 4); // color
+}
+
+// Setup WebGL render each frame, called automatically by engine
+// Also used by tile layer rendering when redrawing tiles
+function glPreRender()
+{
+    if (!glEnable || !glContext) return;
+
+    // clear the canvas
+    glClearCanvas();
+
     // build the transform matrix
     const s = vec2(2*cameraScale).divide(mainCanvasSize);
     const rotatedCam = cameraPos.rotate(-cameraAngle);
     const p = vec2(-1).subtract(rotatedCam.multiply(s));
     const ca = Math.cos(cameraAngle);
     const sa = Math.sin(cameraAngle);
-    glContext.uniformMatrix4fv(glContext.getUniformLocation(glShader, 'm'), false,
-    [
+    const transform = [
         s.x  * ca,  s.y * sa, 0, 0,
         -s.x * sa,  s.y * ca, 0, 0,
         1,          1,        1, 0,
-        p.x,        p.y,      0, 1
-    ]);
+        p.x,        p.y,      0, 1];
+
+    // set the same matrix for both shaders
+    const initUniform = (program, uniform, value) =>
+    {
+        glContext.useProgram(program);
+        const location = glContext.getUniformLocation(program, uniform);
+        glContext.uniformMatrix4fv(location, false, value);
+    }
+    initUniform(glPolyShader, 'm', transform);
+    initUniform(glShader, 'm', transform);
+
+    // set the active texture
+    glContext.activeTexture(glContext.TEXTURE0);
+    if (textureInfos[0])
+    {
+        glActiveTexture = textureInfos[0].glTexture;
+        glContext.bindTexture(glContext.TEXTURE_2D, glActiveTexture);
+    }
+
+    // start in instanced rendering mode with additive blending off
+    glAdditive = glBatchAdditive = glPolyMode = false;
+    glSetInstancedMode(true);
 }
 
 /** Clear the canvas and setup the viewport
  *  @memberof WebGL */
 function glClearCanvas()
 {
+    if (!glContext) return;
+
     // clear and set to same size as main canvas
     glContext.viewport(0, 0, glCanvas.width=drawCanvas.width, glCanvas.height=drawCanvas.height);
     glContext.clear(glContext.COLOR_BUFFER_BIT);
 }
 
-/** Set the WebGl texture, called automatically if using multiple textures
+/** Set the WebGL texture, called automatically if using multiple textures
  *  - This may also flush the gl buffer resulting in more draw calls and worse performance
  *  @param {WebGLTexture} texture
- *  @param {boolean} wrap - Should the texture wrap or clamp
+ *  @param {boolean} [wrap] - Should the texture wrap or clamp
  *  @memberof WebGL */
 function glSetTexture(texture, wrap=false)
 {
     // must flush cache with the old texture to set a new one
-    if (headlessMode || texture == glActiveTexture)
+    if (!glContext || texture === glActiveTexture)
         return;
 
     glFlush();
@@ -5719,12 +6195,14 @@ function glSetTexture(texture, wrap=false)
 }
 
 /** Compile WebGL shader of the given type, will throw errors if in debug mode
- *  @param {String} source
- *  @param {Number} type
+ *  @param {string} source
+ *  @param {number} type
  *  @return {WebGLShader}
  *  @memberof WebGL */
 function glCompileShader(source, type)
 {
+    if (!glContext) return;
+
     // build the shader
     const shader = glContext.createShader(type);
     glContext.shaderSource(shader, source);
@@ -5737,12 +6215,14 @@ function glCompileShader(source, type)
 }
 
 /** Create WebGL program with given shaders
- *  @param {String} vsSource
- *  @param {String} fsSource
+ *  @param {string} vsSource
+ *  @param {string} fsSource
  *  @return {WebGLProgram}
  *  @memberof WebGL */
 function glCreateProgram(vsSource, fsSource)
 {
+    if (!glContext) return;
+
     // build the program
     const program = glContext.createProgram();
     glContext.attachShader(program, glCompileShader(vsSource, glContext.VERTEX_SHADER));
@@ -5761,6 +6241,8 @@ function glCreateProgram(vsSource, fsSource)
  *  @memberof WebGL */
 function glCreateTexture(image)
 {
+    if (!glContext) return;
+
     // build the texture
     const texture = glContext.createTexture();
     glContext.bindTexture(glContext.TEXTURE_2D, texture);
@@ -5782,7 +6264,7 @@ function glCreateTexture(image)
         const whitePixel = new Uint8Array([255, 255, 255, 255]);
         glContext.texImage2D(glContext.TEXTURE_2D, 0, glContext.RGBA, 1, 1, 0, glContext.RGBA, glContext.UNSIGNED_BYTE, whitePixel);
     }
-    
+
     // set texture filtering
     const filter = tilesPixelated ? glContext.NEAREST : glContext.LINEAR;
     glContext.texParameteri(glContext.TEXTURE_2D, glContext.TEXTURE_MIN_FILTER, filter);
@@ -5790,12 +6272,12 @@ function glCreateTexture(image)
     return texture;
 }
 
-
 /** Deletes a WebGL texture
  *  @param {WebGLTexture} [texture]
  *  @memberof WebGL */
 function glDeleteTexture(texture)
 {
+    if (!glContext) return;
     glContext.deleteTexture(texture);
 }
 
@@ -5805,6 +6287,8 @@ function glDeleteTexture(texture)
  *  @memberof WebGL */
 function glSetTextureData(texture, image)
 {
+    if (!glContext) return;
+
     // build the texture
     ASSERT(!!image && image.width > 0, 'Invalid image data.');
     glContext.bindTexture(glContext.TEXTURE_2D, texture);
@@ -5815,18 +6299,23 @@ function glSetTextureData(texture, image)
  *  @memberof WebGL */
 function glFlush()
 {
-    if (!glEnable || !glInstanceCount) return;
-
-    const destBlend = glBatchAdditive ? glContext.ONE : glContext.ONE_MINUS_SRC_ALPHA;
-    glContext.blendFuncSeparate(glContext.SRC_ALPHA, destBlend, glContext.ONE, destBlend);
-    glContext.enable(glContext.BLEND);
-
-    // draw all the sprites in the batch and reset the buffer
-    glContext.bufferSubData(glContext.ARRAY_BUFFER, 0, glPositionData);
-    glContext.drawArraysInstanced(glContext.TRIANGLE_STRIP, 0, 4, glInstanceCount);
-    if (debug || showWatermark)
-        drawCount += glInstanceCount;
-    glInstanceCount = 0;
+    if (glEnable && glContext && glBatchCount)
+    {
+        // set bend mode
+        const destBlend = glBatchAdditive ? glContext.ONE : glContext.ONE_MINUS_SRC_ALPHA;
+        glContext.blendFuncSeparate(glContext.SRC_ALPHA, destBlend, glContext.ONE, destBlend);
+        glContext.enable(glContext.BLEND);
+        glContext.bufferSubData(glContext.ARRAY_BUFFER, 0, glPositionData);
+        
+        // draw the batch
+        if (glPolyMode)
+            glContext.drawArrays(glContext.TRIANGLE_STRIP, 0, glBatchCount);
+        else
+            glContext.drawArraysInstanced(glContext.TRIANGLE_STRIP, 0, 4, glBatchCount);
+        if (debug || showWatermark)
+            drawCount += glBatchCount;
+        glBatchCount = 0;
+    }
     glBatchAdditive = glAdditive;
 }
 
@@ -5835,14 +6324,15 @@ function glFlush()
  *  @memberof WebGL */
 function glCopyToContext(context)
 {
-    if (!glEnable)
+    if (!glEnable || !glContext)
         return;
 
     glFlush();
     context.drawImage(glCanvas, 0, 0);
 }
 
-/** Set anti-aliasing for webgl canvas
+/** Set anti-aliasing for WebGL canvas
+ *  Must be called before engineInit
  *  @param {boolean} [antialias]
  *  @memberof WebGL */
 function glSetAntialias(antialias=true)
@@ -5852,25 +6342,27 @@ function glSetAntialias(antialias=true)
 }
 
 /** Add a sprite to the gl draw list, used by all gl draw functions
- *  @param {Number} x
- *  @param {Number} y
- *  @param {Number} sizeX
- *  @param {Number} sizeY
- *  @param {Number} [angle]
- *  @param {Number} [uv0X]
- *  @param {Number} [uv0Y]
- *  @param {Number} [uv1X]
- *  @param {Number} [uv1Y]
- *  @param {Number} [rgba=-1] - white is -1
- *  @param {Number} [rgbaAdditive=0] - black is 0
+ *  @param {number} x
+ *  @param {number} y
+ *  @param {number} sizeX
+ *  @param {number} sizeY
+ *  @param {number} [angle]
+ *  @param {number} [uv0X]
+ *  @param {number} [uv0Y]
+ *  @param {number} [uv1X]
+ *  @param {number} [uv1Y]
+ *  @param {number} [rgba=-1] - white is -1
+ *  @param {number} [rgbaAdditive=0] - black is 0
  *  @memberof WebGL */
 function glDraw(x, y, sizeX, sizeY, angle=0, uv0X=0, uv0Y=0, uv1X=1, uv1Y=1, rgba=-1, rgbaAdditive=0)
 {
     // flush if there is not enough room or if different blend mode
-    if (glInstanceCount >= gl_MAX_INSTANCES || glBatchAdditive != glAdditive)
+    if (glBatchCount >= gl_MAX_INSTANCES || glBatchAdditive !== glAdditive)
         glFlush();
+    glSetInstancedMode();
 
-    let offset = glInstanceCount++ * gl_INDICES_PER_INSTANCE;
+    glPolyMode = false;
+    let offset = glBatchCount++ * gl_INDICES_PER_INSTANCE;
     glPositionData[offset++] = x;
     glPositionData[offset++] = y;
     glPositionData[offset++] = sizeX;
@@ -5882,6 +6374,301 @@ function glDraw(x, y, sizeX, sizeY, angle=0, uv0X=0, uv0Y=0, uv1X=1, uv1Y=1, rgb
     glColorData[offset++] = rgba;
     glColorData[offset++] = rgbaAdditive;
     glPositionData[offset++] = angle;
+}
+
+/** Transform and add a polygon to the gl draw list
+ *  @param {Array} points - Array of Vector2 points
+ *  @param {number} rgba - Color of the polygon as a 32-bit integer
+ *  @param {number} x
+ *  @param {number} y
+ *  @param {number} sx
+ *  @param {number} sy
+ *  @param {number} angle
+ *  @param {boolean} [tristrip] - should tristrip algorithm be used
+ *  @memberof WebGL */
+function glDrawPointsTransform(points, rgba, x, y, sx, sy, angle, tristrip=true)
+{
+    const pointsOut = [];
+    for (const p of points)
+    {
+        // transform the point
+        const px = p.x*sx;
+        const py = p.y*sy;
+        const sa = Math.sin(-angle);
+        const ca = Math.cos(-angle);
+        pointsOut.push(vec2(x + ca*px - sa*py, y + sa*px + ca*py));
+    }
+    const drawPoints = tristrip ? glPolyStrip(pointsOut) : pointsOut;
+    glDrawPoints(drawPoints, rgba);
+}
+
+/** Transform and add a polygon to the gl draw list
+ *  @param {Array} points - Array of Vector2 points
+ *  @param {number} rgba - Color of the polygon as a 32-bit integer
+ *  @param {number} lineWidth - Width of the outline
+ *  @param {number} x
+ *  @param {number} y
+ *  @param {number} sx
+ *  @param {number} sy
+ *  @param {number} angle
+ *  @memberof WebGL */
+function glDrawOutlineTransform(points, rgba, lineWidth, x, y, sx, sy, angle)
+{
+    const outlinePoints = glMakeOutline(points, lineWidth);
+    glDrawPointsTransform(outlinePoints, rgba, x, y, sx, sy, angle, false);
+}
+
+/** Add a polygon to the gl draw list
+ *  @param {Array} points - Array of Vector2 points in triangle strip order
+ *  @param {number} rgba - Color of the polygon as a 32-bit integer
+ *  @memberof WebGL */
+function glDrawPoints(points, rgba)
+{
+    if (!glEnable || points.length < 3)
+        return; // needs at least 3 points to have area
+    
+    // add 2 degenerate verts if batching with existing polys to separate them
+    const needsBridge = glPolyMode && glBatchCount > 0;
+    const bridgeVerts = needsBridge ? 2 : 0;
+    const vertCount = points.length + bridgeVerts;
+    
+    // flush if there is not enough room or if different blend mode
+    if (!glPolyMode || glBatchCount+vertCount >= gl_MAX_POLY_VERTEXES || glBatchAdditive !== glAdditive)
+        glFlush();
+    glSetPolyMode();
+  
+    let offset = glBatchCount * gl_INDICES_PER_POLY_VERTEX;
+    
+    // add degenerate bridge if needed (repeat last vertex of previous poly, then first of new poly)
+    if (needsBridge)
+    {
+        // repeat last vertex from previous batch (it's at offset - 3)
+        const prevOffset = offset - 3;
+        glPositionData[offset++] = glPositionData[prevOffset];
+        glPositionData[offset++] = glPositionData[prevOffset + 1];
+        glColorData[offset++] = glColorData[prevOffset + 2];
+        
+        // repeat first vertex of new poly
+        glPositionData[offset++] = points[0].x;
+        glPositionData[offset++] = points[0].y;
+        glColorData[offset++] = rgba;
+    }
+    
+    // write vertices - they're already in triangle strip order
+    for (const point of points)
+    {
+        glPositionData[offset++] = point.x;
+        glPositionData[offset++] = point.y;
+        glColorData[offset++] = rgba;
+    }
+    glBatchCount += vertCount;
+}
+
+// WebGL internal function to convert polygon to outline triangle strip
+function glMakeOutline(points, width)
+{
+    if (points.length < 2)
+        return [];
+    
+    const halfWidth = width / 2;
+    const strip = [];
+    const n = points.length;
+    const e = 1e-6;
+    for (let i = 0; i < n; i++)
+    {
+        // for each vertex, calculate normal based on adjacent edges
+        const prev = points[(i - 1 + n) % n];
+        const curr = points[i];
+        const next = points[(i + 1) % n];
+        
+        // direction from previous to current
+        const dx1 = curr.x - prev.x;
+        const dy1 = curr.y - prev.y;
+        const len1 = (dx1*dx1 + dy1*dy1)**.5;
+        
+        // direction from current to next
+        const dx2 = next.x - curr.x;
+        const dy2 = next.y - curr.y;
+        const len2 = (dx2*dx2 + dy2*dy2)**.5;
+        
+        if (len1 < e && len2 < e)
+            continue; // skip degenerate point
+        
+        // calculate perpendicular normals for each edge
+        const nx1 = len1 > e ? -dy1 / len1 : 0;
+        const ny1 = len1 > e ?  dx1 / len1 : 0;
+        const nx2 = len2 > e ? -dy2 / len2 : 0;
+        const ny2 = len2 > e ?  dx2 / len2 : 0;
+        
+        // average the normals for miter
+        let nx = nx1 + nx2;
+        let ny = ny1 + ny2;
+        const nlen = (nx*nx + ny*ny)**.5;
+        if (nlen < e)
+        {
+            // 180 degree turn - use perpendicular
+            nx = nx1;
+            ny = ny1;
+        }
+        else
+        {
+            // calculate miter length
+            nx /= nlen;
+            ny /= nlen;
+            const dot = nx1 * nx + ny1 * ny;
+            if (dot > e)
+            {
+                // scale normal by miter length
+                const miterLength = 1 / dot;
+                nx *= miterLength;
+                ny *= miterLength;
+            }
+        }
+        
+        // create inner and outer points along the normal
+        const inner = vec2(curr.x - nx * halfWidth, curr.y - ny * halfWidth);
+        const outer = vec2(curr.x + nx * halfWidth, curr.y + ny * halfWidth);
+        strip.push(inner);
+        strip.push(outer);
+    }
+    if (strip.length > 1)
+    {
+        // close the loop
+        strip.push(strip[0]);
+        strip.push(strip[1]);
+    }
+    return strip;
+}
+
+// WebGL internal function to convert polys to tri strips
+function glPolyStrip(points)
+{
+    // validate input
+    if (points.length < 3)
+        return [];
+    
+    // cross product helper: (b-a) x (c-a)
+    const cross = (a,b,c)=> (b.x - a.x) * (c.y - a.y) - (b.y - a.y) * (c.x - a.x);
+
+    // calculate signed area of polygon
+    const signedArea = (poly)=>
+    {
+        let area = 0;
+        for (let i = poly.length; i--;)
+        {
+            const j = (i+1) % poly.length;
+            area += poly[i].cross(poly[j]);
+        }
+        return area;
+    }
+
+    // ensure counter-clockwise winding
+    if (signedArea(points) < 0)
+        points = points.reverse();
+
+    // tolerance constants
+    const e = 1e-10;
+
+    // check if point is inside triangle
+    const pointInTriangle = (p, a, b, c)=>
+    {
+        const c1 = cross(a, b, p);
+        const c2 = cross(b, c, p);
+        const c3 = cross(c, a, p);
+        const negative = (c1<-e?1:0) + (c2<-e?1:0) + (c3<-e?1:0);
+        const positive = (c1> e?1:0) + (c2> e?1:0) + (c3> e?1:0);
+        return !(negative && positive);
+    };
+
+    // ear clipping triangulation
+    const indices = [];
+    for (let i = 0; i < points.length; ++i)
+        indices[i] = i;
+    const triangles = [];
+    let attempts = 0;
+    const maxAttempts = points.length ** 2 + 100;
+    while (indices.length > 3 && attempts++ < maxAttempts)
+    {
+        let foundEar = false;
+        for (let i = indices.length; --i;)
+        {
+            const i0 = indices[(i + indices.length - 1) % indices.length];
+            const i1 = indices[i];
+            const i2 = indices[(i + 1) % indices.length];
+            const a = points[i0], b = points[i1], c = points[i2];
+
+            // check if convex
+            if (cross(a, b, c) < e)
+                continue;
+                
+            // check if any other point is inside
+            let hasInside = false;
+            for (let j = 0; j < indices.length; j++)
+            {
+                const k = indices[j];
+                if (k === i0 || k === i1 || k === i2)
+                    continue;
+                const p = points[k];
+                hasInside = pointInTriangle(p, a, b, c);
+                if (hasInside)
+                    break;
+            }
+            if (hasInside)
+                continue;
+
+            // found valid ear
+            triangles.push([i0, i1, i2]);
+            indices.splice(i, 1);
+            foundEar = true;
+            break;
+        }
+
+        // fallback for degenerate cases
+        if (!foundEar)
+        {
+            let worstIndex = -1, worstValue = Infinity;
+            for (let i = indices.length; --i;)
+            {
+                const i0 = indices[(i + indices.length - 1) % indices.length];
+                const i1 = indices[i];
+                const i2 = indices[(i + 1) % indices.length];
+                const value = abs(cross(points[i0], points[i1], points[i2]));
+                if (value < worstValue)
+                {
+                    worstValue = value;
+                    worstIndex = i;
+                }
+            }
+            if (worstIndex < 0)
+                break;
+            
+            const i0 = indices[(worstIndex + indices.length - 1) % indices.length];
+            const i1 = indices[worstIndex];
+            const i2 = indices[(worstIndex + 1) % indices.length];
+            triangles.push([i0, i1, i2]);
+            indices.splice(worstIndex, 1);
+        }
+    }
+    
+    // add final triangle
+    if (indices.length === 3)
+        triangles.push([indices[0], indices[1], indices[2]]);
+    if (!triangles.length)
+        return [];
+
+    // convert triangles to triangle strip with degenerate connectors
+    const strip = [];
+    let [a0, b0, c0] = triangles[0];
+    strip.push(points[a0], points[b0], points[c0]);
+    for (let i = 1; i < triangles.length; i++)
+    {
+        // add degenerate bridge from last vertex to first of new triangle
+        const [a, b, c] = triangles[i];
+        strip.push(points[c0], points[a]);
+        strip.push(points[a], points[b], points[c]);
+        c0 = c;
+    }
+    return strip;
 }
 /** 
  * LittleJS Newgrounds API
@@ -5906,11 +6693,11 @@ let newgrounds;
 class NewgroundsMedal extends Medal
 {
     /** Create a newgrounds medal object and adds it to the list of medals
-     *  @param {Number} id            - The unique identifier of the medal
-     *  @param {String} name          - Name of the medal
-     *  @param {String} [description] - Description of the medal
-     *  @param {String} [icon]        - Icon for the medal
-     *  @param {String} [src]         - Image location for the medal
+     *  @param {number} id            - The unique identifier of the medal
+     *  @param {string} name          - Name of the medal
+     *  @param {string} [description] - Description of the medal
+     *  @param {string} [icon]        - Icon for the medal
+     *  @param {string} [src]         - Image location for the medal
      */
     constructor(id, name, description, icon, src)
     { super(id, name, description, icon, src); }
@@ -6002,7 +6789,7 @@ class NewgroundsPlugin
      * @param {number} id       - The scoreboard id
      * @param {string} [user]   - A user's id or name
      * @param {number} [social] - If true, only social scores will be loaded
-     * @param {number} [skip]   - Number of scores to skip before start
+     * @param {number} [skip]   - Number of scores to skip over
      * @param {number} [limit]  - Number of scores to include in the list
      * @return {Object}         - The response JSON object
      */
@@ -6090,6 +6877,13 @@ class PostProcessPlugin
         postProcess = this;
 
         if (headlessMode) return;
+
+        if (!glEnable)
+        {
+            console.warn('PostProcessPlugin: WebGL not enabled!');
+            return;
+        }
+
         if (!shaderCode) // default shader pass through
             shaderCode = 'void mainImage(out vec4 c,vec2 p){c=texture(iChannel0,p/iResolution.xy);}';
 
@@ -6218,16 +7012,16 @@ class ZzFXMusic extends Sound
         if (!soundEnable || headlessMode) return;
         this.randomness = 0;
         this.sampleChannels = zzfxM(...zzfxMusic);
-        this.sampleRate = zzfxR;
+        this.sampleRate = audioDefaultSampleRate;
     }
 
-    /** Play the music
-     *  @param {number}  [volume=1] - How much to scale volume by
-     *  @param {boolean} [loop] - True if the music should loop
+    /** Play the music that loops by default
+     *  @param {number}  [volume] - Volume to play the music at
+     *  @param {boolean} [loop] - Should the music loop?
      *  @return {AudioBufferSourceNode} - The audio source node
      */
-    playMusic(volume, loop=false)
-    { return super.play(undefined, volume, 1, 1, loop); }
+    playMusic(volume=1, loop=true)
+    { return super.play(undefined, volume, 1, 0, loop); }
 }
 
 ///////////////////////////////////////////////////////////////////////////////
@@ -6261,7 +7055,7 @@ function zzfxM(instruments, patterns, sequence, BPM = 125)
   let panning = 0;
   let hasMore = 1;
   let sampleCache = {};
-  let beatLength = zzfxR / BPM * 60 >> 2;
+  let beatLength = audioDefaultSampleRate / BPM * 60 >> 2;
 
   // for each channel in order until there are no more
   for (; hasMore; channelIndex++) {
@@ -6280,15 +7074,15 @@ function zzfxM(instruments, patterns, sequence, BPM = 125)
       // get next offset, use the length of first channel
       nextSampleOffset = outSampleOffset + (patterns[patternIndex][0].length - 2 - (notFirstBeat?0:1)) * beatLength;
       // for each beat in pattern, plus one extra if end of sequence
-      isSequenceEnd = sequenceIndex == sequence.length - 1;
+      isSequenceEnd = sequenceIndex === sequence.length - 1;
       for (i = 2, k = outSampleOffset; i < patternChannel.length + isSequenceEnd; notFirstBeat = ++i) {
 
         // <channel-note>
         note = patternChannel[i];
 
         // stop if end, different instrument or new note
-        stop = i == patternChannel.length + isSequenceEnd - 1 && isSequenceEnd ||
-            instrument != (patternChannel[0] || 0) || note | 0;
+        stop = i === patternChannel.length + isSequenceEnd - 1 && isSequenceEnd ||
+            instrument !== (patternChannel[0] || 0) || note | 0;
 
         // fill buffer with samples for previous beat, most cpu intensive part
         for (j = 0; j < beatLength && notFirstBeat;
@@ -6373,11 +7167,11 @@ class UISystemPlugin
         /** @property {Color} - Default text color for UI elements */
         this.defaultTextColor = BLACK;
         /** @property {Color} - Default button color for UI elements */
-        this.defaultButtonColor = hsl(0,0,.5);
+        this.defaultButtonColor = hsl(0,0,.7);
         /** @property {Color} - Default hover color for UI elements */
-        this.defaultHoverColor = hsl(0,0,.7);
+        this.defaultHoverColor = hsl(0,0,.9);
         /** @property {Color} - Default color for disabled UI elements */
-        this.defaultDisabledColor = hsl(0,0,.2);
+        this.defaultDisabledColor = hsl(0,0,.3);
         /** @property {number} - Default line width for UI elements */
         this.defaultLineWidth = 4;
         /** @property {number} - Default rounded rect corner radius for UI elements */
@@ -6397,16 +7191,16 @@ class UISystemPlugin
             
         engineAddPlugin(uiUpdate, uiRender);
 
-        function updateInvisible(o)
-        {
-            for(const c of o.children)
-                updateInvisible(c);
-            o.updateInvisible();
-        }
-
         // setup recursive update and render
         function uiUpdate()
         {
+            function updateInvisibleObject(o)
+            {
+                // update invisible objects
+                for (const c of o.children)
+                    updateInvisibleObject(c);
+                o.updateInvisible();
+            }
             function updateObject(o)
             {
                 if (o.visible)
@@ -6415,12 +7209,12 @@ class UISystemPlugin
                     if (o.parent)
                         o.pos = o.localPos.add(o.parent.pos);
                     // update in reverse order to detect mouse enter/leave
-                    for(let i=o.children.length; i--;)
+                    for (let i=o.children.length; i--;)
                         updateObject(o.children[i]);
                     o.update();
                 }
                 else
-                    updateInvisible(o);
+                    updateInvisibleObject(o);
             }
             uiSystem.uiObjects.forEach(o=> o.parent || updateObject(o));
         }
@@ -6433,7 +7227,7 @@ class UISystemPlugin
                 if (o.parent)
                     o.pos = o.localPos.add(o.parent.pos);
                 o.render();
-                for(const c of o.children)
+                for (const c of o.children)
                     renderObject(c);
             }
             uiSystem.uiObjects.forEach(o=> o.parent || renderObject(o));
@@ -6446,7 +7240,7 @@ class UISystemPlugin
     *  @param {Color}   [color=uiSystem.defaultColor]
     *  @param {number}  [lineWidth=uiSystem.defaultLineWidth]
     *  @param {Color}   [lineColor=uiSystem.defaultLineColor]
-    *  @param {number}  [lineWidth=uiSystem.defaultCornerRadius] */
+    *  @param {number}  [cornerRadius=uiSystem.defaultCornerRadius] */
     drawRect(pos, size, color=uiSystem.defaultColor, lineWidth=uiSystem.defaultLineWidth, lineColor=uiSystem.defaultLineColor, cornerRadius=uiSystem.defaultCornerRadius)
     {
         const context = uiSystem.uiContext;
@@ -6490,7 +7284,7 @@ class UISystemPlugin
     *  @param {boolean}  [mirror] */
     drawTile(pos, size, tileInfo, color=uiSystem.defaultColor, angle=0, mirror=false)
     {
-        drawTile(pos, size, tileInfo, color, angle, mirror, BLACK, false, true, uiSystem.uiContext);
+        drawTile(pos, size, tileInfo, color, angle, mirror, CLEAR_BLACK, false, true, uiSystem.uiContext);
     }
 
     /** Draw text to the UI context
@@ -6521,32 +7315,40 @@ class UIObject
     constructor(pos=vec2(), size=vec2())
     {
         /** @property {Vector2} - Local position of the object */
-        this.localPos   = pos.copy();
+        this.localPos = pos.copy();
         /** @property {Vector2} - Screen space position of the object */
-        this.pos        = pos.copy();
+        this.pos = pos.copy();
         /** @property {Vector2} - Screen space size of the object */
-        this.size       = size.copy();
-        /** @property {Color} - color of the object */
-        this.color      = uiSystem.defaultColor;
-        /** @property {Color} - color for text */
-        this.textColor  = uiSystem.defaultTextColor;
-        /** @property {Color} - color used when hovering over the object */
+        this.size = size.copy();
+        /** @property {Color} - Color of the object */
+        this.color = uiSystem.defaultColor;
+        /** @property {string} - Text for this ui object */
+        this.text = undefined;
+        /** @property {Color} - Color when disabled */
+        this.disabledColor = uiSystem.defaultDisabledColor;
+        /** @property {boolean} - Is this object disabled? */
+        this.disabled = false;
+        /** @property {Color} - Color for text */
+        this.textColor = uiSystem.defaultTextColor;
+        /** @property {Color} - Color used when hovering over the object */
         this.hoverColor = uiSystem.defaultHoverColor;
-        /** @property {Color} - color for line drawing */
-        this.lineColor  = uiSystem.defaultLineColor;
-        /** @property {number} - width for line drawing */
-        this.lineWidth  = uiSystem.defaultLineWidth;
-        /** @property {string} - font for this objecct */
-        this.font       = uiSystem.defaultFont;
-        /** @property {number} - override for text height */
-        this.textHeight   = undefined;
-        /** @property {boolean} - should this object be drawn */
-        this.visible    = true;
-        /** @property {Array<UIObject>} - a list of this object's children */
-        this.children   = [];
-        /** @property {UIObject} - this object's parent, position is in parent space */
-        this.parent     = undefined;
-        /** @property {number} - Extra size added when checking if element is touched */
+        /** @property {Color} - Color for line drawing */
+        this.lineColor = uiSystem.defaultLineColor;
+        /** @property {number} - Width for line drawing */
+        this.lineWidth = uiSystem.defaultLineWidth;
+        /** @property {number} - Corner radius for rounded rects */
+        this.cornerRadius = uiSystem.defaultCornerRadius;
+        /** @property {string} - Font for this objecct */
+        this.font = uiSystem.defaultFont;
+        /** @property {number} - Override for text height */
+        this.textHeight = undefined;
+        /** @property {boolean} - Should this object be drawn */
+        this.visible  = true;
+        /** @property {Array<UIObject>} - A list of this object's children */
+        this.children = [];
+        /** @property {UIObject} - This object's parent, position is in parent space */
+        this.parent = undefined;
+        /** @property {number} - Extra size added to make small buttons easier to touch on mobile devices */
         this.extraTouchSize = 0;
         /** @property {Sound} - Sound when interactive element is pressed */
         this.soundPress = uiSystem.defaultSoundPress;
@@ -6578,7 +7380,7 @@ class UIObject
      */
     removeChild(child)
     {
-        ASSERT(child.parent == this && this.children.includes(child));
+        ASSERT(child.parent === this && this.children.includes(child));
         this.children.splice(this.children.indexOf(child), 1);
         child.parent = undefined;
     }
@@ -6631,7 +7433,7 @@ class UIObject
             this.mouseIsHeld = false;
         }
 
-        if (this.mouseIsOver != mouseWasOver)
+        if (this.mouseIsOver !== mouseWasOver)
             this.mouseIsOver ? this.onEnter() : this.onLeave();
     }
 
@@ -6642,7 +7444,7 @@ class UIObject
             uiSystem.drawRect(this.pos, this.size, this.color, this.lineWidth, this.lineColor, this.cornerRadius);
     }
 
-    /** Special update for when object is invisible */
+    /** Special update when object is not visible */
     updateInvisible()
     {
         // reset input state when not visible
@@ -6650,28 +7452,22 @@ class UIObject
     }
 
     /** Called when the mouse enters the object */
-    onEnter()   
-    {}
+    onEnter() {}
 
     /** Called when the mouse leaves the object */
-    onLeave()   
-    {}
+    onLeave() {}
 
     /** Called when the mouse is pressed while over the object */
-    onPress()   
-    {}
+    onPress() {}
 
     /** Called when the mouse is released while over the object */
-    onRelease() 
-    {}
+    onRelease() {}
 
     /** Called when user clicks on this object */
-    onClick()   
-    {}
+    onClick() {}
 
     /** Called when the state of this object changes */
-    onChange()  
-    {}
+    onChange() {}
 };
 
 ///////////////////////////////////////////////////////////////////////////////
@@ -6692,13 +7488,13 @@ class UIText extends UIObject
     {
         super(pos, size);
 
-        /** @property {string} */
+        // set properties
         this.text = text;
-        /** @property {string} */
         this.align = align;
+        this.font = font;
 
-        this.font = font; // set font
-        this.lineWidth = 0; // set text to not be outlined by default
+        // make text not outlined by default
+        this.lineWidth = 0;
     }
     render()
     {
@@ -6725,13 +7521,14 @@ class UITile extends UIObject
     constructor(pos, size, tileInfo, color=WHITE, angle=0, mirror=false)
     {
         super(pos, size);
-
         /** @property {TileInfo} - Tile image to use */
         this.tileInfo = tileInfo;
         /** @property {number} - Angle to rotate in radians */
         this.angle = angle;
         /** @property {boolean} - Should it be mirrored? */
         this.mirror = mirror;
+        
+        // set properties
         this.color = color;
     }
     render()
@@ -6757,22 +7554,20 @@ class UIButton extends UIObject
     {
         super(pos, size);
 
-        /** @property {string} */
+        // set properties
         this.text = text;
-        /** @property {Color} */
-        this.disabledColor = uiSystem.defaultDisabledColor;
-        /** @property {boolean} */
-        this.disabled = false;
-        this.interactive = true;
         this.color = color;
+        this.interactive = true;
     }
     render()
     {
+        // draw the button
         const lineColor = this.mouseIsHeld && !this.disabled ? this.color : this.lineColor;
         const color = this.disabled ? this.disabledColor : this.mouseIsOver ? this.hoverColor : this.color;
         uiSystem.drawRect(this.pos, this.size, color, this.lineWidth, lineColor, this.cornerRadius);
         
-        const textScale = .8; // scale text to fit in button
+        // draw the text
+        const textScale = .8; // scale text to fit
         const textSize = vec2(this.size.x, this.textHeight || this.size.y*textScale);
         uiSystem.drawText(this.text, this.pos, textSize, 
             this.textColor, 0, undefined, this.align, this.font);
@@ -6790,13 +7585,18 @@ class UICheckbox extends UIObject
      *  @param {Vector2} [pos]
      *  @param {Vector2} [size]
      *  @param {boolean} [checked]
+     *  @param {string}  [text]
+     *  @param {Color}   [color=uiSystem.defaultButtonColor]
      */
-    constructor(pos, size, checked=false)
+    constructor(pos, size, checked=false, text='', color=uiSystem.defaultButtonColor)
     {
         super(pos, size);
-
-        /** @property {boolean} */
+        /** @property {boolean} - Current percentage value of this scrollbar 0-1 */
         this.checked = checked;
+
+        // set properties
+        this.text = text;
+        this.color = color;
         this.interactive = true;
     }
     onClick()
@@ -6806,14 +7606,24 @@ class UICheckbox extends UIObject
     }
     render()
     {
-        const color = this.mouseIsOver? this.hoverColor : this.color;
+        const color = this.disabled ? this.disabledColor : this.mouseIsOver ? this.hoverColor : this.color;
         uiSystem.drawRect(this.pos, this.size, color, this.lineWidth, this.lineColor, this.cornerRadius);
         if (this.checked)
         {
-            // draw an X if checked
-            uiSystem.drawLine(this.pos.add(this.size.multiply(vec2(-.5,-.5))), this.pos.add(this.size.multiply(vec2(.5,.5))), this.lineWidth, this.lineColor);
-            uiSystem.drawLine(this.pos.add(this.size.multiply(vec2(-.5,.5))), this.pos.add(this.size.multiply(vec2(.5,-.5))), this.lineWidth, this.lineColor);
+            const p = this.cornerRadius / min(this.size.x, this.size.y) * 2;
+            const length = lerp(1, 2**.5/2, p) / 2;
+            let s = this.size.scale(length);
+            uiSystem.drawLine(this.pos.add(s.multiply(vec2(-1))), this.pos.add(s.multiply(vec2(1))), this.lineWidth, this.lineColor);
+            uiSystem.drawLine(this.pos.add(s.multiply(vec2(-1,1))), this.pos.add(s.multiply(vec2(1,-1))), this.lineWidth, this.lineColor);
         }
+        
+        // draw the text to the right side of the checkbox
+        const textScale = .8; // scale text to fit
+        const gapScale = .55;
+        const textSize = vec2(this.size.x, this.textHeight || this.size.y*textScale);
+        const pos = this.pos.add(vec2(this.size.x*gapScale,0));
+        uiSystem.drawText(this.text, pos, textSize, 
+            this.textColor, 0, undefined, 'left', this.font);
     }
 }
 
@@ -6836,43 +7646,51 @@ class UIScrollbar extends UIObject
     {
         super(pos, size);
 
-        /** @property {number} */
+        /** @property {number} - Current percentage value of this scrollbar 0-1 */
         this.value = value;
-        /** @property {string} */
-        this.text = text;
-        /** @property {Color} */
+        /** @property {Color} - Color for the handle part of the scrollbar */
         this.handleColor = handleColor;
+
+        // set properties
+        this.text = text;
         this.color = color;
         this.interactive = true;
     }
     update()
     {
         super.update();
-        if (this.mouseIsHeld)
+        if (this.mouseIsHeld && this.interactive)
         {
+            // check if value changed
             const handleSize = vec2(this.size.y);
             const handleWidth = this.size.x - handleSize.x;
             const p1 = this.pos.x - handleWidth/2;
             const p2 = this.pos.x + handleWidth/2;
             const oldValue = this.value;
             this.value = percent(mousePosScreen.x, p1, p2);
-            this.value == oldValue || this.onChange();
+            this.value === oldValue || this.onChange();
         }
     }
     render()
     {
-        const lineColor = this.mouseIsHeld ? this.color : this.lineColor;
-        const color = this.mouseIsOver? this.hoverColor : this.color;
+        // draw the scrollbar background
+        const lineColor = this.interactive && this.mouseIsHeld && !this.disabled ? 
+            this.color : this.lineColor;
+        const color = this.disabled ? this.disabledColor : 
+            this.interactive && this.mouseIsHeld ? this.hoverColor : this.color;
         uiSystem.drawRect(this.pos, this.size, color, this.lineWidth, lineColor, this.cornerRadius);
     
+        // draw the scrollbar handle
         const handleSize = vec2(this.size.y);
         const handleWidth = this.size.x - handleSize.x;
         const p1 = this.pos.x - handleWidth/2;
         const p2 = this.pos.x + handleWidth/2;
         const handlePos = vec2(lerp(p1, p2, this.value), this.pos.y);
-        const barColor = this.mouseIsHeld ? this.color : this.handleColor;
-        uiSystem.drawRect(handlePos, handleSize, barColor, this.lineWidth, this.lineColor, this.cornerRadius);
+        const handleColor = this.disabled ? this.disabledColor : 
+            this.interactive && this.mouseIsHeld ? this.color : this.handleColor;
+        uiSystem.drawRect(handlePos, handleSize, handleColor, this.lineWidth, this.lineColor, this.cornerRadius);
 
+        // draw the text on the scrollbar
         const textScale = .8; // scale text to fit in scrollbar
         const textSize = vec2(this.size.x, this.textHeight || this.size.y*textScale);
         uiSystem.drawText(this.text, this.pos, textSize, 
@@ -6940,7 +7758,7 @@ class Box2dObject extends EngineObject
         bodyDef.set_angle(-angle);
         this.body = box2d.world.CreateBody(bodyDef);
         this.body.object = this;
-        this.outlineColor = BLACK;
+        this.lineColor = BLACK;
     }
 
     /** Destroy this object and it's physics body */
@@ -6967,27 +7785,27 @@ class Box2dObject extends EngineObject
         if (this.tileInfo)
             super.render();
         else
-            this.drawFixtures(this.color, this.outlineColor, this.lineWidth, mainContext);
+            this.drawFixtures(this.color, this.lineColor, this.lineWidth);
     }
 
     /** Render debug info */
     renderDebugInfo()
     {
         const isAsleep = !this.getIsAwake();
-        const isStatic = this.getBodyType() == box2d.bodyTypeStatic;
+        const isStatic = this.getBodyType() === box2d.bodyTypeStatic;
         const color = rgb(isAsleep?1:0, isAsleep?1:0, isStatic?1:0, .5);
         this.drawFixtures(color);
     }
 
     /** Draws all this object's fixtures 
      *  @param {Color}  [color]
-     *  @param {Color}  [outlineColor]
+     *  @param {Color}  [lineColor]
      *  @param {number} [lineWidth]
      *  @param {CanvasRenderingContext2D} [context] */
-    drawFixtures(color=WHITE, outlineColor, lineWidth=.1, context)
+    drawFixtures(color=WHITE, lineColor, lineWidth=.1, context)
     {
         this.getFixtureList().forEach(fixture=>
-            box2d.drawFixture(fixture, this.pos, this.angle, color, outlineColor, lineWidth, context));
+            box2d.drawFixture(fixture, this.pos, this.angle, color, lineColor, lineWidth, context));
     }
 
     ///////////////////////////////////////////////////////////////////////////////
@@ -8442,7 +9260,7 @@ class Box2dPlugin
         queryCallback.ReportFixture = function(fixturePointer)
         {
             const fixture = box2d.instance.wrapPointer(fixturePointer, box2d.instance.b2Fixture);
-            if (dynamicOnly && fixture.GetBody().GetType() != box2d.instance.b2_dynamicBody)
+            if (dynamicOnly && fixture.GetBody().GetType() !== box2d.instance.b2_dynamicBody)
                 return true; // continue getting results
             if (!fixture.TestPoint(box2d.vec2dTo(pos)))
                 return true; // continue getting results
@@ -8468,10 +9286,10 @@ class Box2dPlugin
      *  @param {Vector2} pos
      *  @param {number} angle
      *  @param {Color} [color]
-     *  @param {Color} [outlineColor]
+     *  @param {Color} [lineColor]
      *  @param {number} [lineWidth]
      *  @param {CanvasRenderingContext2D} [context] */
-    drawFixture(fixture, pos, angle, color=WHITE, outlineColor=BLACK, lineWidth=.1, context=drawContext)
+    drawFixture(fixture, pos, angle, color=WHITE, lineColor=BLACK, lineWidth=.1, context)
     {
         const shape = box2d.castObjectType(fixture.GetShape());
         switch (shape.GetType())
@@ -8481,101 +9299,25 @@ class Box2dPlugin
                 let points = [];
                 for (let i=shape.GetVertexCount(); i--;)
                     points.push(box2d.vec2From(shape.GetVertex(i)));
-                box2d.drawPoly(pos, angle, points, color, outlineColor, lineWidth, context);
+                drawPoly(points, color, lineWidth, lineColor, pos, angle);
                 break;
             }
             case box2d.instance.b2Shape.e_circle:
             {
                 const radius = shape.get_m_radius();
-                box2d.drawCircle(pos, radius, color, outlineColor, lineWidth, context);
+                drawCircle(pos, radius, color, lineWidth, lineColor);
                 break;
             }
             case box2d.instance.b2Shape.e_edge:
             {
                 const v1 = box2d.vec2From(shape.get_m_vertex1());
                 const v2 = box2d.vec2From(shape.get_m_vertex2());
-                box2d.drawLine(pos, angle, v1, v2, color, lineWidth, context);
+                drawLine(v1, v2, lineWidth, lineColor, pos, angle);
                 break;
             }
         }
     }
 
-    /** draws a circle
-     *  @param {Vector2} pos
-     *  @param {number} radius
-     *  @param {Color} [color]
-     *  @param {Color} [outlineColor]
-     *  @param {number} [lineWidth]
-     *  @param {CanvasRenderingContext2D} [context] */
-    drawCircle(pos, radius, color=WHITE, outlineColor=BLACK, lineWidth=.1, context=drawContext)
-    {
-        drawCanvas2D(pos, vec2(1), 0, 0, context=>
-        {
-            context.beginPath();
-            context.arc(0, 0, radius, 0, 9);
-            box2d.drawFillStroke(color, outlineColor, lineWidth, context);
-        }, 0, context);
-    }
-
-    /** draws a polygon
-     *  @param {Vector2} pos
-     *  @param {number} angle
-     *  @param {Array<Vector2>} points
-     *  @param {Color} [color]
-     *  @param {Color} [outlineColor]
-     *  @param {number} [lineWidth]
-     *  @param {CanvasRenderingContext2D} [context] */
-    drawPoly(pos, angle, points, color=WHITE, outlineColor=BLACK, lineWidth=.1, context=drawContext)
-    {
-        drawCanvas2D(pos, vec2(1), angle, 0, context=>
-        {
-            context.beginPath();
-            points.forEach(p=>context.lineTo(p.x, p.y));
-            context.closePath();
-            box2d.drawFillStroke(color, outlineColor, lineWidth, context);
-        }, 0, context);
-    }
-
-    /** draws a line
-     *  @param {Vector2} pos
-     *  @param {number} angle
-     *  @param {Vector2} posA
-     *  @param {Vector2} posB
-     *  @param {Color} [color]
-     *  @param {number} [lineWidth]
-     *  @param {CanvasRenderingContext2D} [context] */
-    drawLine(pos, angle, posA, posB, color=WHITE, lineWidth=.1, context=drawContext)
-    {
-        drawCanvas2D(pos, vec2(1), angle, 0, context=>
-        {
-            context.beginPath();
-            context.lineTo(posA.x, posA.y);
-            context.lineTo(posB.x, posB.y);
-            box2d.drawFillStroke(0, color, lineWidth, context);
-        }, 0, context);
-    }
-
-    /** performs a fill or stroke as a helper to the other draw functions
-     *  @param {Color} [color]
-     *  @param {Color} [outlineColor]
-     *  @param {number} [lineWidth]
-     *  @param {CanvasRenderingContext2D} [context] */
-    drawFillStroke(color=WHITE, outlineColor=BLACK, lineWidth=.1, context=drawContext)
-    {
-        if (color)
-        {
-            context.fillStyle = color.toString();
-            context.fill();
-        }
-        if (outlineColor && lineWidth)
-        {
-            context.lineWidth = lineWidth;
-            context.lineJoin = context.lineCap = 'round';
-            context.strokeStyle = outlineColor.toString();
-            context.stroke();
-        }
-    }
-
     ///////////////////////////////////////////////////////////////////////////////
     // helper functions
 
@@ -8649,7 +9391,9 @@ class Box2dPlugin
 }
 
 ///////////////////////////////////////////////////////////////////////////////
-/** Box2d Init - Call with await before starting LittleJS to init box2d
+/** Box2d Init - Call with await to init box2d
+ *  @example
+ *  await box2dInit();
  *  @return {Promise<Box2dPlugin>}
  *  @memberof Box2D */
 async function box2dInit()
@@ -8676,6 +9420,7 @@ async function box2dInit()
     function setupDebugDraw()
     {
         // setup debug draw
+        const debugLineWidth = .1;
         const debugDraw = new box2d.instance.JSDraw();
         const box2dColor = (c)=> new Color(c.get_r(), c.get_g(), c.get_b());
         const box2dColorPointer = (c)=>
@@ -8693,33 +9438,33 @@ async function box2dInit()
             color = getDebugColor(color);
             point1 = box2d.vec2FromPointer(point1);
             point2 = box2d.vec2FromPointer(point2);
-            box2d.drawLine(vec2(), 0, point1, point2, color, undefined, overlayContext);
+            drawLine(point1, point2, debugLineWidth, color, vec2(), 0, false, false, overlayContext);
         };
         debugDraw.DrawPolygon = function(vertices, vertexCount, color)
         {
             color = getDebugColor(color);
             const points = getPointsList(vertices, vertexCount);
-            box2d.drawPoly(vec2(), 0, points, undefined, color, undefined, overlayContext);
+            drawPoly(points, CLEAR_WHITE, debugLineWidth, color, vec2(), 0, false, false, overlayContext);
         };
         debugDraw.DrawSolidPolygon = function(vertices, vertexCount, color)
         {
             color = getDebugColor(color);
             const points = getPointsList(vertices, vertexCount);
-            box2d.drawPoly(vec2(), 0, points, color, color, undefined, overlayContext);
+            drawPoly(points, color, 0, color, vec2(), 0, false, false, overlayContext);
         };
         debugDraw.DrawCircle = function(center, radius, color)
         {
             color = getDebugColor(color);
             center = box2d.vec2FromPointer(center);
-            box2d.drawCircle(center, radius, undefined, color, undefined, overlayContext);
+            drawCircle(center, radius, CLEAR_WHITE, debugLineWidth, color, false, false, overlayContext);
         };
         debugDraw.DrawSolidCircle = function(center, radius, axis, color)
         {
             color = getDebugColor(color);
             center = box2d.vec2FromPointer(center);
             axis = box2d.vec2FromPointer(axis).scale(radius);
-            box2d.drawCircle(center, radius, color, color, undefined, overlayContext);
-            box2d.drawLine(center, 0, vec2(), axis, color, undefined, overlayContext);
+            drawCircle(center, radius, color, debugLineWidth, color, false, false, overlayContext);
+            drawLine(vec2(), axis, debugLineWidth, color, center, 0, false, false, overlayContext);
         };
         debugDraw.DrawTransform = function(transform)
         {
@@ -8728,8 +9473,8 @@ async function box2dInit()
             const angle = -transform.get_q().GetAngle();
             const p1 = vec2(1,0), c1 = rgb(.75,0,0,.8);
             const p2 = vec2(0,1), c2 = rgb(0,.75,0,.8);
-            box2d.drawLine(pos, angle, vec2(), p1, c1, undefined, overlayContext);
-            box2d.drawLine(pos, angle, vec2(), p2, c2, undefined, overlayContext);
+            drawLine(vec2(), p1, debugLineWidth, c1, pos, angle, false, false, overlayContext);
+            drawLine(vec2(), p2, debugLineWidth, c2, pos, angle, false, false, overlayContext);
         }
             
         debugDraw.AppendFlags(box2d.instance.b2Draw.e_shapeBit);
@@ -8754,28 +9499,30 @@ async function box2dInit()
  *  @param {Vector2} pos - Screen space position
  *  @param {Vector2} size - Screen space size
  *  @param {TileInfo} startTile - Starting tile for the nine-slice pattern
- *  @param {number} [borderSize=1] - Width of the border sections
- *  @param {number} [extraSpace=.01] - Extra spacing adjustment
+ *  @param {number} [borderSize] - Width of the border sections
+ *  @param {number} [extraSpace] - Extra spacing adjustment
+ *  @param {number} [angle] - Angle to rotate by
  *  @memberof DrawUtilities */
-function drawNineSliceScreen(pos, size, startTile, borderSize=32, extraSpace=1)
+function drawNineSliceScreen(pos, size, startTile, borderSize=32, extraSpace=2, angle=0)
 {
-    drawNineSlice(pos, size, startTile, WHITE, borderSize, BLACK, extraSpace, false, true, overlayContext);
+    drawNineSlice(pos, size, startTile, WHITE, borderSize, BLACK, extraSpace, angle, false, true, overlayContext);
 }
 
 /** Draw a scalable nine-slice UI element in world space
- *  This function can apply color and additive color if webgl is enabled
+ *  This function can apply color and additive color if WebGL is enabled
  *  @param {Vector2} pos - World space position
  *  @param {Vector2} size - World space size
  *  @param {TileInfo} startTile - Starting tile for the nine-slice pattern
  *  @param {Color} [color] - Color to modulate with
- *  @param {number} [borderSize=1] - Width of the border sections
+ *  @param {number} [borderSize] - Width of the border sections
  *  @param {Color} [additiveColor] - Additive color
- *  @param {number} [extraSpace=.01] - Extra spacing adjustment
+ *  @param {number} [extraSpace] - Extra spacing adjustment
+ *  @param {number} [angle] - Angle to rotate by
  *  @param {boolean} [useWebGL=glEnable] - Use WebGL for rendering
  *  @param {boolean} [screenSpace] - Use screen space coordinates
  *  @param {CanvasRenderingContext2D} [context] - Canvas context to use
  *  @memberof DrawUtilities */
-function drawNineSlice(pos, size, startTile, color, borderSize=1, additiveColor, extraSpace=.01, useWebGL=glEnable, screenSpace, context)
+function drawNineSlice(pos, size, startTile, color, borderSize=1, additiveColor, extraSpace=.05, angle=0, useWebGL=glEnable, screenSpace, context)
 {
     // setup nine slice tiles
     const centerTile = startTile.offset(startTile.size);
@@ -8783,26 +9530,27 @@ function drawNineSlice(pos, size, startTile, color, borderSize=1, additiveColor,
     const cornerSize = vec2(borderSize);
     const cornerOffset = size.scale(.5).subtract(cornerSize.scale(.5));
     const flip = screenSpace ? -1 : 1;
+    const rotateAngle = screenSpace ? -angle : angle;
 
     // center
-    drawTile(pos, centerSize, centerTile, color, 0, false, additiveColor, useWebGL, screenSpace, context);
-    for(let i=4; i--;)
+    drawTile(pos, centerSize, centerTile, color, angle, false, additiveColor, useWebGL, screenSpace, context);
+    for (let i=4; i--;)
     {
         // sides
         const horizontal = i%2;
-        const sidePos = cornerOffset.multiply(vec2(horizontal?i==1?1:-1:0, horizontal?0:i?-1:1));
+        const sidePos = cornerOffset.multiply(vec2(horizontal?i===1?1:-1:0, horizontal?0:i?-1:1));
         const sideSize = vec2(horizontal ? borderSize : centerSize.x, horizontal ? centerSize.y : borderSize);
-        const sideTile = centerTile.offset(startTile.size.multiply(vec2(i==1?1:i==3?-1:0,i==0?-flip:i==2?flip:0)))
-        drawTile(pos.add(sidePos), sideSize, sideTile, color, 0, false, additiveColor, useWebGL, screenSpace, context);
+        const sideTile = centerTile.offset(startTile.size.multiply(vec2(i===1?1:i===3?-1:0,i===0?-flip:i===2?flip:0)))
+        drawTile(pos.add(sidePos.rotate(rotateAngle)), sideSize, sideTile, color, angle, false, additiveColor, useWebGL, screenSpace, context);
     }
-    for(let i=4; i--;)
+    for (let i=4; i--;)
     {
         // corners
         const flipX = i>1;
         const flipY = i && i<3;
         const cornerPos = cornerOffset.multiply(vec2(flipX?-1:1, flipY?-1:1));
         const cornerTile = centerTile.offset(startTile.size.multiply(vec2(flipX?-1:1,flipY?flip:-flip)));
-        drawTile(pos.add(cornerPos), cornerSize, cornerTile, color, 0, false, additiveColor, useWebGL, screenSpace, context);
+        drawTile(pos.add(cornerPos.rotate(rotateAngle)), cornerSize, cornerTile, color, angle, false, additiveColor, useWebGL, screenSpace, context);
     }
 }
 
@@ -8811,28 +9559,30 @@ function drawNineSlice(pos, size, startTile, color, borderSize=1, additiveColor,
  *  @param {Vector2} pos - Screen space position
  *  @param {Vector2} size - Screen space size
  *  @param {TileInfo} startTile - Starting tile for the three-slice pattern
- *  @param {number} [borderSize=1] - Width of the border sections
- *  @param {number} [extraSpace=.01] - Extra spacing adjustment
+ *  @param {number} [borderSize] - Width of the border sections
+ *  @param {number} [extraSpace] - Extra spacing adjustment
+ *  @param {number} [angle] - Angle to rotate by
  *  @memberof DrawUtilities */
-function drawThreeSliceScreen(pos, size, startTile, borderSize=32, extraSpace=1)
+function drawThreeSliceScreen(pos, size, startTile, borderSize=32, extraSpace=2, angle=0)
 {
-    drawThreeSlice(pos, size, startTile, WHITE, borderSize, BLACK, extraSpace, false, true, overlayContext);
+    drawThreeSlice(pos, size, startTile, WHITE, borderSize, BLACK, extraSpace, angle, false, true, overlayContext);
 }
 
 /** Draw a scalable three-slice UI element in world space
- *  This function can apply color and additive color if webgl is enabled
+ *  This function can apply color and additive color if WebGL is enabled
  *  @param {Vector2} pos - World space position
  *  @param {Vector2} size - World space size
  *  @param {TileInfo} startTile - Starting tile for the three-slice pattern
  *  @param {Color} [color] - Color to modulate with
- *  @param {number} [borderSize=1] - Width of the border sections
+ *  @param {number} [borderSize] - Width of the border sections
  *  @param {Color} [additiveColor] - Additive color
- *  @param {number} [extraSpace=.01] - Extra spacing adjustment
+ *  @param {number} [extraSpace] - Extra spacing adjustment
+ *  @param {number} [angle] - Angle to rotate by
  *  @param {boolean} [useWebGL=glEnable] - Use WebGL for rendering
  *  @param {boolean} [screenSpace] - Use screen space coordinates
  *  @param {CanvasRenderingContext2D} [context] - Canvas context to use
  *  @memberof DrawUtilities */
-function drawThreeSlice(pos, size, startTile, color, borderSize=1, additiveColor, extraSpace=.01, useWebGL=glEnable, screenSpace, context)
+function drawThreeSlice(pos, size, startTile, color, borderSize=1, additiveColor, extraSpace=.05, angle=0, useWebGL=glEnable, screenSpace, context)
 {
     // setup three slice tiles
     const cornerTile = startTile.frame(0);
@@ -8842,25 +9592,26 @@ function drawThreeSlice(pos, size, startTile, color, borderSize=1, additiveColor
     const cornerSize = vec2(borderSize);
     const cornerOffset = size.scale(.5).subtract(cornerSize.scale(.5));
     const flip = screenSpace ? -1 : 1;
+    const rotateAngle = screenSpace ? -angle : angle;
 
     // center
-    drawTile(pos, centerSize, centerTile, color, 0, false, additiveColor, useWebGL, screenSpace, context);
-    for(let i=4; i--;)
+    drawTile(pos, centerSize, centerTile, color, angle, false, additiveColor, useWebGL, screenSpace, context);
+    for (let i=4; i--;)
     {
         // sides
-        const angle = i*PI/2;
+        const a = angle + i*PI/2;
         const horizontal = i%2;
-        const sidePos = cornerOffset.multiply(vec2(horizontal?i==1?1:-1:0, horizontal?0:i?-flip:flip));
+        const sidePos = cornerOffset.multiply(vec2(horizontal?i===1?1:-1:0, horizontal?0:i?-flip:flip));
         const sideSize = vec2(horizontal ? centerSize.y : centerSize.x, borderSize);
-        drawTile(pos.add(sidePos), sideSize, sideTile, color, angle, false, additiveColor, useWebGL, screenSpace, context);
+        drawTile(pos.add(sidePos.rotate(rotateAngle)), sideSize, sideTile, color, a, false, additiveColor, useWebGL, screenSpace, context);
     }
-    for(let i=4; i--;)
+    for (let i=4; i--;)
     {
         // corners
-        const angle = i*PI/2;
+        const a = angle + i*PI/2;
         const flipX = !i || i>2;
         const flipY = i>1;
         const cornerPos = cornerOffset.multiply(vec2(flipX?-1:1, flipY?-flip:flip));
-        drawTile(pos.add(cornerPos), cornerSize, cornerTile, color, angle, false, additiveColor, useWebGL, screenSpace, context);
+        drawTile(pos.add(cornerPos.rotate(rotateAngle)), cornerSize, cornerTile, color, a, false, additiveColor, useWebGL, screenSpace, context);
     }
 }