littlejsengine 1.13.4 → 1.14.4

package/dist/littlejs.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.4';
+const engineVersion = '1.14.4';
 
 /** 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,15 +242,14 @@ 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);
                 overlayContext.fillStyle = '#fff';
                 overlayContext.fillText(text, mainCanvas.width-2, 2);
             }
-            if (debug || showWatermark)
-                drawCount = 0;
+            drawCount = 0;
         }
         requestAnimationFrame(engineUpdate);
     }
@@ -258,13 +257,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,16 +273,21 @@ 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;
 
         // save canvas size
         mainCanvasSize = vec2(mainCanvas.width, mainCanvas.height);
+
+        // set default line join and cap
+        const lineJoin = 'round', lineCap = 'round';
+        mainContext.lineJoin = overlayContext.lineJoin = lineJoin;
+        mainContext.lineCap  = overlayContext.lineCap  = lineCap;
     }
 
     // wait for gameInit to load
@@ -296,15 +300,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
         '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);
@@ -321,7 +324,7 @@ 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;
@@ -330,17 +333,18 @@ async function engineInit(gameInit, gameUpdate, gameUpdatePost, gameRender, game
     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();
@@ -355,7 +359,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;
@@ -367,7 +371,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}`);
@@ -599,7 +603,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);
 
@@ -648,10 +652,10 @@ function drawEngineSplashScreen(t)
         x[j?'strokeText':'fillText'](s[i],X+w/2,55.5,17*p);
         X += w;
     }
-    
+
     x.restore();
 }
-/** 
+/**
  * LittleJS Debug System
  * - Press Esc to show debug overlay with mouse pick
  * - Number keys toggle debug functions
@@ -704,10 +708,10 @@ let debugPrimitives = [], debugPhysics = false, debugRaycast = false, debugParti
 // Debug helper functions
 
 /** Asserts if the expression is false, does not do anything in release builds
- *  @param {boolean} assert 
+ *  @param {boolean} assert
  *  @param {...Object} [output] - error message output
  *  @memberof Debug */
-function ASSERT(assert, ...output) 
+function ASSERT(assert, ...output)
 {
     if (enableAsserts)
         console.assert(assert, ...output);
@@ -723,9 +727,9 @@ function ASSERT(assert, ...output)
  *  @memberof Debug */
 function debugRect(pos, size=vec2(), color='#fff', time=0, angle=0, fill=false)
 {
-    if (typeof size == 'number')
+    if (typeof size === 'number')
         size = vec2(size); // allow passing in floats
-    ASSERT(typeof color == 'string', 'pass in css color strings'); 
+    ASSERT(typeof color === 'string', 'pass in css color strings');
     debugPrimitives.push({pos, size, color, time:new Timer(time), angle, fill});
 }
 
@@ -739,7 +743,7 @@ function debugRect(pos, size=vec2(), color='#fff', time=0, angle=0, fill=false)
  *  @memberof Debug */
 function debugPoly(pos, points, color='#fff', time=0, angle=0, fill=false)
 {
-    ASSERT(typeof color == 'string', 'pass in css color strings'); 
+    ASSERT(typeof color === 'string', 'pass in css color strings');
     debugPrimitives.push({pos, points, color, time:new Timer(time), angle, fill});
 }
 
@@ -752,7 +756,7 @@ function debugPoly(pos, points, color='#fff', time=0, angle=0, fill=false)
  *  @memberof Debug */
 function debugCircle(pos, radius=0, color='#fff', time=0, fill=false)
 {
-    ASSERT(typeof color == 'string', 'pass in css color strings'); 
+    ASSERT(typeof color === 'string', 'pass in css color strings');
     debugPrimitives.push({pos, size:radius, color, time:new Timer(time), angle:0, fill});
 }
 
@@ -764,7 +768,7 @@ function debugCircle(pos, radius=0, color='#fff', time=0, fill=false)
  *  @memberof Debug */
 function debugPoint(pos, color, time, angle)
 {
-    ASSERT(typeof color == 'string', 'pass in css color strings'); 
+    ASSERT(typeof color === 'string', 'pass in css color strings');
     debugRect(pos, undefined, color, time, angle);
 }
 
@@ -772,13 +776,13 @@ function debugPoint(pos, color, time, angle)
  *  @param {Vector2} posA
  *  @param {Vector2} posB
  *  @param {string}  [color]
- *  @param {number}  [thickness]
+ *  @param {number}  [width]
  *  @param {number}  [time]
  *  @memberof Debug */
-function debugLine(posA, posB, color, thickness=.1, time)
+function debugLine(posA, posB, color, width=.1, time)
 {
     const halfDelta = vec2((posB.x - posA.x)/2, (posB.y - posA.y)/2);
-    const size = vec2(thickness, halfDelta.length()*2);
+    const size = vec2(width, halfDelta.length()*2);
     debugRect(posA.add(halfDelta), size, color, time, halfDelta.angle(), true);
 }
 
@@ -792,11 +796,11 @@ function debugLine(posA, posB, color, thickness=.1, time)
 function debugOverlap(posA, sizeA, posB, sizeB, color)
 {
     const minPos = vec2(
-        min(posA.x - sizeA.x/2, posB.x - sizeB.x/2), 
+        min(posA.x - sizeA.x/2, posB.x - sizeB.x/2),
         min(posA.y - sizeA.y/2, posB.y - sizeB.y/2)
     );
     const maxPos = vec2(
-        max(posA.x + sizeA.x/2, posB.x + sizeB.x/2), 
+        max(posA.x + sizeA.x/2, posB.x + sizeB.x/2),
         max(posA.y + sizeA.y/2, posB.y + sizeB.y/2)
     );
     debugRect(minPos.lerp(maxPos,.5), maxPos.subtract(minPos), color);
@@ -813,7 +817,7 @@ function debugOverlap(posA, sizeA, posB, sizeB, color)
  *  @memberof Debug */
 function debugText(text, pos, size=1, color='#fff', time=0, angle=0, font='monospace')
 {
-    ASSERT(typeof color == 'string', 'pass in css color strings'); 
+    ASSERT(typeof color === 'string', 'pass in css color strings');
     debugPrimitives.push({text, pos, size, color, time:new Timer(time), angle, font});
 }
 
@@ -825,7 +829,7 @@ function debugClear() { debugPrimitives = []; }
  *  @memberof Debug */
 function debugScreenshot() { debugTakeScreenshot = 1; }
 
-/** Save a canvas to disk 
+/** Save a canvas to disk
  *  @param {HTMLCanvasElement|OffscreenCanvas} canvas
  *  @param {string} [filename]
  *  @param {string} [type]
@@ -846,7 +850,7 @@ function debugSaveCanvas(canvas, filename='screenshot', type='image/png')
         debugSaveDataURL(canvas.toDataURL(type), filename);
 }
 
-/** Save a text file to disk 
+/** Save a text file to disk
  *  @param {string}     text
  *  @param {string}     [filename]
  *  @param {string}     [type]
@@ -854,7 +858,7 @@ function debugSaveCanvas(canvas, filename='screenshot', type='image/png')
 function debugSaveText(text, filename='text', type='text/plain')
 { debugSaveDataURL(URL.createObjectURL(new Blob([text], {'type':type})), filename); }
 
-/** Save a data url to disk 
+/** Save a data url to disk
  *  @param {string}     dataURL
  *  @param {string}     filename
  *  @memberof Debug */
@@ -973,7 +977,7 @@ function debugRender()
     {
         const saveContext = mainContext;
         mainContext = overlayContext;
-        
+
         // draw red rectangle around screen
         const cameraSize = getCameraSize();
         debugRect(cameraPos, cameraSize.subtract(vec2(.1)), '#f008');
@@ -1023,14 +1027,14 @@ function debugRender()
             overlayContext.scale(1, p.text ? 1 : -1);
             overlayContext.fillStyle = overlayContext.strokeStyle = p.color;
 
-            if (p.text != undefined)
+            if (p.text !== undefined)
             {
                 overlayContext.font = p.size*cameraScale + 'px '+ p.font;
                 overlayContext.textAlign = 'center';
                 overlayContext.textBaseline = 'middle';
                 overlayContext.fillText(p.text, 0, 0);
             }
-            else if (p.points != undefined)
+            else if (p.points !== undefined)
             {
                 // poly
                 overlayContext.beginPath();
@@ -1043,13 +1047,13 @@ function debugRender()
                 p.fill && overlayContext.fill();
                 overlayContext.stroke();
             }
-            else if (p.size == 0 || p.size.x === 0 && p.size.y === 0)
+            else if (p.size === 0 || p.size.x === 0 && p.size.y === 0)
             {
                 // point
                 overlayContext.fillRect(-pointSize/2, -1, pointSize, 3);
                 overlayContext.fillRect(-1, -pointSize/2, 3, pointSize);
             }
-            else if (p.size.x != undefined)
+            else if (p.size.x !== undefined)
             {
                 // rect
                 const s = p.size.scale(cameraScale).floor();
@@ -1065,14 +1069,14 @@ function debugRender()
                 p.fill && overlayContext.fill();
                 overlayContext.stroke();
             }
-            
+
             overlayContext.restore();
         });
 
         // remove expired primitives
         debugPrimitives = debugPrimitives.filter(r=>r.time<0);
     }
-    
+
     if (debugObject)
     {
         const saveContext = mainContext;
@@ -1081,8 +1085,8 @@ function debugRender()
         raycastHitPos && drawRect(raycastHitPos.floor().add(vec2(.5)), vec2(1), rgb(0,1,1,.3));
         drawLine(mousePos, debugObject.pos, .1, raycastHitPos ? rgb(1,0,0,.5) : rgb(0,1,0,.5));
 
-        const debugText = 'mouse pos = ' + mousePos + 
-            '\nmouse collision = ' + tileCollisionGetData(mousePos) + 
+        const debugText = 'mouse pos = ' + mousePos +
+            '\nmouse collision = ' + tileCollisionGetData(mousePos) +
             '\n\n--- object info ---\n' +
             debugObject.toString();
         drawTextScreen(debugText, mousePosScreen, 24, rgb(), .05, undefined, 'center', 'monospace');
@@ -1104,7 +1108,7 @@ function debugRender()
         let x = 9, y = 0, h = lineHeight;
         if (debugOverlay)
         {
-            overlayContext.fillText(engineName, x, y += h/2 );
+            overlayContext.fillText(`${engineName} v${engineVersion}`, x, y += h/2 );
             overlayContext.fillText('Time: ' + formatTime(time), x, y += h);
             overlayContext.fillText('FPS: ' + averageFPS.toFixed(1), x, y += h);
             overlayContext.fillText('Objects: ' + engineObjects.length, x, y += h);
@@ -1148,7 +1152,7 @@ function debugRender()
             overlayContext.fillText(debugRaycast ? 'Debug Raycasts' : '', x, y += h);
             overlayContext.fillText(debugGamepads ? 'Debug Gamepads' : '', x, y += h);
         }
-    
+
         overlayContext.restore();
     }
 }
@@ -1236,7 +1240,7 @@ function debugVideoCaptureUpdate()
 {
     if (!debugVideoCaptureIsActive())
         return; // not recording
-        
+
     // save the video frame
     combineCanvases();
     debugVideoCaptureTrack.requestFrame();
@@ -1317,7 +1321,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
@@ -1369,7 +1385,7 @@ 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 */
@@ -1384,8 +1400,8 @@ function nearestPowerOfTwo(value) { return 2**Math.ceil(Math.log2(value)); }
  *  @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;
 }
 
@@ -1440,7 +1456,7 @@ function isIntersecting(start, end, pos, size)
 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 */
@@ -1456,13 +1472,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); }
 
 ///////////////////////////////////////////////////////////////////////////////
 
@@ -1517,13 +1532,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
@@ -1550,8 +1565,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);
     }
@@ -1600,28 +1615,26 @@ 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
- */
-function isVector2(v) { return v instanceof Vector2; }
+ * @memberof Utilities */
+function isVector2(v) { return v instanceof Vector2 && v.isValid(); }
 
 // vector2 asserts
-function ASSERT_VECTOR2_VALID(v) { ASSERT(isVector2(v) && v.isValid(), 'Vector2 is invalid.', v); }
+function ASSERT_VECTOR2_VALID(v) { ASSERT(isVector2(v), 'Vector2 is invalid.', v); }
 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
@@ -1745,7 +1758,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);
@@ -1760,7 +1773,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);
     }
 
@@ -1772,9 +1785,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);
     }
 
@@ -1826,7 +1839,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)
@@ -1845,7 +1858,7 @@ class Vector2
 
 ///////////////////////////////////////////////////////////////////////////////
 
-/** 
+/**
  * Create a color object with RGBA values, white by default
  * @param {number} [r=1] - red
  * @param {number} [g=1] - green
@@ -1856,29 +1869,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
- */
-function isColor(c) { return c instanceof Color; }
+ * @memberof Utilities */
+function isColor(c) { return c instanceof Color && c.isValid(); }
 
 // color asserts
-function ASSERT_COLOR_VALID(c) { ASSERT(isColor(c) && c.isValid(), 'Color is invalid.', c); }
+function ASSERT_COLOR_VALID(c) { ASSERT(isColor(c), 'Color is invalid.', c); }
 
-/** 
+/**
  * Color object (red, green, blue, alpha) with some helpful functions
  * @example
  * let a = new Color;              // white
@@ -1950,7 +1961,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
@@ -1967,9 +1978,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));
     }
 
@@ -2009,15 +2020,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];
@@ -2027,7 +2038,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);
@@ -2043,47 +2054,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;
@@ -2104,7 +2115,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}
@@ -2219,11 +2230,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(); }
@@ -2259,7 +2270,7 @@ let cameraScale = 32;
 // Display settings
 
 /** Enable applying color to tiles when using canvas2d
- *  - This is slower but should be the same as webgl rendering
+ *  - This is slower but should be the same as WebGL rendering
  *  @type {boolean}
  *  @default
  *  @memberof Settings */
@@ -2305,14 +2316,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 */
@@ -2321,13 +2331,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
 
@@ -2409,13 +2424,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 */
@@ -2423,7 +2438,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 */
@@ -2431,7 +2445,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 */
@@ -2534,7 +2547,7 @@ function setCameraAngle(angle) { cameraAngle = angle; }
 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
+ *  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
@@ -2570,8 +2583,8 @@ function setCanvasPixelated(pixelated)
  *  @param {boolean} pixelated
  *  @memberof Settings */
 function setOverlayCanvasPixelated(pixelated)
-{ 
-    overlayCanvasPixelated = pixelated; 
+{
+    overlayCanvasPixelated = pixelated;
     if (overlayCanvas)
         overlayCanvas.style.imageRendering = pixelated ? 'pixelated' : '';
 }
@@ -2586,7 +2599,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; }
@@ -2596,16 +2609,21 @@ 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;
-    if (glCanvas) // hide glCanvas if webgl is disabled
+    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
  *  @memberof Settings */
@@ -2636,7 +2654,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; }
@@ -2760,11 +2778,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
@@ -2787,7 +2805,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
 {
@@ -2802,12 +2820,12 @@ class EngineObject
     constructor(pos=vec2(), size=vec2(1), tileInfo, angle=0, color=new Color, renderOrder=0)
     {
         // check passed in params
-        ASSERT(isVector2(pos) && pos.isValid(), 'object pos should be a vec2');
-        ASSERT(isVector2(size) && size.isValid(), 'object size should be a vec2');
+        ASSERT(isVector2(pos), 'object pos should be a vec2');
+        ASSERT(isVector2(size), '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(isColor(color) && color.isValid(), 'object color should be a valid rgba color');
-        ASSERT(typeof renderOrder == 'number', 'object renderOrder should be a number');
+        ASSERT(typeof angle === 'number' && isFinite(angle), 'object angle should be a number');
+        ASSERT(isColor(color), 'object color should be a valid rgba color');
+        ASSERT(typeof renderOrder === 'number', 'object renderOrder should be a number');
 
         /** @property {Vector2} - World space position of the object */
         this.pos = pos.copy();
@@ -2875,7 +2893,7 @@ class EngineObject
         // add to list of objects
         engineObjects.push(this);
     }
-    
+
     /** Update the object transform, called automatically by engine even when paused */
     updateTransforms()
     {
@@ -2944,7 +2962,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
@@ -2967,7 +2985,7 @@ class EngineObject
                     this.velocity = this.velocity.add(velocity);
                     if (o.mass) // push away if not fixed
                         o.velocity = o.velocity.subtract(velocity);
-                        
+
                     debugPhysics && debugOverlap(this.pos, this.size, o.pos, o.size, '#f00');
                     continue;
                 }
@@ -2978,7 +2996,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
@@ -3066,7 +3084,7 @@ class EngineObject
                         {
                             // move to previous position
                             this.pos.y = oldPos.y;
-                            this.groundObject = undefined; 
+                            this.groundObject = undefined;
                         }
                     }
                     if (blockedLayerX)
@@ -3080,20 +3098,20 @@ class EngineObject
             }
         }
     }
-       
+
     /** 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);
@@ -3119,7 +3137,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
@@ -3138,16 +3156,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; }
@@ -3169,7 +3190,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;
     }
@@ -3215,7 +3236,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);
@@ -3225,24 +3246,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
  */
@@ -3287,7 +3308,7 @@ let workCanvas;
  *  @memberof Draw */
 let workContext;
 
-/** The size of the main canvas (and other secondary canvases) 
+/** The size of the main canvas (and other secondary canvases)
  *  @type {Vector2}
  *  @memberof Draw */
 let mainCanvasSize = vec2();
@@ -3297,12 +3318,14 @@ let mainCanvasSize = vec2();
  *  @memberof Draw */
 let textureInfos = [];
 
-// Keep track of how many draw calls there were each frame for debugging
+/** Keeps track of how many draw calls there were each frame for debugging
+ *  @type {number}
+ *  @memberof Draw */
 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
@@ -3316,15 +3339,14 @@ let drawCount;
  * 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);
@@ -3333,24 +3355,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
@@ -3388,14 +3410,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)
@@ -3413,7 +3435,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)
     {
@@ -3423,7 +3445,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;
     }
 
@@ -3439,28 +3461,25 @@ class TextureInfo
 // 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(isVector2(pos), 'drawTile pos should be a vec2');
+    ASSERT(isVector2(size), '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');
-
-    if (color.a <= 0 && (!additiveColor || additiveColor.a <= 0) || !size.x || !size.y)
-        return; // completely invisible, skip render
+    ASSERT(!context || !useWebGL, 'context only supported in canvas 2D mode');
 
     const textureInfo = tileInfo && tileInfo.textureInfo;
     if (useWebGL)
@@ -3484,28 +3503,28 @@ 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
     {
         // normal canvas 2D rendering method (slower)
-        showWatermark && ++drawCount;
+        ++drawCount;
         size = new Vector2(size.x, -size.y); // fix upside down sprites
         drawCanvas2D(pos, size, angle, mirror, (context)=>
         {
@@ -3537,14 +3556,128 @@ function drawTile(pos, size=new Vector2(1), tileInfo, color=new Color,
  *  @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 a rect centered on pos with a gradient from top to bottom
+ *  @param {Vector2} pos
+ *  @param {Vector2} [size=(1,1)]
+ *  @param {Color}   [colorTop=(1,1,1,1)]
+ *  @param {Color}   [colorBottom=(0,0,0,1)]
+ *  @param {number}  [angle]
+ *  @param {boolean} [useWebGL=glEnable]
+ *  @param {boolean} [screenSpace]
+ *  @param {CanvasRenderingContext2D|OffscreenCanvasRenderingContext2D} [context]
+ *  @memberof Draw */
+function drawRectGradient(pos, size, colorTop=WHITE, colorBottom=BLACK, angle=0, useWebGL=glEnable, screenSpace=false, context)
+{
+    ASSERT(isVector2(pos), 'drawRectGradient pos should be a vec2');
+    ASSERT(isVector2(size), 'drawRectGradient size should be a vec2');
+    ASSERT(isColor(colorTop) && isColor(colorBottom), 'drawRectGradient color is invalid');
+    ASSERT(isNumber(angle), 'drawRectGradient angle should be a number');
+    ASSERT(!context || !useWebGL, 'context only supported in canvas 2D mode');
+    if (useWebGL)
+    {
+        if (screenSpace)
+        {
+            // convert to world space
+            pos = screenToWorld(pos);
+            size = size.scale(1/cameraScale);
+        }
+        // build 4 corner points for the rectangle
+        const points = [], colors = [];
+        const halfSizeX = size.x/2, halfSizeY = size.y/2;
+        const colorTopInt = colorTop.rgbaInt();
+        const colorBottomInt = colorBottom.rgbaInt();
+        const c = Math.cos(-angle), s = Math.sin(-angle);
+        for (let i=4; i--;)
+        {
+            const x = i & 1 ? halfSizeX : -halfSizeX;
+            const y = i & 2 ? halfSizeY : -halfSizeY;
+            const rx = x * c - y * s;
+            const ry = x * s + y * c;
+            const color = i & 2 ? colorTopInt : colorBottomInt;
+            points.push(vec2(pos.x + rx, pos.y + ry));
+            colors.push(color);
+        }
+        glDrawColoredPoints(points, colors);
+    }
+    else
+    {
+        // normal canvas 2D rendering method (slower)
+        ++drawCount;
+        size = new Vector2(size.x, -size.y); // fix upside down sprites
+        drawCanvas2D(pos, size, angle, false, (context)=>
+        {
+            // if no tile info, use untextured rect
+            const gradient = context.createLinearGradient(0, -.5, 0, .5);
+            gradient.addColorStop(0, colorTop.toString());
+            gradient.addColorStop(1, colorBottom.toString());
+            context.fillStyle = gradient;
+            context.fillRect(-.5, -.5, 1, 1);
+        }, screenSpace, context);
+    }
+}
+
+/** Draw connected lines between a series of points
+ *  @param {Array<Vector2>} points
+ *  @param {number}  [width]
+ *  @param {Color}   [color=(1,1,1,1)]
+ *  @param {boolean} [wrap] - Should the last point connect to the first?
+ *  @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 drawLineList(points, width=.1, color, wrap=false, pos=vec2(), angle=0, useWebGL=glEnable, screenSpace, context)
+{
+    ASSERT(Array.isArray(points), 'drawLineList points should be an array');
+    ASSERT(isNumber(width), 'drawLineList width should be a number');
+    ASSERT(isColor(color), 'drawLineList color is invalid');
+    ASSERT(isVector2(pos), 'drawLineList pos should be a vec2');
+    ASSERT(isNumber(angle), 'drawLineList angle should be a number');
+    ASSERT(!context || !useWebGL, 'context only supported in canvas 2D mode');
+    if (useWebGL)
+    {
+        let scale = 1;
+        if (screenSpace)
+        {
+            // convert to world space
+            pos = screenToWorld(pos);
+            scale = 1/cameraScale;
+        }
+        glDrawOutlineTransform(points, color.rgbaInt(), width, pos.x, pos.y, scale, scale, angle, wrap);
+    }
+    else
+    {
+        // normal canvas 2D rendering method (slower)
+        ++drawCount;
+        drawCanvas2D(pos, vec2(1), angle, false, (context)=>
+        {
+            context.strokeStyle = color.toString();
+            context.lineWidth = width;
+            context.beginPath();
+            for (let i=0; i<points.length; ++i)
+            {
+                const point = points[i];
+                if (i)
+                    context.lineTo(point.x, point.y);
+                else
+                    context.moveTo(point.x, point.y);
+            }
+            if (wrap)
+                context.closePath();
+            context.stroke();
+        }, screenSpace, context);
+    }
 }
 
 /** Draw colored line between two points
  *  @param {Vector2} posA
  *  @param {Vector2} posB
- *  @param {number}  [thickness]
+ *  @param {number}  [width]
  *  @param {Color}   [color=(1,1,1,1)]
  *  @param {Vector2} [pos=(0,0)] - Offset to apply
  *  @param {number}  [angle] - Angle to rotate by
@@ -3552,15 +3685,43 @@ function drawRect(pos, size, color, angle, useWebGL, screenSpace, context)
  *  @param {boolean} [screenSpace]
  *  @param {CanvasRenderingContext2D|OffscreenCanvasRenderingContext2D} [context]
  *  @memberof Draw */
-function drawLine(posA, posB, thickness=.1, color, pos=vec2(), angle=0, useWebGL, screenSpace, context)
+function drawLine(posA, posB, width=.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);
+    const size = vec2(width, halfDelta.length()*2);
     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)
+{
+    ASSERT(isVector2(size), 'drawRegularPoly size should be a vec2');
+    ASSERT(isNumber(sides), 'drawRegularPoly sides should be a number');
+
+    // build regular polygon points
+    const points = [];
+    const sizeX = size.x/2, sizeY = size.y/2;
+    for (let i=sides; i--;)
+    {
+        const a = (i/sides)*PI*2;
+        points.push(vec2(Math.sin(a)*sizeX, Math.cos(a)*sizeY));
+    }
+    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 {Color}   [color=(1,1,1,1)]
@@ -3568,82 +3729,110 @@ function drawLine(posA, posB, thickness=.1, color, pos=vec2(), angle=0, useWebGL
  *  @param {Color}   [lineColor=(0,0,0,1)]
  *  @param {Vector2} [pos=(0,0)] - Offset to apply
  *  @param {number}  [angle] - Angle to rotate by
- *  @param {boolean} [useWebGL] - Webgl not supported
+ *  @param {boolean} [useWebGL=glEnable]
  *  @param {boolean} [screenSpace]
- *  @param {CanvasRenderingContext2D|OffscreenCanvasRenderingContext2D} [context=drawContext]
+ *  @param {CanvasRenderingContext2D|OffscreenCanvasRenderingContext2D} [context]
  *  @memberof Draw */
-function drawPoly(points, color=new Color, lineWidth=0, lineColor=BLACK, pos=vec2(), angle=0, useWebGL=false, screenSpace=false, context=drawContext)
+function drawPoly(points, color=WHITE, lineWidth=0, lineColor=BLACK, pos=vec2(), angle=0, useWebGL=glEnable, screenSpace=false, context=undefined)
 {
-    ASSERT(isVector2(pos) && pos.isValid(), 'drawPoly pos should be a vec2');
+    ASSERT(isVector2(pos), '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(!useWebGL, 'drawPoly webgl not supported');
-    drawCanvas2D(pos, vec2(1), angle, false, context=>
+    ASSERT(!context || !useWebGL, 'context only supported in canvas 2D mode');
+    if (useWebGL)
     {
-        context.beginPath();
-        for (const point of points)
-            context.lineTo(point.x, point.y);
-        context.closePath();
-        context.fillStyle = color.toString();
-        context.fill();
-        if (lineWidth)
+        let scale = 1;
+        if (screenSpace)
         {
-            context.strokeStyle = lineColor.toString();
-            context.lineWidth = lineWidth;
-            context.stroke();
+            // convert to world space
+            pos = screenToWorld(pos);
+            scale = 1/cameraScale;
         }
-    }, screenSpace, context);
+        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 {Vector2} [size=(1,1)]
+ *  @param {Vector2} [size=(1,1)] - Width and height diameter
  *  @param {Color}   [color=(1,1,1,1)]
  *  @param {number}  [angle]
  *  @param {number}  [lineWidth]
  *  @param {Color}   [lineColor=(0,0,0,1)]
- *  @param {boolean} [useWebGL] - Webgl not supported
+ *  @param {boolean} [useWebGL=glEnable]
  *  @param {boolean} [screenSpace]
- *  @param {CanvasRenderingContext2D|OffscreenCanvasRenderingContext2D} [context=drawContext]
+ *  @param {CanvasRenderingContext2D|OffscreenCanvasRenderingContext2D} [context]
  *  @memberof Draw */
-function drawEllipse(pos, size=vec2(1), color=new Color, angle=0, lineWidth=0, lineColor=BLACK, useWebGL=false, screenSpace=false, context=drawContext)
+function drawEllipse(pos, size=vec2(1), color=WHITE, angle=0, lineWidth=0, lineColor=BLACK, useWebGL=glEnable, screenSpace=false, context)
 {
-    ASSERT(isVector2(pos) && pos.isValid(), 'drawEllipse pos should be a vec2');
-    ASSERT(isVector2(size) && size.isValid(), 'drawEllipse size should be a vec2');
+    ASSERT(isVector2(pos), 'drawEllipse pos should be a vec2');
+    ASSERT(isVector2(size), '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(!useWebGL, 'drawEllipse webgl not supported');
-    drawCanvas2D(pos, vec2(1), angle, false, context=>
+    ASSERT(lineWidth >= 0 && lineWidth < size.x && lineWidth < size.y, 'drawEllipse invalid lineWidth');
+    ASSERT(!context || !useWebGL, 'context only supported in canvas 2D mode');
+    if (useWebGL)
     {
-        context.beginPath();
-        context.ellipse(0, 0, size.y, size.x, 0, 0, 9);
-        context.fillStyle = color.toString();
-        context.fill();
-        if (lineWidth)
+        // draw as a regular polygon
+        const sides = glCircleSides;
+        drawRegularPoly(pos, size, sides, color, lineWidth, lineColor, angle, useWebGL, screenSpace, context);
+    }
+    else
+    {
+        drawCanvas2D(pos, vec2(1), angle, false, context=>
         {
-            context.strokeStyle = lineColor.toString();
-            context.lineWidth = lineWidth;
-            context.stroke();   
-        }
-    }, screenSpace, context);
+            context.fillStyle = color.toString();
+            context.beginPath();
+            context.ellipse(0, 0, size.x/2, size.y/2, 0, 0, 9);
+            context.fill();
+            if (lineWidth)
+            {
+                context.strokeStyle = lineColor.toString();
+                context.lineWidth = lineWidth;
+                context.stroke();
+            }
+        }, screenSpace, context);
+    }
 }
 
 /** Draw colored circle using passed in point
  *  @param {Vector2} pos
- *  @param {number}  [radius=1]
+ *  @param {number}  [size=1] - Diameter
  *  @param {Color}   [color=(1,1,1,1)]
  *  @param {number}  [lineWidth=0]
  *  @param {Color}   [lineColor=(0,0,0,1)]
- *  @param {boolean} [useWebGL] - Webgl not supported
- *  @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=BLACK, useWebGL=false, screenSpace, context=drawContext)
-{ drawEllipse(pos, vec2(radius), color, 0, lineWidth, lineColor, useWebGL, screenSpace, context); }
+function drawCircle(pos, size=1, color=WHITE, lineWidth=0, lineColor=BLACK, useWebGL=glEnable, screenSpace=false, context)
+{
+    ASSERT(isNumber(size), 'drawCircle size should be a number');
+    drawEllipse(pos, vec2(size), color, 0, lineWidth, lineColor, useWebGL, screenSpace, context);
+}
 
 /** Draw directly to a 2d canvas context in world space
  *  @param {Vector2}  pos
@@ -3651,7 +3840,7 @@ function drawCircle(pos, radius=1, color=new Color, lineWidth=0, lineColor=BLACK
  *  @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)
@@ -3721,7 +3910,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=BLACK, 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();
@@ -3729,7 +3918,6 @@ function drawTextScreen(text, pos, size=1, color=new Color, lineWidth=0, lineCol
     context.textAlign = textAlign;
     context.font = size + 'px '+ font;
     context.textBaseline = 'middle';
-    context.lineJoin = 'round';
 
     const lines = (text+'').split('\n');
     let posY = pos.y;
@@ -3753,7 +3941,7 @@ function screenToWorld(screenPos)
 {
     let cameraPosRelativeX = (screenPos.x - mainCanvasSize.x/2 + .5) /  cameraScale;
     let cameraPosRelativeY = (screenPos.y - mainCanvasSize.y/2 + .5) / -cameraScale;
-    if (cameraAngle) 
+    if (cameraAngle)
     {
         // apply camera rotation
         const cos = Math.cos(-cameraAngle), sin = Math.sin(-cameraAngle);
@@ -3846,7 +4034,7 @@ function drawImageColor(context, image, sx, sy, sWidth, sHeight, dx, dy, dWidth,
     {
         // 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.drawImage(image, sx+sx2, sy+sy2, sWidth2, sHeight2, dx, dy, dWidth, dHeight);
         context.globalAlpha = 1;
     }
     else
@@ -3867,7 +4055,7 @@ function drawImageColor(context, image, sx, sy, sWidth, sHeight, dx, dy, dWidth,
             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); 
+            context.drawImage(workCanvas, sx2, sy2, sWidth2, sHeight2, dx, dy, dWidth, dHeight);
         }
         else
         {
@@ -3880,7 +4068,7 @@ function drawImageColor(context, image, sx, sy, sWidth, sHeight, dx, dy, dWidth,
             }
             workContext.putImageData(imageData, 0, 0);
             context.globalAlpha = color.a;
-            context.drawImage(workCanvas, sx2, sy2, sWidth2, sHeight2, dx, dy, dWidth, dHeight); 
+            context.drawImage(workCanvas, sx2, sy2, sWidth2, sHeight2, dx, dy, dWidth, dHeight);
             context.globalAlpha = 1;
         }
     }
@@ -3907,7 +4095,7 @@ function toggleFullscreen()
 }
 
 /** Set the cursor style
- *  @param {string}  cursorStyle - CSS cursor style (auto, none, crosshair, etc)
+ *  @param {string}  [cursorStyle] - CSS cursor style (auto, none, crosshair, etc)
  *  @memberof Draw */
 function setCursor(cursorStyle = 'auto')
 {
@@ -3919,7 +4107,7 @@ function setCursor(cursorStyle = 'auto')
 
 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
@@ -3927,9 +4115,9 @@ let engineFontImage;
  * @example
  * // use built in font
  * const font = new FontImage;
- * 
+ *
  * // draw text
- * font.drawTextScreen("LittleJS\nHello World!", vec2(200, 50));
+ * font.drawTextScreen('LittleJS\nHello World!', vec2(200, 50));
  */
 class FontImage
 {
@@ -3937,7 +4125,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)
     {
@@ -3951,7 +4138,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
@@ -3959,23 +4145,32 @@ 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]
+     */
+    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)
+    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;
@@ -3994,15 +4189,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();
     }
 }
-/** 
+/**
  * LittleJS Input System
  * - Tracks keyboard down, pressed, and released
  * - Tracks mouse buttons, position, and wheel
@@ -4018,10 +4212,10 @@ class FontImage
  *  @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
@@ -4030,10 +4224,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
@@ -4042,9 +4236,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);
 }
 
@@ -4166,7 +4360,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(); }
 
 ///////////////////////////////////////////////////////////////////////////////
@@ -4243,10 +4437,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)
     {
@@ -4254,9 +4448,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));
@@ -4299,8 +4493,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();
     }
@@ -4308,30 +4502,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;
         }
     }
 
@@ -4357,7 +4550,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--;)
             {
@@ -4373,14 +4566,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();
         }
     }
 }
@@ -4405,20 +4598,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 });
@@ -4427,8 +4613,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
@@ -4457,7 +4650,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;
     }
@@ -4469,7 +4662,7 @@ function touchInputInit()
         touchGamepadStick = vec2();
         touchGamepadButtons = [];
         isUsingGamepad = true;
-            
+
         const touching = e.touches.length;
         if (touching)
         {
@@ -4478,9 +4671,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;
             }
         }
@@ -4511,12 +4701,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;
     }
 }
 
@@ -4526,7 +4710,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)
@@ -4557,11 +4741,11 @@ function touchGamepadRender()
             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--;)
@@ -4596,8 +4780,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
@@ -4618,10 +4802,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
@@ -4629,14 +4824,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();
  */
@@ -4653,33 +4848,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;
@@ -4702,75 +4905,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();
  */
@@ -4799,29 +4982,205 @@ class SoundWave extends Sound
     *  @return {Promise<void>} */
     async loadSound(filename)
     {
-        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));
-        this.sampleRate = audioBuffer.sampleRate;
-        if (this.onloadCallback)
-            this.onloadCallback();
+        const response = await fetch(filename);
+        const arrayBuffer = await response.arrayBuffer();
+        const audioBuffer = await audioContext.decodeAudioData(arrayBuffer);
+        
+        // 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();
+    }
+}
+
+///////////////////////////////////////////////////////////////////////////////
+
+/** 
+ * 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
+{
+    /** 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();
+    }
+
+    /** 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;
     }
-}
 
-/** 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)
-{
-    if (!soundEnable || headlessMode) return;
+    /** Get the total duration of this sound
+     *  @return {number} - Total duration in seconds
+     */
+    getDuration() { return this.sound.getDuration() / this.rate; }
 
-    return new SoundWave(filename,0,0,0, s=>s.play(undefined, volume, 1, 1, loop));
+    /** Get source of this sound instance
+     *  @return {AudioBufferSourceNode}
+     */
+    getSource() { return this.source; }
 }
 
 ///////////////////////////////////////////////////////////////////////////////
@@ -4875,9 +5234,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;
 
@@ -4902,16 +5263,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;
 }
 
@@ -4919,18 +5284,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)
@@ -4954,11 +5314,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,
@@ -4966,11 +5325,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,
@@ -4982,19 +5341,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
 
@@ -5002,7 +5361,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;
 
@@ -5048,7 +5407,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
@@ -5060,14 +5419,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
@@ -5076,12 +5435,11 @@ 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
  * - Tile layers can be drawn to using their context with canvas2d
- * - Drawn directly to the main canvas without using WebGL
  * - Tile layers can also have collision with EngineObjects
  * @namespace TileCollision
  */
@@ -5090,9 +5448,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
@@ -5146,7 +5504,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)
@@ -5179,13 +5537,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);
@@ -5244,7 +5602,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));
@@ -5266,18 +5624,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();
@@ -5302,12 +5660,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
@@ -5341,8 +5699,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;
             }
@@ -5360,11 +5718,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)
@@ -5410,7 +5768,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;
@@ -5435,7 +5793,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 */
@@ -5447,26 +5805,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()
     {
@@ -5476,7 +5834,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
@@ -5512,7 +5870,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);
 
@@ -5523,7 +5881,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)
@@ -5538,9 +5896,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);
@@ -5553,7 +5911,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
@@ -5704,7 +6062,7 @@ class TileCollisionLayer extends TileLayer
         debugRaycast && debugLine(posStart, posEnd, '#00f', .02);
     }
 }
-/** 
+/**
  * LittleJS Particle System
  */
 
@@ -5721,7 +6079,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
  * );
  */
@@ -5729,35 +6087,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,
@@ -5779,7 +6137,7 @@ class ParticleEmitter extends EngineObject
         gravityScale = 0,
         particleConeAngle = PI,
         fadeRate = .1,
-        randomness = .2, 
+        randomness = .2,
         collideTiles = false,
         additive = false,
         randomColorLinear = true,
@@ -5790,13 +6148,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
@@ -5812,27 +6170,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;
@@ -5840,16 +6198,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()
     {
@@ -5873,7 +6231,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);
         }
     }
@@ -5883,7 +6241,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)
@@ -5908,7 +6266,7 @@ 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);
@@ -5953,38 +6311,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;
@@ -6024,7 +6382,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
@@ -6034,7 +6392,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)
@@ -6058,7 +6416,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;
@@ -6068,7 +6426,7 @@ class Particle extends EngineObject
         }
     }
 }
-/** 
+/**
  * LittleJS Medal System
  * - Tracks and displays medals
  * - Saves medals to local storage
@@ -6089,7 +6447,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)
 {
@@ -6104,7 +6462,7 @@ function medalsInit(saveName)
     {
         if (!medalsDisplayQueue.length)
             return;
-        
+
         // update first medal in queue
         const medal = medalsDisplayQueue[0];
         const time = timeReal - medalsDisplayTimeLast;
@@ -6119,7 +6477,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);
@@ -6135,43 +6493,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;
 
@@ -6196,7 +6554,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)
     {
@@ -6237,7 +6595,7 @@ class Medal
 
     /** 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)
     {
@@ -6247,14 +6605,14 @@ class Medal
         else
             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
- * - Will fall back to 2D canvas rendering if webgl is not supported
+ * - 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
@@ -6269,24 +6627,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 = 5e5;
 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;
 
 ///////////////////////////////////////////////////////////////////////////////
 
@@ -6307,11 +6668,11 @@ function glInit()
         return;
     }
 
-    // create the webgl canvas
+    // 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
@@ -6339,40 +6700,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()
 {
-    if (!glEnable || !glContext) return;
-
-    // set up the shader and canvas
-    glClearCanvas();
+    if (!glPolyMode)
+        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);
@@ -6381,26 +6761,87 @@ 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 transform 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 with additive blending off
+    glAdditive = glBatchAdditive = false;
+
+    // force it to enter instanced mode
+    glPolyMode = true;
+    glSetInstancedMode();
 }
 
 /** Clear the canvas and setup the viewport
@@ -6408,21 +6849,23 @@ function glPreRender()
 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);
+    glCanvas.width = drawCanvas.width;
+    glCanvas.height = drawCanvas.height;
+    glContext.viewport(0, 0, glCanvas.width, glCanvas.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 (!glContext || texture == glActiveTexture)
+    if (!glContext || texture === glActiveTexture)
         return;
 
     glFlush();
@@ -6435,8 +6878,8 @@ 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)
@@ -6455,8 +6898,8 @@ 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)
@@ -6504,7 +6947,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);
@@ -6512,7 +6955,6 @@ function glCreateTexture(image)
     return texture;
 }
 
-
 /** Deletes a WebGL texture
  *  @param {WebGLTexture} [texture]
  *  @memberof WebGL */
@@ -6540,18 +6982,25 @@ function glSetTextureData(texture, image)
  *  @memberof WebGL */
 function glFlush()
 {
-    if (!glEnable || !glContext || !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);
+        
+        const byteLength = glBatchCount * 
+            (glPolyMode ? gl_INDICES_PER_POLY_VERTEX : gl_INDICES_PER_INSTANCE);
+        glContext.bufferSubData(glContext.ARRAY_BUFFER, 0, glPositionData, 0, byteLength);
+        
+        // draw the batch
+        if (glPolyMode)
+            glContext.drawArrays(glContext.TRIANGLE_STRIP, 0, glBatchCount);
+        else
+            glContext.drawArraysInstanced(glContext.TRIANGLE_STRIP, 0, 4, glBatchCount);
+        drawCount += glBatchCount;
+        glBatchCount = 0;
+    }
     glBatchAdditive = glAdditive;
 }
 
@@ -6567,7 +7016,8 @@ function glCopyToContext(context)
     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)
@@ -6577,25 +7027,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;
@@ -6607,6 +7059,312 @@ 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<Vector2>} 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<Vector2>} 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
+ *  @param {boolean} [wrap] - Should the outline connect the first and last points
+ *  @memberof WebGL */
+function glDrawOutlineTransform(points, rgba, lineWidth, x, y, sx, sy, angle, wrap=true)
+{
+    const outlinePoints = glMakeOutline(points, lineWidth, wrap);
+    glDrawPointsTransform(outlinePoints, rgba, x, y, sx, sy, angle, false);
+}
+
+/** Add a list of points to the gl draw list
+ *  @param {Array<Vector2>} points - Array of Vector2 points in tri strip order
+ *  @param {number} rgba - Color 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
+    
+    // flush if there is not enough room or if different blend mode
+    const vertCount = points.length + 2;
+    if (glBatchCount+vertCount >= gl_MAX_POLY_VERTEXES || glBatchAdditive !== glAdditive)
+        glFlush();
+    glSetPolyMode();
+  
+    // setup triangle strip with degenerate verts at start and end
+    let offset = glBatchCount * gl_INDICES_PER_POLY_VERTEX;
+    for(let i = vertCount; i--;)
+    {
+        const j = clamp(i-1, 0, vertCount-3);
+        const point = points[j];
+        glPositionData[offset++] = point.x;
+        glPositionData[offset++] = point.y;
+        glColorData[offset++] = rgba;
+    }
+    glBatchCount += vertCount;
+}
+
+/** Add a list of colored points to the gl draw list
+ *  @param {Array<Vector2>} points - Array of Vector2 points in tri strip order
+ *  @param {Array<number>} pointColors - Array of 32-bit integer colors
+ *  @memberof WebGL */
+function glDrawColoredPoints(points, pointColors)
+{
+    if (!glEnable || points.length < 3)
+        return; // needs at least 3 points to have area
+    
+    // flush if there is not enough room or if different blend mode
+    const vertCount = points.length + 2;
+    if (glBatchCount+vertCount >= gl_MAX_POLY_VERTEXES || glBatchAdditive !== glAdditive)
+        glFlush();
+    glSetPolyMode();
+  
+    // setup triangle strip with degenerate verts at start and end
+    let offset = glBatchCount * gl_INDICES_PER_POLY_VERTEX;
+    for(let i = vertCount; i--;)
+    {
+        const j = clamp(i-1, 0, vertCount-3);
+        const point = points[j];
+        const color = pointColors[j];
+        glPositionData[offset++] = point.x;
+        glPositionData[offset++] = point.y;
+        glColorData[offset++] = color;
+    }
+    glBatchCount += vertCount;
+}
+
+// WebGL internal function to convert polygon to outline triangle strip
+function glMakeOutline(points, width, wrap=true)
+{
+    if (points.length < 2)
+        return [];
+    
+    const halfWidth = width / 2;
+    const strip = [];
+    const n = points.length;
+    const e = 1e-6;
+    const miterLimit = width*100;
+    for (let i = 0; i < n; i++)
+    {
+        // for each vertex, calculate normal based on adjacent edges
+        const prev = points[wrap ? (i - 1 + n) % n : max(i - 1, 0)];
+        const curr = points[i];
+        const next = points[wrap ? (i + 1) % n : min(i + 1, n - 1)];
+        
+        // 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, clamped to miterLimit
+                const miterLength = min(1 / dot, miterLimit);
+                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 && wrap)
+    {
+        // 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();
+
+    // check if point is inside triangle
+    const e = 1e-9;
+    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
@@ -6631,11 +7389,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); }
@@ -6727,7 +7485,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
      */
@@ -6950,16 +7708,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); }
 }
 
 ///////////////////////////////////////////////////////////////////////////////
@@ -6993,7 +7751,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++) {
@@ -7012,15 +7770,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;
@@ -7105,11 +7863,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 */
@@ -7129,16 +7887,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)
@@ -7152,7 +7910,7 @@ class UISystemPlugin
                     o.update();
                 }
                 else
-                    updateInvisible(o);
+                    updateInvisibleObject(o);
             }
             uiSystem.uiObjects.forEach(o=> o.parent || updateObject(o));
         }
@@ -7178,7 +7936,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;
@@ -7253,32 +8011,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;
@@ -7310,7 +8076,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;
     }
@@ -7363,7 +8129,7 @@ class UIObject
             this.mouseIsHeld = false;
         }
 
-        if (this.mouseIsOver != mouseWasOver)
+        if (this.mouseIsOver !== mouseWasOver)
             this.mouseIsOver ? this.onEnter() : this.onLeave();
     }
 
@@ -7374,7 +8140,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
@@ -7382,28 +8148,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() {}
 };
 
 ///////////////////////////////////////////////////////////////////////////////
@@ -7424,13 +8184,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()
     {
@@ -7457,13 +8217,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()
@@ -7489,22 +8250,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);
@@ -7522,13 +8281,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()
@@ -7538,14 +8302,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);
     }
 }
 
@@ -7568,43 +8342,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, 
@@ -7699,14 +8481,14 @@ class Box2dObject extends EngineObject
         if (this.tileInfo)
             super.render();
         else
-            this.drawFixtures(this.color, this.lineColor, 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);
     }
@@ -9174,7 +9956,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
@@ -9203,7 +9985,7 @@ class Box2dPlugin
      *  @param {Color} [lineColor]
      *  @param {number} [lineWidth]
      *  @param {CanvasRenderingContext2D} [context] */
-    drawFixture(fixture, pos, angle, color=WHITE, lineColor=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())
@@ -9213,20 +9995,20 @@ class Box2dPlugin
                 let points = [];
                 for (let i=shape.GetVertexCount(); i--;)
                     points.push(box2d.vec2From(shape.GetVertex(i)));
-                drawPoly(points, color, lineWidth, lineColor, pos, angle, false, false, context);
+                drawPoly(points, color, lineWidth, lineColor, pos, angle);
                 break;
             }
             case box2d.instance.b2Shape.e_circle:
             {
                 const radius = shape.get_m_radius();
-                drawCircle(pos, radius, color, lineWidth, lineColor, false, false, context);
+                drawCircle(pos, radius*2, 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());
-                drawLine(v1, v2, lineWidth, lineColor, pos, angle, false, false, context);
+                drawLine(v1, v2, lineWidth, lineColor, pos, angle);
                 break;
             }
         }
@@ -9305,7 +10087,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()
@@ -9368,14 +10152,14 @@ async function box2dInit()
         {
             color = getDebugColor(color);
             center = box2d.vec2FromPointer(center);
-            drawCircle(center, radius, CLEAR_WHITE, debugLineWidth, color, false, false, overlayContext);
+            drawCircle(center, radius*2, 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);
-            drawCircle(center, radius, color, debugLineWidth, color, false, false, overlayContext);
+            drawCircle(center, radius*2, color, debugLineWidth, color, false, false, overlayContext);
             drawLine(vec2(), axis, debugLineWidth, color, center, 0, false, false, overlayContext);
         };
         debugDraw.DrawTransform = function(transform)
@@ -9421,7 +10205,7 @@ function drawNineSliceScreen(pos, size, startTile, borderSize=32, extraSpace=2,
 }
 
 /** 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
@@ -9450,9 +10234,9 @@ function drawNineSlice(pos, size, startTile, color, borderSize=1, additiveColor,
     {
         // 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)))
+        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--;)
@@ -9481,7 +10265,7 @@ function drawThreeSliceScreen(pos, size, startTile, borderSize=32, extraSpace=2,
 }
 
 /** 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
@@ -9513,7 +10297,7 @@ function drawThreeSlice(pos, size, startTile, color, borderSize=1, additiveColor
         // sides
         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.rotate(rotateAngle)), sideSize, sideTile, color, a, false, additiveColor, useWebGL, screenSpace, context);
     }