littlejsengine 1.16.1 → 1.17.1

package/dist/littlejs.js

@@ -33,7 +33,7 @@ const engineName = 'LittleJS';
  *  @type {string}
  *  @default
  *  @memberof Engine */
-const engineVersion = '1.16.1';
+const engineVersion = '1.17.1';
 
 /** Frames per second to update
  *  @type {number}
@@ -272,33 +272,20 @@ async function engineInit(gameInit, gameUpdate, gameUpdatePost, gameRender, game
             if (!wasUpdated)
                 updateCanvas();
 
-            // render sort then render while removing destroyed objects
+            // render the game and objects
             enginePreRender();
             gameRender();
             engineObjects.sort((a,b)=> a.renderOrder - b.renderOrder);
             for (const o of engineObjects)
                 o.destroyed || o.render();
+
+            // post rendering
             gameRenderPost();
             pluginList.forEach(plugin=>plugin.render?.());
             inputRender();
             debugRender();
             glFlush();
-            debugVideoCaptureUpdate();
-
-            if (debugWatermark && !debugVideoCaptureIsActive())
-            {
-                // update fps display
-                mainContext.textAlign = 'right';
-                mainContext.textBaseline = 'top';
-                mainContext.font = '1em monospace';
-                mainContext.fillStyle = '#000';
-                const text = engineName + ' ' + 'v' + engineVersion + ' / '
-                    + drawCount + ' / ' + engineObjects.length + ' / ' + averageFPS.toFixed(1)
-                    + (glEnable ? ' GL' : ' 2D') ;
-                mainContext.fillText(text, mainCanvas.width-3, 3);
-                mainContext.fillStyle = '#fff';
-                mainContext.fillText(text, mainCanvas.width-2, 2);
-            }
+            debugRenderPost();
             drawCount = 0;
         }
     }
@@ -333,7 +320,7 @@ async function engineInit(gameInit, gameUpdate, gameUpdatePost, gameRender, game
             
             // responsive aspect ratio with native resolution
             const innerAspect = innerWidth / innerHeight;
-            ASSERT(canvasMinAspect <= canvasMaxAspect); 
+            ASSERT(canvasMinAspect <= canvasMaxAspect);
             if (canvasMaxAspect && innerAspect > canvasMaxAspect)
             {
                 // full height
@@ -364,15 +351,9 @@ async function engineInit(gameInit, gameUpdate, gameUpdatePost, gameRender, game
         mainContext.lineJoin = 'round';
         mainContext.lineCap  = 'round';
     }
-
-    // wait for gameInit to load
-    async function startEngine()
-    {
-        await gameInit();
-        engineUpdate();
-    }
-    if (headlessMode)
-        return startEngine();
+    
+    // skip setup if headless
+    if (headlessMode) return startEngine();
 
     // setup webgl
     glInit(rootElement);
@@ -387,7 +368,7 @@ async function engineInit(gameInit, gameUpdate, gameUpdatePost, gameRender, game
         'touch-action:none;' +        // prevent mobile pinch to resize
         '-webkit-touch-callout:none'; // compatibility for ios
     rootElement.style.cssText = styleRoot;
-    drawCanvas = mainCanvas = rootElement.appendChild(document.createElement('canvas'));
+    mainCanvas = rootElement.appendChild(document.createElement('canvas'));
     drawContext = mainContext = mainCanvas.getContext('2d');
 
     // init stuff and start engine
@@ -396,7 +377,7 @@ async function engineInit(gameInit, gameUpdate, gameUpdatePost, gameRender, game
     debugInit();
 
     // setup canvases
-    // transform way is still more reliable then flexbox or grid
+    // transform way is still more reliable than flexbox or grid
     const styleCanvas = 'position:absolute;'+ // allow canvases to overlap
         'top:50%;left:50%;transform:translate(-50%,-50%)'; // center on screen
     mainCanvas.style.cssText = styleCanvas;
@@ -441,6 +422,9 @@ async function engineInit(gameInit, gameUpdate, gameUpdatePost, gameRender, game
         }));
     }
 
+    // load engine font image
+    promises.push(fontImageInit());
+
     if (showSplashScreen)
     {
         // draw splash screen
@@ -452,7 +436,7 @@ async function engineInit(gameInit, gameUpdate, gameUpdatePost, gameRender, game
             function updateSplash()
             {
                 inputClear();
-                drawEngineSplashScreen(t+=.01);
+                drawEngineLogo(t+=.01);
                 t>1 ? resolve() : setTimeout(updateSplash, 16);
             }
         }));
@@ -462,171 +446,12 @@ async function engineInit(gameInit, gameUpdate, gameUpdatePost, gameRender, game
     await Promise.all(promises);
     return startEngine();
 
-    ///////////////////////////////////////////////////////////////////////////
-    // LittleJS Splash Screen
-    function drawEngineSplashScreen(t)
+    async function startEngine()
     {
-        const x = mainContext;
-        const w = mainCanvas.width = innerWidth;
-        const h = mainCanvas.height = innerHeight;
-
-        {
-            // background
-            const p3 = percent(t, 1, .8);
-            const p4 = percent(t, 0, .5);
-            const g = x.createRadialGradient(w/2,h/2,0,w/2,h/2,hypot(w,h)*.7);
-            g.addColorStop(0,hsl(0,0,lerp(0,p3/2,p4),p3).toString());
-            g.addColorStop(1,hsl(0,0,0,p3).toString());
-            x.save();
-            x.fillStyle = g;
-            x.fillRect(0,0,w,h);
-        }
-
-        // draw LittleJS logo...
-        const rect = (X, Y, W, H, C)=>
-        {
-            x.beginPath();
-            x.rect(X,Y,W,C?H*p:H);
-            x.fillStyle = C;
-            C ? x.fill() : x.stroke();
-        };
-        const line = (X, Y, Z, W)=>
-        {
-            x.beginPath();
-            x.lineTo(X,Y);
-            x.lineTo(Z,W);
-            x.stroke();
-        };
-        const circle = (X, Y, R, A=0, B=2*PI, C, F)=>
-        {
-            const D = (A+B)/2, E = p*(B-A)/2;
-            x.beginPath();
-            F && x.lineTo(X,Y);
-            x.arc(X,Y,R,D-E,D+E);
-            x.fillStyle = C;
-            C ? x.fill() : x.stroke();
-        };
-        const color = (c=0, l=0) =>
-            hsl([.98,.3,.57,.14][c%4],.8,[0,.3,.5,.8,.9][l]).toString();
-        const alpha = wave(1,1,t);
-        const p = percent(alpha, .1, .5);
-
-        // setup
-        x.translate(w/2,h/2);
-        const size = min(6, min(w,h)/99); // fit to screen
-        x.scale(size,size);
-        x.translate(-40,-35);
-        x.lineJoin = x.lineCap = 'round';
-        x.lineWidth = .1 + p*1.9;
-
-        // drawing effect
-        const p2 = percent(alpha,.1,1);
-        x.setLineDash([99*p2,99]);
-
-        // cab top
-        rect(7,16,18,-8,color(2,2));
-        rect(7,8,18,4,color(2,3));
-        rect(25,8,8,8,color(2,1));
-        rect(25,8,-18,8);
-        rect(25,8,8,8);
-
-        // cab
-        rect(25,16,7,23,color());
-        rect(11,39,14,-23,color(1,1));
-        rect(11,16,14,18,color(1,2));
-        rect(11,16,14,8,color(1,3));
-        rect(25,16,-14,24);
-
-        // cab window
-        rect(15,29,6,-9,color(2,2));
-        circle(15,21,5,0,PI/2,color(2,4),1);
-        rect(21,21,-6,9);
-
-        // little stack
-        rect(37,14,9,6,color(3,2));
-        rect(37,14,4.5,6,color(3,3));
-        rect(37,14,9,6);
-
-        // big stack
-        rect(50,20,10,-8,color(0,1));
-        rect(50,20,6.5,-8,color(0,2));
-        rect(50,20,3.5,-8,color(0,3));
-        rect(50,20,10,-8);
-        circle(55,2,11.4,.5,PI-.5,color(3,3));
-        circle(55,2,11.4,.5,PI/2,color(3,2),1);
-        circle(55,2,11.4,.5,PI-.5);
-        rect(45,7,20,-7,color(0,2));
-        rect(45,-1,20,4,color(0,3));
-        rect(45,-1,20,8);
-
-        // engine
-        for (let i=5; i--;)
-        {
-            // stagger radius to fix slight seam
-            circle(60-i*6,30, 9.9,0,2*PI,color(i+2,3));
-            circle(60-i*6,30,10.0,-.5,PI+.5,color(i+2,2));
-            circle(60-i*6,30,10.1,.5,PI-.5,color(i+2,1));
-        }
-
-        // engine outline
-        circle(36,30,10,PI/2,PI*3/2);
-        circle(48,30,10,PI/2,PI*3/2);
-        circle(60,30,10);
-        line(36,20,60,20);
-
-        // engine front light
-        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);
-
-        // front brush
-        for (let i=6; i--;)
-        {
-            x.beginPath();
-            x.lineTo(53,54);
-            x.lineTo(53,40);
-            x.lineTo(53+(1+i*2.9)*p,40);
-            x.lineTo(53+(4+i*3.5)*p,54);
-            x.fillStyle = color(0,i%2+2);
-            x.fill();
-            i%2 && x.stroke();
-        }
-
-        // wheels
-        rect(6,40,5,5);
-        rect(6,40,5,5,color());
-        rect(15,54,38,-14,color());
-        for (let i=3; i--;)
-        for (let j=2; j--;)
-        {
-            circle(15*i+15,47,j?7:1,PI,3*PI,color(i,3));
-            x.stroke();
-            circle(15*i+15,47,j?7:1,0,PI,color(i,2));
-            x.stroke();
-        }
-        line(6,40,68,40); // center
-        line(77,54,4,54); // bottom
-
-        // draw engine name
-        const s = engineName;
-        x.font = '900 16px arial';
-        x.textAlign = 'center';
-        x.textBaseline = 'top';
-        x.lineWidth = .1+p*3.9;
-        let w2 = 0;
-        for (let i=0; i<s.length; ++i)
-            w2 += x.measureText(s[i]).width;
-        for (let j=2; j--;)
-        for (let i=0, X=41-w2/2; i<s.length; ++i)
-        {
-            x.fillStyle = color(i,2);
-            const w = x.measureText(s[i]).width;
-            x[j?'strokeText':'fillText'](s[i],X+w/2,55.5,17*p);
-            X += w;
-        }
-        x.restore();
+        // wait for gameInit to load
+        await gameInit();
+        engineUpdate();
     }
-    ///////////////////////////////////////////////////////////////////////////
 }
 
 /** Update each engine object, remove destroyed objects, and update time
@@ -640,8 +465,7 @@ function engineObjectsUpdate()
     // recursive object update
     function updateObject(o)
     {
-        if (o.destroyed)
-            return;
+        if (o.destroyed) return;
 
         o.update();
         for (const child of o.children)
@@ -649,8 +473,7 @@ function engineObjectsUpdate()
     }
     for (const o of engineObjects)
     {
-        if (o.parent)
-            continue;
+        if (o.parent || o.destroyed) continue;
 
         // update top level objects
         o.update();
@@ -739,6 +562,171 @@ function engineObjectsRaycast(start, end, objects=engineObjects)
 
     debugRaycast && debugLine(start, end, hitObjects.length ? '#f00' : '#00f', .02);
     return hitObjects;
+}
+
+///////////////////////////////////////////////////////////////////////////////
+function drawEngineLogo(t)
+{
+    // LittleJS Logo and Splash Screen
+    const x = mainContext;
+    const w = mainCanvas.width = innerWidth;
+    const h = mainCanvas.height = innerHeight;
+
+    {
+        // background
+        const p3 = percent(t, 1, .8);
+        const p4 = percent(t, 0, .5);
+        const g = x.createRadialGradient(w/2,h/2,0,w/2,h/2,hypot(w,h)*.7);
+        g.addColorStop(0,hsl(0,0,lerp(0,p3/2,p4),p3).toString());
+        g.addColorStop(1,hsl(0,0,0,p3).toString());
+        x.save();
+        x.fillStyle = g;
+        x.fillRect(0,0,w,h);
+    }
+
+    // draw LittleJS logo...
+    const rect = (X, Y, W, H, C)=>
+    {
+        x.beginPath();
+        x.rect(X,Y,W,C?H*p:H);
+        x.fillStyle = C;
+        C ? x.fill() : x.stroke();
+    };
+    const line = (X, Y, Z, W)=>
+    {
+        x.beginPath();
+        x.lineTo(X,Y);
+        x.lineTo(Z,W);
+        x.stroke();
+    };
+    const circle = (X, Y, R, A=0, B=2*PI, C, F)=>
+    {
+        const D = (A+B)/2, E = p*(B-A)/2;
+        x.beginPath();
+        F && x.lineTo(X,Y);
+        x.arc(X,Y,R,D-E,D+E);
+        x.fillStyle = C;
+        C ? x.fill() : x.stroke();
+    };
+    const color = (c=0, l=0) =>
+        hsl([.98,.3,.57,.14][c%4],.9,[0,.3,.5,.8,.9][l]).toString();
+    const alpha = wave(1,1,t);
+    const p = percent(alpha, .1, .5);
+
+    // setup
+    x.translate(w/2,h/2);
+    const size = min(6, min(w,h)/99); // fit to screen
+    x.scale(size,size);
+    x.translate(-40,-35);
+    x.lineJoin = x.lineCap = 'round';
+    x.lineWidth = .1 + p*1.9;
+
+    // drawing effect
+    const p2 = percent(alpha,.1,1);
+    x.setLineDash([99*p2,99]);
+
+    // cab top
+    rect(7,16,18,-8,color(2,2));
+    rect(7,8,18,4,color(2,3));
+    rect(25,8,8,8,color(2,1));
+    rect(25,8,-18,8);
+    rect(25,8,8,8);
+
+    // cab
+    rect(25,16,7,24,color());
+    rect(11,39,14,-23,color(1,1));
+    rect(11,16,14,18,color(1,2));
+    rect(11,16,14,8,color(1,3));
+    rect(25,16,-14,24);
+
+    // cab window
+    rect(15,29,6,-9,color(2,2));
+    circle(15,21,5,0,PI/2,color(2,4),1);
+    rect(21,21,-6,9);
+
+    // little stack
+    rect(37,14,9,6,color(3,2));
+    rect(37,14,4.5,6,color(3,3));
+    rect(37,14,9,6);
+
+    // big stack
+    rect(50,20,10,-8,color(0,1));
+    rect(50,20,6.5,-8,color(0,2));
+    rect(50,20,3.5,-8,color(0,3));
+    rect(50,20,10,-8);
+    circle(55,2,11.4,.5,PI-.5,color(3,3));
+    circle(55,2,11.4,.5,PI/2,color(3,2),1);
+    circle(55,2,11.4,.5,PI-.5);
+    rect(45,7,20,-7,color(0,2));
+    rect(45,-1,20,4,color(0,3));
+    rect(45,-1,20,8);
+
+    // engine
+    for (let i=5; i--;)
+    {
+        // stagger radius to fix slight seam
+        circle(60-i*6,30, 9.9,0,2*PI,color(i+2,3));
+        circle(60-i*6,30,10.0,-.5,PI+.5,color(i+2,2));
+        circle(60-i*6,30,10.1,.5,PI-.5,color(i+2,1));
+    }
+
+    // engine outline
+    circle(36,30,10,PI/2,PI*3/2);
+    circle(48,30,10,PI/2,PI*3/2);
+    circle(60,30,10);
+    line(36,20,60,20);
+
+    // engine front light
+    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);
+
+    // front brush
+    for (let i=6; i--;)
+    {
+        x.beginPath();
+        x.lineTo(53,54);
+        x.lineTo(53,40);
+        x.lineTo(53+(1+i*2.9)*p,40);
+        x.lineTo(53+(4+i*3.5)*p,54);
+        x.fillStyle = color(0,i%2+2);
+        x.fill();
+        i%2 && x.stroke();
+    }
+
+    // wheels
+    rect(6,40,5,5);
+    rect(6,40,5,5,color());
+    rect(15,54,38,-14,color());
+    for (let i=3; i--;)
+    for (let j=2; j--;)
+    {
+        circle(15*i+15,47,j?7:1,PI,3*PI,color(i,3));
+        x.stroke();
+        circle(15*i+15,47,j?7:1,0,PI,color(i,2));
+        x.stroke();
+    }
+    line(6,40,68,40); // center
+    line(77,54,4,54); // bottom
+
+    // draw engine name
+    const s = engineName;
+    x.font = '900 16px arial';
+    x.textAlign = 'center';
+    x.textBaseline = 'top';
+    x.lineWidth = .1+p*3.9;
+    let w2 = 0;
+    for (let i=0; i<s.length; ++i)
+        w2 += x.measureText(s[i]).width;
+    for (let j=2; j--;)
+    for (let i=0, X=41-w2/2; i<s.length; ++i)
+    {
+        x.fillStyle = color(i,2);
+        const w = x.measureText(s[i]).width;
+        x[j?'strokeText':'fillText'](s[i],X+w/2,55.5,17*p);
+        X += w;
+    }
+    x.restore();
 }
 /**
  * LittleJS Debug System
@@ -781,7 +769,7 @@ let debugKey = 'Escape';
 let debugOverlay = false;
 
 // Engine internal variables not exposed to documentation
-let debugPrimitives = [], debugPhysics = false, debugRaycast = false, debugParticles = false, debugGamepads = false, debugMedals = false, debugTakeScreenshot, downloadLink, debugCanvas;
+let debugPrimitives = [], debugPhysics = false, debugRaycast = false, debugParticles = false, debugGamepads = false, debugMedals = false, debugTakeScreenshot;
 
 ///////////////////////////////////////////////////////////////////////////////
 // Debug helper functions
@@ -805,7 +793,7 @@ function LOG(...output) { console.log(...output); }
 
 /** Draw a debug rectangle in world space
  *  @param {Vector2} pos
- *  @param {Vector2} [size=Vector2()]
+ *  @param {Vector2} [size=vec2(0)]
  *  @param {Color|string} [color]
  *  @param {number} [time]
  *  @param {number} [angle]
@@ -968,46 +956,6 @@ function debugClear() { debugPrimitives = []; }
  *  @memberof Debug */
 function debugScreenshot() { debugTakeScreenshot = 1; }
 
-/** Save a canvas to disk
- *  @param {HTMLCanvasElement|OffscreenCanvas} canvas
- *  @param {string} [filename]
- *  @param {string} [type]
- *  @memberof Debug */
-function debugSaveCanvas(canvas, filename='screenshot', type='image/png')
-{
-    if (canvas instanceof OffscreenCanvas)
-    {
-        // copy to temporary canvas and save
-        if (!debugCanvas)
-            debugCanvas = document.createElement('canvas');
-        debugCanvas.width = canvas.width;
-        debugCanvas.height = canvas.height;
-        debugCanvas.getContext('2d').drawImage(canvas, 0, 0);
-        debugSaveDataURL(debugCanvas.toDataURL(type), filename);
-    }
-    else
-        debugSaveDataURL(canvas.toDataURL(type), filename);
-}
-
-/** Save a text file to disk
- *  @param {string}     text
- *  @param {string}     [filename]
- *  @param {string}     [type]
- *  @memberof Debug */
-function debugSaveText(text, filename='text', type='text/plain')
-{ debugSaveDataURL(URL.createObjectURL(new Blob([text], {'type':type})), filename); }
-
-/** Save a data url to disk
- *  @param {string}     dataURL
- *  @param {string}     filename
- *  @memberof Debug */
-function debugSaveDataURL(dataURL, filename)
-{
-    downloadLink.download = filename;
-    downloadLink.href = dataURL;
-    downloadLink.click();
-}
-
 /** Breaks on all asserts/errors, hides the canvas, and shows message in plain text
  *  This is a good function to call at the start of your game to catch all errors
  *  In release builds this function has no effect
@@ -1043,21 +991,11 @@ function debugShowErrors()
 
 function debugInit()
 {
-    // create link for saving screenshots
-    downloadLink = document.createElement('a');
 }
 
 function debugUpdate()
 {
-    if (!debug)
-        return;
-
-    if (debugVideoCaptureIsActive())
-    {
-        // control to stop video capture
-        if (keyWasPressed('Digit6') || keyWasPressed(debugKey))
-            debugVideoCaptureStop();
-    }
+    if (!debug) return;
 
     if (keyWasPressed(debugKey)) // Esc
         debugOverlay = !debugOverlay;
@@ -1075,9 +1013,15 @@ function debugUpdate()
             debugRaycast = !debugRaycast;
         if (keyWasPressed('Digit5'))
             debugScreenshot();
-        if (keyWasPressed('Digit6') && !debugVideoCaptureIsActive())
-            debugVideoCaptureStart();
     }
+    if (debugVideoCaptureIsActive())
+    {
+        // control to stop video capture
+        if (!debugOverlay || keyWasPressed('Digit6'))
+            debugVideoCaptureStop();
+    }
+    else if (debugOverlay && keyWasPressed('Digit6'))
+        debugVideoCaptureStart();
 }
 
 function debugRender()
@@ -1092,7 +1036,7 @@ function debugRender()
     {
         // combine canvases, remove alpha and save
         combineCanvases();
-        debugSaveCanvas(mainCanvas);
+        saveCanvas(mainCanvas);
         debugTakeScreenshot = 0;
     }
 
@@ -1173,7 +1117,7 @@ function debugRender()
         if (tileCollisionTest(mousePos))
         {
             // show floored tile pick for tile collision
-            drawRect(mousePos.floor().add(vec2(.5)), vec2(1), rgb(1,1,0,.5));
+            drawRect(mousePos.floor().add(vec2(.5)), vec2(1), rgb(1,1,0,.5), 0, false);
         }
     }
 
@@ -1252,8 +1196,8 @@ function debugRender()
     if (debugObject)
     {
         const raycastHitPos = tileCollisionRaycast(debugObject.pos, mousePos);
-        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));
+        raycastHitPos && drawRect(raycastHitPos.floor().add(vec2(.5)), vec2(1), rgb(0,1,1,.3), 0, false);
+        drawLine(mousePos, debugObject.pos, .1, raycastHitPos ? rgb(1,0,0,.5) : rgb(0,1,0,.5), undefined, undefined, false);
 
         let debugText = 'mouse pos = ' + mousePos;
         if (tileCollisionLayers.length)
@@ -1338,11 +1282,34 @@ function debugRender()
     }
 }
 
+function debugRenderPost()
+{
+    if (debugVideoCaptureIsActive())
+    {
+        debugVideoCaptureUpdate();
+        return;
+    }
+
+    if (!debugWatermark) return;
+    
+    // update fps display
+    mainContext.textAlign = 'right';
+    mainContext.textBaseline = 'top';
+    mainContext.font = '1em monospace';
+    mainContext.fillStyle = '#000';
+    const text = engineName + ' v' + engineVersion + ' / '
+        + drawCount + ' / ' + engineObjects.length + ' / ' + averageFPS.toFixed(1)
+        + (glEnable ? ' GL' : ' 2D') ;
+    mainContext.fillText(text, mainCanvas.width-3, 3);
+    mainContext.fillStyle = '#fff';
+    mainContext.fillText(text, mainCanvas.width-2, 2);
+}
+
 ///////////////////////////////////////////////////////////////////////////////
 // video capture - records video and audio at 60 fps using MediaRecorder API
 
 // internal variables used to capture video
-let debugVideoCapture, debugVideoCaptureTrack, debugVideoCaptureIcon, debugVideoCaptureTimer;
+let debugVideoCapture, debugVideoCaptureIcon;
 
 /** Check if video capture is active
  *  @memberof Debug */
@@ -1352,80 +1319,103 @@ function debugVideoCaptureIsActive() { return !!debugVideoCapture; }
  *  @memberof Debug */
 function debugVideoCaptureStart()
 {
-    if (debugVideoCaptureIsActive())
-        return; // already recording
+    ASSERT(!debugVideoCaptureIsActive(), 'Already capturing video!');
 
-    // captureStream passing in 0 to only capture when requestFrame() is called
+    if (!debugVideoCaptureIcon)
+    {
+        // create recording icon to show it is capturing video
+        debugVideoCaptureIcon = document.createElement('div');
+        debugVideoCaptureIcon.style.position = 'absolute';
+        debugVideoCaptureIcon.style.padding = '9px';
+        debugVideoCaptureIcon.style.color = '#f00';
+        debugVideoCaptureIcon.style.font = '50px monospace';
+        document.body.appendChild(debugVideoCaptureIcon);
+    }
+    // show recording icon
+    debugVideoCaptureIcon.textContent = '';
+    debugVideoCaptureIcon.style.display = '';
+
+    // setup captureStream to capture manually by passing 0
     const stream = mainCanvas.captureStream(0);
+    const videoTrack = stream.getVideoTracks()[0];
+    const captureTimer = new Timer(0, true);
     const chunks = [];
-    debugVideoCaptureTrack = stream.getVideoTracks()[0];
-    if (debugVideoCaptureTrack.applyConstraints)
-        debugVideoCaptureTrack.applyConstraints({frameRate:60}); // force 60 fps
-    debugVideoCapture = new MediaRecorder(stream, {mimeType:'video/webm;codecs=vp8'});
-    debugVideoCapture.ondataavailable = (e)=> chunks.push(e.data);
-    debugVideoCapture.onstop = ()=>
+    videoTrack.applyConstraints({frameRate:frameRate});
+
+    // set up the media recorder
+    const mediaRecorder = new MediaRecorder(stream, 
+        {mimeType:'video/webm;codecs=vp8'});
+    mediaRecorder.ondataavailable = (e)=> chunks.push(e.data);
+    mediaRecorder.onstop = ()=>
     {
         const blob = new Blob(chunks, {type: 'video/webm'});
         const url = URL.createObjectURL(blob);
-        downloadLink.download = 'capture.webm';
-        downloadLink.href = url;
-        downloadLink.click();
-        URL.revokeObjectURL(url);
+        saveDataURL(url, 'capture.webm', 1e3);
     };
 
-    if (audioMasterGain)
+    let audioStreamDestination, silentAudioSource;
+    if (soundEnable)
     {
+        // create silent audio source
+        // fixes issue where video can not start recording without audio
+        silentAudioSource = new ConstantSourceNode(audioContext, { offset: 0 });
+        silentAudioSource.connect(audioMasterGain);
+        silentAudioSource.start();
+
         // connect to audio master gain node
-        const audioStreamDestination = audioContext.createMediaStreamDestination();
+        audioStreamDestination = audioContext.createMediaStreamDestination();
         audioMasterGain.connect(audioStreamDestination);
         for (const track of audioStreamDestination.stream.getAudioTracks())
             stream.addTrack(track); // add audio tracks to capture stream
     }
 
     // start recording
+    try { mediaRecorder.start(); }
+    catch(e)
+    {
+        LOG('Video capture not supported in this browser!');
+        silentAudioSource?.stop();
+        return;
+    }
+
     LOG('Video capture started.');
-    debugVideoCapture.start();
-    debugVideoCaptureTimer = new Timer(0, true);
 
-    if (!debugVideoCaptureIcon)
+    // save debug video info
+    debugVideoCapture =
     {
-        // create recording icon to show it is capturing video
-        debugVideoCaptureIcon = document.createElement('div');
-        debugVideoCaptureIcon.style.position = 'absolute';
-        debugVideoCaptureIcon.style.padding = '9px';
-        debugVideoCaptureIcon.style.color = '#f00';
-        debugVideoCaptureIcon.style.font = '50px monospace';
-        document.body.appendChild(debugVideoCaptureIcon);
-    }
-    // show recording icon
-    debugVideoCaptureIcon.textContent = '';
-    debugVideoCaptureIcon.style.display = '';
+        mediaRecorder,
+        captureTimer,
+        videoTrack,
+        silentAudioSource,
+        audioStreamDestination
+    };
 }
 
 /** Stop capturing video and save to disk
  *  @memberof Debug */
 function debugVideoCaptureStop()
 {
-    if (!debugVideoCaptureIsActive())
-        return; // not recording
+    ASSERT(debugVideoCaptureIsActive(), 'Not capturing video!');
 
     // stop recording
-    LOG(`Video capture ended. ${debugVideoCaptureTimer.get().toFixed(2)} seconds recorded.`);
-    debugVideoCapture.stop();
-    debugVideoCapture = 0;
+    LOG(`Video capture ended. ${debugVideoCapture.captureTimer.get().toFixed(2)} seconds recorded.`);
     debugVideoCaptureIcon.style.display = 'none';
+    debugVideoCapture.silentAudioSource?.stop();
+    debugVideoCapture.mediaRecorder?.stop();
+    debugVideoCapture.videoTrack?.stop();
+    debugVideoCapture = undefined;
 }
 
 // update video capture, called automatically by engine
 function debugVideoCaptureUpdate()
 {
-    if (!debugVideoCaptureIsActive())
-        return; // not recording
+    ASSERT(debugVideoCaptureIsActive(), 'Not capturing video!');
 
     // save the video frame
     combineCanvases();
-    debugVideoCaptureTrack.requestFrame();
-    debugVideoCaptureIcon.textContent = '● REC ' + formatTime(debugVideoCaptureTimer);
+    debugVideoCapture.videoTrack.requestFrame();
+    debugVideoCaptureIcon.textContent = '● REC ' 
+        + formatTime(debugVideoCapture.captureTimer);
 }
 
 ///////////////////////////////////////////////////////////////////////////////
@@ -1458,105 +1448,104 @@ function debugProtectConstant(obj)
     return Object.freeze(obj);
 }
 /**
- * LittleJS Utility Classes and Functions
+ * LittleJS Math Classes and Functions
  * - General purpose math library
- * - Vector2 - fast, simple, easy 2D vector class
- * - Color - holds a rgba color with some math functions
- * - Timer - tracks time automatically
  * - RandomGenerator - seeded random number generator
- * @namespace Utilities
+ * - Vector2 - fast, simple, easy 2D vector class
+ * - Color - holds a rgba color with math functions
+ * @namespace Math
  */
 
 /** The value of PI
  *  @type {number}
  *  @default Math.PI
- *  @memberof Utilities */
+ *  @memberof Math */
 const PI = Math.PI;
 
 /** Returns absolute value of value passed in
  *  @param {number} value
  *  @return {number}
- *  @memberof Utilities */
+ *  @memberof Math */
 const abs = Math.abs;
 
 /** Returns floored value of value passed in
  *  @param {number} value
  *  @return {number}
- *  @memberof Utilities */
+ *  @memberof Math */
 const floor = Math.floor;
 
 /** Returns ceiled value of value passed in
  *  @param {number} value
  *  @return {number}
- *  @memberof Utilities */
+ *  @memberof Math */
 const ceil = Math.ceil;
 
 /** Returns rounded value passed in
  *  @param {number} value
  *  @return {number}
- *  @memberof Utilities */
+ *  @memberof Math */
 const round = Math.round;
 
 /** Returns lowest value passed in
  *  @param {...number} values
  *  @return {number}
- *  @memberof Utilities */
+ *  @memberof Math */
 const min = Math.min;
 
 /** Returns highest value passed in
  *  @param {...number} values
  *  @return {number}
- *  @memberof Utilities */
+ *  @memberof Math */
 const max = Math.max;
 
 /** Returns the sign of value passed in
  *  @param {number} value
  *  @return {number}
- *  @memberof Utilities */
+ *  @memberof Math */
 const sign = Math.sign;
 
 /** Returns hypotenuse of values passed in
  *  @param {...number} values
  *  @return {number}
- *  @memberof Utilities */
+ *  @memberof Math */
 const hypot = Math.hypot;
 
 /** Returns log2 of value passed in
  *  @param {number} value
  *  @return {number}
- *  @memberof Utilities */
+ *  @memberof Math */
 const log2 = Math.log2;
 
 /** Returns sin of value passed in
  *  @param {number} value
  *  @return {number}
- *  @memberof Utilities */
+ *  @memberof Math */
 const sin = Math.sin;
 
 /** Returns cos of value passed in
  *  @param {number} value
  *  @return {number}
- *  @memberof Utilities */
+ *  @memberof Math */
 const cos = Math.cos;
 
 /** Returns tan of value passed in
  *  @param {number} value
  *  @return {number}
- *  @memberof Utilities */
+ *  @memberof Math */
 const tan = Math.tan;
 
 /** Returns atan2 of values passed in
  *  @param {number} y
  *  @param {number} x
  *  @return {number}
- *  @memberof Utilities */
+ *  @memberof Math */
 const atan2 = Math.atan2;
 
 /** Returns first parm modulo the second param, but adjusted so negative numbers work as expected
  *  @param {number} dividend
  *  @param {number} [divisor]
  *  @return {number}
- *  @memberof Utilities */
+ *  @memberof Math */
 function mod(dividend, divisor=1) { return ((dividend % divisor) + divisor) % divisor; }
 
 /** Clamps the value between max and min
@@ -1564,7 +1553,7 @@ function mod(dividend, divisor=1) { return ((dividend % divisor) + divisor) % di
  *  @param {number} [min]
  *  @param {number} [max]
  *  @return {number}
- *  @memberof Utilities */
+ *  @memberof Math */
 function clamp(value, min=0, max=1) { return value < min ? min : value > max ? max : value; }
 
 /** Returns what percentage the value is between valueA and valueB
@@ -1572,7 +1561,7 @@ function clamp(value, min=0, max=1) { return value < min ? min : value > max ? m
  *  @param {number} valueA
  *  @param {number} valueB
  *  @return {number}
- *  @memberof Utilities */
+ *  @memberof Math */
 function percent(value, valueA, valueB)
 { return (valueB-=valueA) ? clamp((value-valueA)/valueB) : 0; }
 
@@ -1581,7 +1570,7 @@ function percent(value, valueA, valueB)
  *  @param {number} valueB
  *  @param {number} percent
  *  @return {number}
- *  @memberof Utilities */
+ *  @memberof Math */
 function lerp(valueA, valueB, percent)
 { return valueA + clamp(percent) * (valueB-valueA); }
 
@@ -1593,7 +1582,7 @@ function lerp(valueA, valueB, percent)
  *  @param {number} lerpA
  *  @param {number} lerpB
  *  @return {number}
- *  @memberof Utilities */
+ *  @memberof Math */
 function percentLerp(value, percentA, percentB, lerpA, lerpB)
 { return lerp(lerpA, lerpB, percent(value, percentA, percentB)); }
 
@@ -1602,7 +1591,7 @@ function percentLerp(value, percentA, percentB, lerpA, lerpB)
  *  @param {number} valueB
  *  @param {number} [wrapSize]
  *  @return {number}
- *  @memberof Utilities */
+ *  @memberof Math */
 function distanceWrap(valueA, valueB, wrapSize=1)
 { const d = (valueA - valueB) % wrapSize; return d*2 % wrapSize - d; }
 
@@ -1612,7 +1601,7 @@ function distanceWrap(valueA, valueB, wrapSize=1)
  *  @param {number} percent
  *  @param {number} [wrapSize]
  *  @return {number}
- *  @memberof Utilities */
+ *  @memberof Math */
 function lerpWrap(valueA, valueB, percent, wrapSize=1)
 { return valueA + clamp(percent) * distanceWrap(valueB, valueA, wrapSize); }
 
@@ -1620,7 +1609,7 @@ function lerpWrap(valueA, valueB, percent, wrapSize=1)
  *  @param {number} angleA
  *  @param {number} angleB
  *  @return {number}
- *  @memberof Utilities */
+ *  @memberof Math */
 function distanceAngle(angleA, angleB) { return distanceWrap(angleA, angleB, 2*PI); }
 
 /** Linearly interpolates between the angles passed in with wrapping
@@ -1628,35 +1617,35 @@ function distanceAngle(angleA, angleB) { return distanceWrap(angleA, angleB, 2*P
  *  @param {number} angleB
  *  @param {number} percent
  *  @return {number}
- *  @memberof Utilities */
+ *  @memberof Math */
 function lerpAngle(angleA, angleB, percent) { return lerpWrap(angleA, angleB, percent, 2*PI); }
 
 /** Applies smoothstep function to the percentage value
  *  @param {number} percent
  *  @return {number}
- *  @memberof Utilities */
+ *  @memberof Math */
 function smoothStep(percent) { return percent * percent * (3 - 2 * percent); }
 
 /** Checks if the value passed in is a power of two
  *  @param {number} value
  *  @return {boolean}
- *  @memberof Utilities */
+ *  @memberof Math */
 function isPowerOfTwo(value) { return !(value & (value - 1)); }
 
 /** Returns the nearest power of two not less than the value
  *  @param {number} value
  *  @return {number}
- *  @memberof Utilities */
+ *  @memberof Math */
 function nearestPowerOfTwo(value) { return 2**ceil(log2(value)); }
 
 /** Returns true if two axis aligned bounding boxes are overlapping
  *  this can be used for simple collision detection between objects
- *  @param {Vector2} posA          - Center of box A
- *  @param {Vector2} sizeA         - Size of box A
- *  @param {Vector2} posB          - Center of box B
- *  @param {Vector2} [sizeB=(0,0)] - Size of box B, uses a point if undefined
- *  @return {boolean}              - True if overlapping
- *  @memberof Utilities */
+ *  @param {Vector2} posA - Center of box A
+ *  @param {Vector2} sizeA - Size of box A
+ *  @param {Vector2} posB - Center of box B
+ *  @param {Vector2} [sizeB=vec2()] - Size of box B, uses a point if undefined
+ *  @return {boolean} - True if overlapping
+ *  @memberof Math */
 function isOverlapping(posA, sizeA, posB, sizeB=vec2())
 {
     const dx = (posA.x - posB.x)*2;
@@ -1672,7 +1661,7 @@ function isOverlapping(posA, sizeA, posB, sizeB=vec2())
  *  @param {Vector2} pos   - Center of box
  *  @param {Vector2} size  - Size of box
  *  @return {boolean}      - True if intersecting
- *  @memberof Utilities */
+ *  @memberof Math */
 function isIntersecting(start, end, pos, size)
 {
     // Liang-Barsky algorithm
@@ -1713,52 +1702,29 @@ function isIntersecting(start, end, pos, size)
  *  @param {number} [t=time]    - Value to use for time of the wave
  *  @param {number} [offset]    - Value to use for time offset of the wave
  *  @return {number}            - Value waving between 0 and amplitude
- *  @memberof Utilities */
+ *  @memberof Math */
 function wave(frequency=1, amplitude=1, t=time, offset=0)
 { return amplitude/2 * (1 - cos(offset + t*frequency*2*PI)); }
 
-/** Formats seconds to mm:ss style for display purposes
- *  @param {number} t - time in seconds
- *  @return {string}
- *  @memberof Utilities */
-function formatTime(t)
-{
-    const sign = t < 0 ? '-' : '';
-    t = abs(t)|0;
-    return sign + (t/60|0) + ':' + (t%60<10?'0':'') + t%60;
-}
-
-/** Fetches a JSON file from a URL and returns the parsed JSON object. Must be used with await!
- *  @param {string} url - URL of JSON file
- *  @return {Promise<object>}
- *  @memberof Utilities */
-async function fetchJSON(url)
-{
-    const response = await fetch(url);
-    if (!response.ok)
-        throw new Error(`Failed to fetch JSON from ${url}: ${response.status} ${response.statusText}`);
-    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 */
+ * @memberof Math */
 function isNumber(n) { return typeof n === 'number' && !isNaN(n); }
 
 /**
  * Check if object is a valid string or can be converted to one
  * @param {any} s
  * @return {boolean}
- * @memberof Utilities */
-function isString(s) { return s !== undefined && s !== null && typeof s.toString() === 'string'; }
+ * @memberof Math */
+function isString(s) { return s != null && typeof s?.toString() === 'string'; }
 
 /**
  * Check if object is an array
  * @param {any} a
  * @return {boolean}
- * @memberof Utilities */
+ * @memberof Math */
 function isArray(a) { return Array.isArray(a); }
 
 /**
@@ -1774,7 +1740,7 @@ function isArray(a) { return Array.isArray(a); }
  * @param {LineTestFunction} testFunction - Check if colliding
  * @param {Vector2} [normal] - Optional vector to store the normal
  * @return {Vector2|undefined} - Position of the collision or undefined if none found
- * @memberof Utilities */
+ * @memberof Math */
 function lineTest(posStart, posEnd, testFunction, normal)
 {
     ASSERT(isVector2(posStart), 'posStart must be a vec2');
@@ -1786,8 +1752,7 @@ function lineTest(posStart, posEnd, testFunction, normal)
     const dx = posEnd.x - posStart.x;
     const dy = posEnd.y - posStart.y;
     const totalLength = hypot(dx, dy);
-    if (!totalLength)
-        return;
+    if (!totalLength) return;
 
     // current integer cell we are in
     const pos = posStart.floor();
@@ -1897,8 +1862,8 @@ function randInCircle(radius=1, minRadius=0)
 { return radius > 0 ? randVec2(radius * rand(minRadius / radius, 1)**.5) : new Vector2; }
 
 /** Returns a random color between the two passed in colors, combine components if linear
- *  @param {Color}   [colorA=(1,1,1,1)]
- *  @param {Color}   [colorB=(0,0,0,1)]
+ *  @param {Color}   [colorA=WHITE]
+ *  @param {Color}   [colorB=BLACK]
  *  @param {boolean} [linear]
  *  @return {Color}
  *  @memberof Random */
@@ -1977,8 +1942,8 @@ class RandomGenerator
     { return vec2(this.float(valueA, valueB), this.float(valueA, valueB)); }
 
     /** Returns a random color between the two passed in colors, combine components if linear
-    *  @param {Color}   [colorA=(1,1,1,1)]
-    *  @param {Color}   [colorB=(0,0,0,1)]
+    *  @param {Color}   [colorA=WHITE]
+    *  @param {Color}   [colorB=BLACK]
     *  @param {boolean} [linear]
     *  @return {Color} */
     randColor(colorA=new Color, colorB=new Color(0,0,0,1), linear=false)
@@ -2021,14 +1986,14 @@ class RandomGenerator
  * let a = vec2(0, 1); // vector with coordinates (0, 1)
  * a = vec2(5);        // set a to (5, 5)
  * b = vec2();         // set b to (0, 0)
- * @memberof Utilities */
-function vec2(x=0, y) { return new Vector2(x, y === undefined ? x : y); }
+ * @memberof Math */
+function vec2(x=0, y) { return new Vector2(x, y ?? x); }
 
 /**
  * Check if object is a valid Vector2
  * @param {any} v
  * @return {boolean}
- * @memberof Utilities */
+ * @memberof Math */
 function isVector2(v) { return v instanceof Vector2 && v.isValid(); }
 
 // vector2 asserts
@@ -2230,10 +2195,6 @@ class Vector2
      * @return {number} */
     area() { return abs(this.x * this.y); }
 
-    /** Returns true if this vector is (0,0)
-     * @return {boolean} */
-    isZero() { return !this.x && !this.y; }
-
     /** Returns a new vector that is p percent between this and the vector passed in
      * @param {Vector2} v - other vector
      * @param {number}  percent
@@ -2278,7 +2239,7 @@ class Vector2
  * @param {number} [b=1] - blue
  * @param {number} [a=1] - alpha
  * @return {Color}
- * @memberof Utilities
+ * @memberof Math
  */
 function rgb(r, g, b, a) { return new Color(r, g, b, a); }
 
@@ -2289,14 +2250,14 @@ function rgb(r, g, b, a) { return new Color(r, g, b, a); }
  * @param {number} [l=1] - lightness
  * @param {number} [a=1] - alpha
  * @return {Color}
- * @memberof Utilities */
+ * @memberof Math */
 function hsl(h, s, l, a) { return new Color().setHSLA(h, s, l, a); }
 
 /**
  * Check if object is a valid Color
  * @param {any} c
  * @return {boolean}
- * @memberof Utilities */
+ * @memberof Math */
 function isColor(c) { return c instanceof Color && c.isValid(); }
 
 // color asserts
@@ -2477,7 +2438,7 @@ class Color
     toString(useAlpha = true)
     {
         if (debug && !this.isValid())
-            return `#000`;
+            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) : '');
     }
@@ -2534,68 +2495,158 @@ class Color
 
 /** Color - White #ffffff
  *  @type {Color}
- *  @memberof Utilities */
+ *  @memberof Math */
 const WHITE = debugProtectConstant(rgb());
 
 /** Color - Clear White #757474ff with 0 alpha
  *  @type {Color}
- *  @memberof Utilities */
+ *  @memberof Math */
 const CLEAR_WHITE = debugProtectConstant(rgb(1,1,1,0));
 
 /** Color - Black #000000
  *  @type {Color}
- *  @memberof Utilities */
+ *  @memberof Math */
 const BLACK = debugProtectConstant(rgb(0,0,0));
 
 /** Color - Clear Black #000000 with 0 alpha
  *  @type {Color}
- *  @memberof Utilities */
+ *  @memberof Math */
 const CLEAR_BLACK = debugProtectConstant(rgb(0,0,0,0));
 
 /** Color - Gray #808080
  *  @type {Color}
- *  @memberof Utilities */
+ *  @memberof Math */
 const GRAY = debugProtectConstant(rgb(.5,.5,.5));
 
 /** Color - Red #ff0000
  *  @type {Color}
- *  @memberof Utilities */
+ *  @memberof Math */
 const RED = debugProtectConstant(rgb(1,0,0));
 
 /** Color - Orange #ff8000
  *  @type {Color}
- *  @memberof Utilities */
+ *  @memberof Math */
 const ORANGE = debugProtectConstant(rgb(1,.5,0));
 
 /** Color - Yellow #ffff00
  *  @type {Color}
- *  @memberof Utilities */
+ *  @memberof Math */
 const YELLOW = debugProtectConstant(rgb(1,1,0));
 
 /** Color - Green #00ff00
  *  @type {Color}
- *  @memberof Utilities */
+ *  @memberof Math */
 const GREEN = debugProtectConstant(rgb(0,1,0));
 
 /** Color - Cyan #00ffff
  *  @type {Color}
- *  @memberof Utilities */
+ *  @memberof Math */
 const CYAN = debugProtectConstant(rgb(0,1,1));
 
 /** Color - Blue #0000ff
  *  @type {Color}
- *  @memberof Utilities */
+ *  @memberof Math */
 const BLUE = debugProtectConstant(rgb(0,0,1));
 
 /** Color - Purple #8000ff
  *  @type {Color}
- *  @memberof Utilities */
+ *  @memberof Math */
 const PURPLE = debugProtectConstant(rgb(.5,0,1));
 
 /** Color - Magenta #ff00ff
  *  @type {Color}
+ *  @memberof Math */
+const MAGENTA = debugProtectConstant(rgb(1,0,1));
+/**
+ * LittleJS Utility Classes and Functions
+ * - General purpose utilities
+ * - Timer - tracks time automatically
+ * @namespace Utilities
+ */
+
+/** Formats seconds to mm:ss style for display purposes
+ *  @param {number} t - time in seconds
+ *  @return {string}
+ *  @memberof Utilities */
+function formatTime(t)
+{
+    const sign = t < 0 ? '-' : '';
+    t = abs(t)|0;
+    return sign + (t/60|0) + ':' + (t%60<10?'0':'') + t%60;
+}
+
+/** Fetches a JSON file from a URL and returns the parsed JSON object. Must be used with await!
+ *  @param {string} url - URL of JSON file
+ *  @return {Promise<object>}
+ *  @memberof Utilities */
+async function fetchJSON(url)
+{
+    const response = await fetch(url);
+    if (!response.ok)
+        throw new Error(`Failed to fetch JSON from ${url}: ${response.status} ${response.statusText}`);
+    return response.json();
+}
+
+///////////////////////////////////////////////////////////////////////////////
+
+/** Save a text file to disk
+ *  @param {string} text
+ *  @param {string} [filename]
+ *  @param {string} [type]
  *  @memberof Utilities */
-const MAGENTA = debugProtectConstant(rgb(1,0,1));
+function saveText(text, filename='text', type='text/plain')
+{ saveDataURL(URL.createObjectURL(new Blob([text], {'type':type})), filename); }
+
+/** Save a canvas to disk
+ *  @param {HTMLCanvasElement|OffscreenCanvas} canvas
+ *  @param {string} [filename]
+ *  @param {string} [type]
+ *  @memberof Utilities */
+function saveCanvas(canvas, filename='screenshot', type='image/png')
+{
+    if (canvas instanceof OffscreenCanvas)
+    {
+        // copy to temporary canvas and save
+        const saveCanvas = document.createElement('canvas');
+        saveCanvas.width = canvas.width;
+        saveCanvas.height = canvas.height;
+        saveCanvas.getContext('2d').drawImage(canvas, 0, 0);
+        saveDataURL(saveCanvas.toDataURL(type), filename);
+    }
+    else
+        saveDataURL(canvas.toDataURL(type), filename);
+}
+
+/** Save a data url to disk
+ *  @param {string} url
+ *  @param {string} [filename]
+ *  @param {number} [revokeTime] - how long before revoking the url
+ *  @memberof Utilities */
+function saveDataURL(url, filename='download', revokeTime)
+{
+    ASSERT(isString(url), 'saveDataURL requires url string');
+    ASSERT(isString(filename), 'saveDataURL requires filename string');
+
+    // create link for saving screenshots
+    const link = document.createElement('a');
+    link.download = filename;
+    link.href = url;
+    link.click();
+    if (revokeTime !== undefined)
+        setTimeout(()=> URL.revokeObjectURL(url), revokeTime);
+}
+
+/** Share content using the native share dialog if available
+ *  @param {string} title - title of the share
+ *  @param {string} url - url to share
+ *  @param {Function} [callback] - Called when share is complete
+ *  @memberof Utilities */
+function shareURL(title, url, callback)
+{
+    ASSERT(isString(title), 'shareURL requires title string');
+    ASSERT(isString(url), 'shareURL requires url string');
+    navigator.share?.({title, url}).then(()=>callback?.());
+}
 
 ///////////////////////////////////////////////////////////////////////////////
 
@@ -2717,7 +2768,7 @@ let cameraScale = 32;
  *  @memberof Settings */
 let canvasColorTiles = true;
 
-/** Color to clear the canvas to before render
+/** Color to clear the canvas to before render, does not clear if alpha is 0
  *  @type {Color}
  *  @memberof Draw */
 let canvasClearColor = CLEAR_BLACK;
@@ -3026,7 +3077,7 @@ function setCameraScale(scale) { cameraScale = scale; }
  *  @memberof Settings */
 function setCanvasColorTiles(colorTiles) { canvasColorTiles = colorTiles; }
 
-/** Set color to clear the canvas to before render
+/** Set color to clear the canvas to before render, does not clear if alpha is 0
  *  @param {Color} color
  *  @memberof Settings */
 function setCanvasClearColor(color) { canvasClearColor = color.copy(); }
@@ -3306,10 +3357,10 @@ function setDebugKey(key) { debugKey = key; }
 class EngineObject
 {
     /** Create an engine object and adds it to the list of objects
-     *  @param {Vector2}  [pos=(0,0)]   - World space position of the object
-     *  @param {Vector2}  [size=(1,1)]  - World space size of the object
-     *  @param {TileInfo} [tileInfo]    - Tile info to render object (undefined is untextured)
-     *  @param {number}   [angle]       - Angle the object is rotated by
+     *  @param {Vector2}  [pos=vec2()] - World space position of the object
+     *  @param {Vector2}  [size=vec2(1)] - World space size of the object
+     *  @param {TileInfo} [tileInfo] - Tile info to render object (undefined is untextured)
+     *  @param {number}   [angle] - Angle the object is rotated by
      *  @param {Color}    [color=WHITE] - Color to apply to tile when rendered
      *  @param {number}   [renderOrder] - Objects sorted by renderOrder before being rendered
      */
@@ -3437,15 +3488,16 @@ class EngineObject
         // physics sanity checks
         ASSERT(this.angleDamping >= 0 && this.angleDamping <= 1);
         ASSERT(this.damping >= 0 && this.damping <= 1);
-        if (!enablePhysicsSolver || !this.mass) // don't do collision for static objects
-            return;
+
+        // don't do collision for static objects or if solver disabled
+        if (!enablePhysicsSolver || !this.mass) return;
 
         const wasFalling = this.velocity.y < 0 && gravity.y < 0 || this.velocity.y > 0 && gravity.y > 0;
         if (this.groundObject)
         {
             // apply friction in local space of ground object
             const friction = max(this.friction, this.groundObject.friction);
-            const groundSpeed = this.groundObject.velocity ? this.groundObject.velocity.x : 0;
+            const groundSpeed = this.groundObject.velocity.x;
             this.velocity.x = groundSpeed + (this.velocity.x - groundSpeed) * friction;
             this.groundObject = undefined;
         }
@@ -3456,19 +3508,19 @@ class EngineObject
             const epsilon = .001; // necessary to push slightly outside of the collision
             for (const o of engineObjectsCollide)
             {
+                // skip destroyed, child objects, or self collision
+                if (o.destroyed || o.parent || o === this) continue;
+
                 // non solid objects don't collide with each other
-                if ((!this.isSolid && !o.isSolid) || o.destroyed || o.parent || o === this)
-                    continue;
+                if (!this.isSolid && !o.isSolid) continue;
 
                 // check collision
-                if (!this.isOverlappingObject(o))
-                    continue;
+                if (!this.isOverlappingObject(o)) continue;
 
                 // notify objects of collision and check if should be resolved
                 const collide1 = this.collideWithObject(o);
                 const collide2 = o.collideWithObject(this);
-                if (!collide1 || !collide2)
-                    continue;
+                if (!collide1 || !collide2) continue;
 
                 if (isOverlapping(oldPos, this.size, o.pos, o.size))
                 {
@@ -3570,7 +3622,7 @@ class EngineObject
                         const delta = y - this.pos.y;
                         if (delta < maxMoveUp)
                         if (!tileCollisionTest(vec2(this.pos.x, y), this.size, this))
-                        {   
+                        {
                             this.pos.y = y;
                             debugPhysics && debugRect(this.pos, this.size, '#ff0');
                             return;
@@ -3630,10 +3682,10 @@ class EngineObject
 
         // disconnect from parent and destroy children
         this.destroyed = 1;
-        this.parent && this.parent.removeChild(this);
+        this.parent?.removeChild(this);
         for (const child of this.children)
         {
-            child.parent = 0;
+            child.parent = undefined;
             child.destroy();
         }
     }
@@ -3654,15 +3706,15 @@ class EngineObject
      *  @param {Vector2} vec - world space vector */
     worldToLocalVector(vec) { return vec.rotate(-this.angle); }
 
-    /** Called to check if a tile collision should be resolved
+    /** Called to check if a tile collision should be resolved. Return true for physics to resolve the collision or false to ignore and resolve it manually.
      *  @param {number}  tileData - the value of the tile at the position
-     *  @param {Vector2} pos      - tile where the collision occurred
-     *  @return {boolean}         - true if the collision should be resolved */
+     *  @param {Vector2} pos - tile where the collision occurred
+     *  @return {boolean} - true if the collision should be resolved by modifying it's position and velocity */
     collideWithTile(tileData, pos) { return tileData > 0; }
 
-    /** Called to check if a object collision should be resolved
+    /** Called by the engine to check if an object collision should be resolved. Return true for physics to resolve the collision or false to ignore and resolve it manually.
      *  @param {EngineObject} object - the object to test against
-     *  @return {boolean}            - true if the collision should be resolved
+     *  @return {boolean} - true if the collision should be resolved by modifying it's position and velocity
      */
     collideWithObject(object) { return true; }
 
@@ -3703,9 +3755,9 @@ class EngineObject
      *  @return {number} -1 if this.mirror is true, or 1 if not mirrored */
     getMirrorSign() { return this.mirror ? -1 : 1; }
 
-    /** Attaches a child to this with a local transform, returns child for chaining   
+    /** Attaches a child to this with a local transform, returns child for chaining
      *  @param {EngineObject} child
-     *  @param {Vector2}      [localPos=(0,0)]
+     *  @param {Vector2}      [localPos=vec2()]
      *  @param {number}       [localAngle]
      *  @return {EngineObject} The child object added */
     addChild(child, localPos=vec2(), localAngle=0)
@@ -3729,7 +3781,7 @@ class EngineObject
         const index = this.children.indexOf(child);
         ASSERT(index >= 0, 'child not found in children array');
         index >= 0 && this.children.splice(index, 1);
-        child.parent = 0;
+        child.parent = undefined;
     }
 
     /** Check if overlapping another engine object
@@ -3741,7 +3793,7 @@ class EngineObject
 
     /** Check if overlapping a point or aligned bounding box
      *  @param {Vector2} pos          - Center of box
-     *  @param {Vector2} [size=(0,0)] - Size of box, uses a point if undefined
+     *  @param {Vector2} [size=vec2()] - Size of box, uses a point if undefined
      *  @return {boolean} */
     isOverlapping(pos, size=vec2())
     { return isOverlapping(this.pos, this.size, pos, size); }
@@ -3784,8 +3836,7 @@ class EngineObject
     /** Render debug info for this object  */
     renderDebugInfo()
     {
-        if (!debug)
-            return;
+        if (!debug) return;
 
         // show object info for debugging
         const size = vec2(max(this.size.x, .2), max(this.size.y, .2));
@@ -3827,11 +3878,6 @@ let mainCanvas;
  *  @memberof Draw */
 let mainContext;
 
-/** The default canvas to use for drawing, usually mainCanvas
- *  @type {HTMLCanvasElement|OffscreenCanvas}
- *  @memberof Draw */
-let drawCanvas;
-
 /** The default 2d context to use for drawing, usually mainContext
  *  @type {CanvasRenderingContext2D|OffscreenCanvasRenderingContext2D}
  *  @memberof Draw */
@@ -3878,10 +3924,11 @@ let drawCount;
  * Create a tile info object using a grid based system
  * - This can take vecs or floats for easier use and conversion
  * - If an index is passed in, the tile size and index will determine the position
- * @param {Vector2|number} [pos=0] - Position of the tile in pixels, or tile index
+ * @param {Vector2|number} [index=0] - Index of the tile in 1d or 2d form
  * @param {Vector2|number} [size] - Size of tile in pixels
- * @param {number} [textureIndex] - Texture index to use
+ * @param {TextureInfo|number} [texture] - Texture index or info to use
  * @param {number} [padding] - How many pixels padding around tiles
+ * @param {number} [bleed] - How many pixels smaller to draw tiles
  * @return {TileInfo}
  * @example
  * tile(2)                       // a tile at index 2 using the default tile size of 16
@@ -3889,36 +3936,43 @@ let drawCount;
  * 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 */
-function tile(pos=new Vector2, size=tileDefaultSize, textureIndex=0, padding=tileDefaultPadding)
+function tile(index=new Vector2, size=tileDefaultSize, texture=0, padding=tileDefaultPadding, bleed=tileDefaultBleed)
 {
-    if (headlessMode)
-        return new TileInfo;
+    ASSERT(isVector2(index) || typeof index === 'number', 'index must be a vec2 or number');
+    ASSERT(isVector2(size) || typeof size === 'number', 'size must be a vec2 or number');
+    ASSERT(isNumber(texture) || texture instanceof TextureInfo, 'texture must be a number or TextureInfo');
+    ASSERT(isNumber(padding), 'padding must be a number');
+
+    if (headlessMode) return new TileInfo;
 
-    // if size is a number, make it a vector
     if (typeof size === 'number')
     {
+        // if size is a number, make it a vector
         ASSERT(size > 0);
         size = new Vector2(size, size);
     }
 
     // create tile info object
-    const tileInfo = new TileInfo(new Vector2, size, textureIndex, padding);
+    const textureInfo = typeof texture === 'number' ?
+        textureInfos[texture] : texture;
 
     // 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')
+    let x, y;
+    if (typeof index === 'number')
     {
         const cols = textureInfo.size.x / sizePaddedX |0;
-        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);
+        x = index % cols;
+        y = index / cols |0;
     }
     else
-        tileInfo.pos.set(pos.x*sizePaddedX+padding, pos.y*sizePaddedY+padding);
-    return tileInfo;
+    {
+        x = index.x;
+        y = index.y;
+    }
+    const pos = new Vector2(x*sizePaddedX + padding, y*sizePaddedY + padding);
+    return new TileInfo(pos, size, textureInfo, padding, bleed);
 }
 
 /**
@@ -3928,24 +3982,22 @@ function tile(pos=new Vector2, size=tileDefaultSize, textureIndex=0, padding=til
 class TileInfo
 {
     /** Create a tile info object
-     *  @param {Vector2} [pos=(0,0)] - Top left corner of tile in pixels
+     *  @param {Vector2} [pos=vec2()] - Top left corner of tile in pixels
      *  @param {Vector2} [size] - Size of tile in pixels
-     *  @param {number}  [textureIndex] - Texture index to use
-     *  @param {number}  [padding] - How many pixels padding around tiles
-     *  @param {number}  [bleed] - How many pixels smaller to draw tiles
+     *  @param {TextureInfo} [textureInfo] - Texture info to use
+     *  @param {number} [padding] - How many pixels padding around tiles
+     *  @param {number} [bleed] - How many pixels smaller to draw tiles
      */
-    constructor(pos=vec2(), size=tileDefaultSize, textureIndex=0, padding=tileDefaultPadding, bleed=tileDefaultBleed)
+    constructor(pos=vec2(), size=tileDefaultSize, textureInfo=textureInfos[0], padding=tileDefaultPadding, bleed=tileDefaultBleed)
     {
         /** @property {Vector2} - Top left corner of tile in pixels */
         this.pos = pos.copy();
         /** @property {Vector2} - Size of tile in pixels */
         this.size = size.copy();
-        /** @property {number} - Texture index to use */
-        this.textureIndex = textureIndex;
         /** @property {number} - How many pixels padding around tiles */
         this.padding = padding;
         /** @property {TextureInfo} - The texture info for this tile */
-        this.textureInfo = textureInfos[this.textureIndex];
+        this.textureInfo = textureInfo;
         /** @property {number} - Shrinks tile by this many pixels to prevent neighbors bleeding */
         this.bleed = bleed;
     }
@@ -3955,7 +4007,7 @@ class TileInfo
     *  @return {TileInfo}
     */
     offset(offset)
-    { return new TileInfo(this.pos.add(offset), this.size, this.textureIndex, this.padding, this.bleed); }
+    { return new TileInfo(this.pos.add(offset), this.size, this.textureInfo, this.padding, this.bleed); }
 
     /** Returns a copy of this tile offset by a number of animation frames
     *  @param {number} frame - Offset to apply in animation frames
@@ -3964,23 +4016,33 @@ class TileInfo
     frame(frame)
     {
         ASSERT(typeof frame === 'number');
-        return this.offset(new Vector2(frame*(this.size.x+this.padding*2), 0));
+        const w = this.size.x + this.padding*2;
+        const x = frame*w;
+        ASSERT(x < this.textureInfo.size.x, 'frame extends beyond texture width!');
+        return this.offset(new Vector2(x));
     }
 
     /**
      * Set this tile to use a full image in a texture info
-     * @param {TextureInfo} textureInfo
+     * @param {TextureInfo} [textureInfo]
      * @return {TileInfo}
      */
-    setFullImage(textureInfo)
+    setFullImage(textureInfo=this.textureInfo)
     {
+        this.textureInfo = textureInfo;
         this.pos = new Vector2;
         this.size = textureInfo.size.copy();
-        this.textureInfo = textureInfo;
-        // do not use padding or bleed
         this.bleed = this.padding = 0;
         return this;
     }
+
+    /**
+     * Returns a tile info for an index using this tile as refrence
+     * @param {Vector2|number} [index=0]
+     * @return {TileInfo}
+     */
+    tile(index)
+    { return tile(index, this.size, this.textureInfo, this.padding, this.bleed); }
 }
 
 /**
@@ -4021,19 +4083,19 @@ 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]            - Is image flipped along the Y axis?
- *  @param {Color}    [additiveColor]     - Additive color to be applied if any
+/** Draw textured tile centered in world space
+ *  @param {Vector2}  pos - Center of the tile in world space
+ *  @param {Vector2}  [size=vec2(1)] - Size of the tile in world space
+ *  @param {TileInfo} [tileInfo] - Tile info to use, untextured if undefined
+ *  @param {Color}    [color=WHITE] - 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=WHITE,
+function drawTile(pos, size=vec2(1), tileInfo, color=WHITE,
     angle=0, mirror, additiveColor, useWebGL=glEnable, screenSpace, context)
 {
     ASSERT(isVector2(pos), 'pos must be a vec2');
@@ -4108,8 +4170,8 @@ function drawTile(pos, size=new Vector2(1), tileInfo, color=WHITE,
 
 /** Draw colored rect centered on pos
  *  @param {Vector2} pos
- *  @param {Vector2} [size=(1,1)]
- *  @param {Color}   [color=(1,1,1,1)]
+ *  @param {Vector2} [size=vec2(1)]
+ *  @param {Color}   [color=WHITE]
  *  @param {number}  [angle]
  *  @param {boolean} [useWebGL=glEnable]
  *  @param {boolean} [screenSpace]
@@ -4122,9 +4184,9 @@ function drawRect(pos, size, color, angle, 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 {Vector2} [size=vec2(1)]
+ *  @param {Color}   [colorTop=WHITE]
+ *  @param {Color}   [colorBottom=BLACK]
  *  @param {number}  [angle]
  *  @param {boolean} [useWebGL=glEnable]
  *  @param {boolean} [screenSpace]
@@ -4186,9 +4248,9 @@ function drawRectGradient(pos, size, colorTop=WHITE, colorBottom=BLACK, angle=0,
 /** Draw connected lines between a series of points
  *  @param {Array<Vector2>} points
  *  @param {number}  [width]
- *  @param {Color}   [color=(1,1,1,1)]
+ *  @param {Color}   [color=WHITE]
  *  @param {boolean} [wrap] - Should the last point connect to the first?
- *  @param {Vector2} [pos=(0,0)] - Offset to apply
+ *  @param {Vector2} [pos=vec2()] - Offset to apply
  *  @param {number}  [angle] - Angle to rotate by
  *  @param {boolean} [useWebGL=glEnable]
  *  @param {boolean} [screenSpace]
@@ -4223,13 +4285,9 @@ function drawLineList(points, width=.1, color, wrap=false, pos=vec2(), angle=0,
             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);
+                context.lineTo(point.x, point.y);
             }
-            if (wrap)
-                context.closePath();
+            wrap && context.closePath();
             context.stroke();
         }, screenSpace, context);
     }
@@ -4239,8 +4297,8 @@ function drawLineList(points, width=.1, color, wrap=false, pos=vec2(), angle=0,
  *  @param {Vector2} posA
  *  @param {Vector2} posB
  *  @param {number}  [width]
- *  @param {Color}   [color=(1,1,1,1)]
- *  @param {Vector2} [pos=(0,0)] - Offset to apply
+ *  @param {Color}   [color=WHITE]
+ *  @param {Vector2} [pos=vec2()] - Offset to apply
  *  @param {number}  [angle] - Angle to rotate by
  *  @param {boolean} [useWebGL=glEnable]
  *  @param {boolean} [screenSpace]
@@ -4259,12 +4317,12 @@ function drawLine(posA, posB, width=.1, color, pos=vec2(), angle=0, useWebGL, sc
 
 /** Draw colored regular polygon using passed in number of sides
  *  @param {Vector2} pos
- *  @param {Vector2} [size=(1,1)]
+ *  @param {Vector2} [size=vec2(1)]
  *  @param {number}  [sides]
- *  @param {Color}   [color=(1,1,1,1)]
+ *  @param {Color}   [color=WHITE]
  *  @param {number}  [angle]
  *  @param {number}  [lineWidth]
- *  @param {Color}   [lineColor=(0,0,0,1)]
+ *  @param {Color}   [lineColor=BLACK]
  *  @param {boolean} [useWebGL=glEnable]
  *  @param {boolean} [screenSpace]
  *  @param {CanvasRenderingContext2D|OffscreenCanvasRenderingContext2D} [context]
@@ -4287,10 +4345,10 @@ function drawRegularPoly(pos, size=vec2(1), sides=3, color=WHITE, lineWidth=0, l
 
 /** Draw colored polygon using passed in points
  *  @param {Array<Vector2>} points - Array of Vector2 points
- *  @param {Color}   [color=(1,1,1,1)]
+ *  @param {Color}   [color=WHITE]
  *  @param {number}  [lineWidth]
- *  @param {Color}   [lineColor=(0,0,0,1)]
- *  @param {Vector2} [pos=(0,0)] - Offset to apply
+ *  @param {Color}   [lineColor=BLACK]
+ *  @param {Vector2} [pos=vec2()] - Offset to apply
  *  @param {number}  [angle] - Angle to rotate by
  *  @param {boolean} [useWebGL=glEnable]
  *  @param {boolean} [screenSpace]
@@ -4337,11 +4395,11 @@ function drawPoly(points, color=WHITE, lineWidth=0, lineColor=BLACK, pos=vec2(),
 
 /** Draw colored ellipse using passed in point
  *  @param {Vector2} pos
- *  @param {Vector2} [size=(1,1)] - Width and height diameter
- *  @param {Color}   [color=(1,1,1,1)]
+ *  @param {Vector2} [size=vec2(1)] - Width and height diameter
+ *  @param {Color}   [color=WHITE]
  *  @param {number}  [angle]
  *  @param {number}  [lineWidth]
- *  @param {Color}   [lineColor=(0,0,0,1)]
+ *  @param {Color}   [lineColor=BLACK]
  *  @param {boolean} [useWebGL=glEnable]
  *  @param {boolean} [screenSpace]
  *  @param {CanvasRenderingContext2D|OffscreenCanvasRenderingContext2D} [context]
@@ -4383,9 +4441,9 @@ function drawEllipse(pos, size=vec2(1), color=WHITE, angle=0, lineWidth=0, lineC
 /** Draw colored circle using passed in point
  *  @param {Vector2} pos
  *  @param {number}  [size=1] - Diameter
- *  @param {Color}   [color=(1,1,1,1)]
+ *  @param {Color}   [color=WHITE]
  *  @param {number}  [lineWidth=0]
- *  @param {Color}   [lineColor=(0,0,0,1)]
+ *  @param {Color}   [lineColor=BLACK]
  *  @param {boolean} [useWebGL=glEnable]
  *  @param {boolean} [screenSpace]
  *  @param {CanvasRenderingContext2D|OffscreenCanvasRenderingContext2D} [context]
@@ -4419,7 +4477,11 @@ function drawCanvas2D(pos, size, angle=0, mirror=false, drawFunction, screenSpac
     ASSERT(typeof drawFunction === 'function', 'drawFunction must be a function');
 
     if (!screenSpace)
-        [pos, size, angle] = worldToScreenTransform(pos, size, angle);
+    {
+        pos = worldToScreen(pos);
+        size = size.scale(cameraScale);
+        angle -= cameraAngle;
+    }
     context.save();
     context.translate(pos.x+.5, pos.y+.5);
     context.rotate(angle);
@@ -4436,9 +4498,9 @@ function drawCanvas2D(pos, size, angle=0, mirror=false, drawFunction, screenSpac
  *  @param {string|number}  text
  *  @param {Vector2} pos
  *  @param {number}  [size]
- *  @param {Color}   [color=(1,1,1,1)]
+ *  @param {Color}   [color=WHITE]
  *  @param {number}  [lineWidth]
- *  @param {Color}   [lineColor=(0,0,0,1)]
+ *  @param {Color}   [lineColor=BLACK]
  *  @param {CanvasTextAlign}  [textAlign='center']
  *  @param {string}  [font=fontDefault]
  *  @param {string}  [fontStyle]
@@ -4462,18 +4524,18 @@ function drawText(text, pos, size=1, color, lineWidth=0, lineColor, textAlign, f
  *  Automatically splits new lines into rows
  *  @param {string|number}  text
  *  @param {Vector2} pos
- *  @param {number}  [size]
- *  @param {Color}   [color=(1,1,1,1)]
+ *  @param {number}  size
+ *  @param {Color}   [color=WHITE]
  *  @param {number}  [lineWidth]
- *  @param {Color}   [lineColor=(0,0,0,1)]
+ *  @param {Color}   [lineColor=BLACK]
  *  @param {CanvasTextAlign}  [textAlign]
  *  @param {string}  [font=fontDefault]
  *  @param {string}  [fontStyle]
  *  @param {number}  [maxWidth]
  *  @param {number}  [angle]
- *  @param {CanvasRenderingContext2D|OffscreenCanvasRenderingContext2D} [context=mainContext]
+ *  @param {CanvasRenderingContext2D|OffscreenCanvasRenderingContext2D} [context=drawContext]
  *  @memberof Draw */
-function drawTextScreen(text, pos, size=1, color=WHITE, lineWidth=0, lineColor=BLACK, textAlign='center', font=fontDefault, fontStyle='', maxWidth, angle=0, context=mainContext)
+function drawTextScreen(text, pos, size, color=WHITE, lineWidth=0, lineColor=BLACK, textAlign='center', font=fontDefault, fontStyle='', maxWidth, angle=0, context=drawContext)
 {
     ASSERT(isString(text), 'text must be a string');
     ASSERT(isVector2(pos), 'pos must be a vec2');
@@ -4597,7 +4659,7 @@ function worldToScreenDelta(worldDelta)
 
 /** Convert screen space transform to world space
  *  @param {Vector2} screenPos
- *  @param {Vector2} screenSize  
+ *  @param {Vector2} screenSize
  *  @param {number} [screenAngle]
  *  @return {[Vector2, Vector2, number]} - [pos, size, angle]
  *  @memberof Draw */
@@ -4614,25 +4676,6 @@ function screenToWorldTransform(screenPos, screenSize, screenAngle=0)
     ];
 }
 
-/** Convert world space transform to screen space
- *  @param {Vector2} worldPos
- *  @param {Vector2} worldSize  
- *  @param {number} [worldAngle]
- *  @return {[Vector2, Vector2, number]} - [pos, size, angle]
- *  @memberof Draw */
-function worldToScreenTransform(worldPos, worldSize, worldAngle=0)
-{
-    ASSERT(isVector2(worldPos), 'worldPos must be a vec2');
-    ASSERT(isVector2(worldSize), 'worldSize must be a vec2');
-    ASSERT(isNumber(worldAngle), 'worldAngle must be a number');
-
-    return [
-        worldToScreen(worldPos),
-        worldSize.scale(cameraScale),
-        worldAngle - cameraAngle
-    ];
-}
-
 /** Get the size of the camera window in world space
  *  @return {Vector2}
  *  @memberof Draw */
@@ -4677,10 +4720,9 @@ function isOnScreen(pos, size=0)
  *  @param {boolean} [additive]
  *  @param {CanvasRenderingContext2D|OffscreenCanvasRenderingContext2D} [context]
  *  @memberof Draw */
-function setBlendMode(additive=false, context)
+function setBlendMode(additive=false, context=drawContext)
 {
     glAdditive = additive;
-    context ||= drawContext;
     context.globalCompositeOperation = additive ? 'lighter' : 'source-over';
 }
 
@@ -4695,7 +4737,6 @@ function combineCanvases()
     workContext.fillRect(0,0,w,h); // remove background alpha
     glCopyToContext(workContext);
     workContext.drawImage(mainCanvas, 0, 0);
-    mainCanvas.width |= 0;
     mainContext.drawImage(workCanvas, 0, 0);
 }
 
@@ -4800,17 +4841,22 @@ function setCursor(cursorStyle = 'auto')
 
 ///////////////////////////////////////////////////////////////////////////////
 
+/** Engine font image, 8x8 font provided by the engine
+ *  @type {FontImage}
+ *  @memberof Draw */
 let engineFontImage;
 
 /**
- * Font Image Object - Draw text on a 2D canvas by using characters in an image
+ * Font Image Object - Draw text by using tiles in an image
  * - 96 characters (from space to tilde) are stored in an image
- * - Uses a default 8x8 font if none is supplied
- * - You can also use fonts from the main tile sheet
+ * - A 8x8 default engine font is supplied for general use
+ * - This system is WebGL enabled for fast text rendering
+ * - Fonts can also be colored and scaled along each axis
+ * 
  * @memberof Draw
  * @example
  * // use built in font
- * const font = new FontImage;
+ * const font = engineFontImage;
  *
  * // draw text
  * font.drawTextScreen('LittleJS\nHello World!', vec2(200, 50));
@@ -4818,70 +4864,112 @@ let engineFontImage;
 class FontImage
 {
     /** Create an image font
-     *  @param {HTMLImageElement} [image] - Image for the font, default if undefined
-     *  @param {Vector2} [tileSize=(8,8)] - Size of the font source tiles
-     *  @param {Vector2} [paddingSize=(0,1)] - How much space between characters
+     *  @param {TileInfo} tileInfo - Tile info of first characeter in font
      */
-    constructor(image, tileSize=vec2(8), paddingSize=vec2(0,1))
+    constructor(tileInfo)
     {
-        // load default font image
-        if (!image && !engineFontImage)
-        {
-            engineFontImage = new Image;
-            engineFontImage.src = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAQAAAAAYAQAAAAA9+x6JAAAAAnRSTlMAAHaTzTgAAAGiSURBVHjaZZABhxxBEIUf6ECLBdFY+Q0PMNgf0yCgsSAGZcT9sgIPtBWwIA5wgAPEoHUyJeeSlW+gjK+fegWwtROWpVQEyWh2npdpBmTUFVhb29RINgLIukoXr5LIAvYQ5ve+1FqWEMqNKTX3FAJHyQDRZvmKWubAACcv5z5Gtg2oyCWE+Yk/8JZQX1jTTCpKAFGIgza+dJCNBF2UskRlsgwitHbSV0QLgt9sTPtsRlvJjEr8C/FARWA2bJ/TtJ7lko34dNDn6usJUMzuErP89UUBJbWeozrwLLncXczd508deAjLWipLO4Q5XGPcJvPu92cNDaN0P5G1FL0nSOzddZOrJ6rNhbXGmeDvO3TF7DeJWl4bvaYQTNHCTeuqKZmbjHaSOFes+IX/+IhHrnAkXOAsfn24EM68XieIECoccD4KZLk/odiwzeo2rovYdhvb2HYFgyznJyDpYJdYOmfXgVdJTaUi4xA2uWYNYec9BLeqdl9EsoTw582mSFDX2DxVLbNt9U3YYoeatBad1c2Tj8t2akrjaIGJNywKB/7h75/gN3vCMSaadIUTAAAAAElFTkSuQmCC';
-        }
-
-        this.image = image || engineFontImage;
-        this.tileSize = tileSize;
-        this.paddingSize = paddingSize;
+        ASSERT(!!tileInfo, 'tileInfo is required for FontImage');
+        
+        /** @property {TileInfo} - Tile info for the font */
+        this.tileInfo = tileInfo.frame(0);
     }
 
     /** Draw text in world space using the image font
-     *  @param {string|number}  text
+     *  @param {string|number} text
      *  @param {Vector2} pos
-     *  @param {number}  [scale=.25]
-     *  @param {boolean} [center]
-     *  @param {CanvasRenderingContext2D|OffscreenCanvasRenderingContext2D} [context=drawContext] 
+     *  @param {Vector2|number} [size]
+     *  @param {boolean} [center=true]
+     *  @param {Color} [color=WHITE]
+     *  @param {boolean} [useWebGL=glEnable]
+     *  @param {CanvasRenderingContext2D|OffscreenCanvasRenderingContext2D} [context] 
      */
-    drawText(text, pos, scale=1, center, context=drawContext)
+    drawText(text, pos, size=1, center, color, useWebGL, context)
     {
-        this.drawTextScreen(text, worldToScreen(pos).floor(), scale*cameraScale|0, center, context);
+        ASSERT(isVector2(size) || typeof size === 'number', 'size must be a vec2 or number');
+
+        if (typeof size === 'number')
+        {
+            // if size is a number, make it a vector
+            ASSERT(size > 0);
+            size *= cameraScale;
+            size = new Vector2(size, size);
+        }
+        else
+            size = size.scale(cameraScale);
+        this.drawTextScreen(text, worldToScreen(pos), size, center, color, useWebGL, context);
     }
 
     /** Draw text in screen space using the image font
-     *  @param {string|number}  text
+     *  @param {string|number} text
      *  @param {Vector2} pos
-     *  @param {number}  [scale]
+     *  @param {Vector2|number} size
      *  @param {boolean} [center]
-     *  @param {CanvasRenderingContext2D|OffscreenCanvasRenderingContext2D} [context=drawContext]
+     *  @param {Color} [color=WHITE]
+     *  @param {boolean} [useWebGL=glEnable]
+     *  @param {CanvasRenderingContext2D|OffscreenCanvasRenderingContext2D} [context]
      */
-    drawTextScreen(text, pos, scale=4, center=true, context=mainContext)
+    drawTextScreen(text, pos, size, center=true, color=WHITE, useWebGL=glEnable, context)
     {
-        context.save();
-        const size = this.tileSize;
-        const drawSize = size.add(this.paddingSize).scale(scale);
-        const cols = this.image.width / this.tileSize.x |0;
-        (text+'').split('\n').forEach((line, i)=>
+        ASSERT(isString(text), 'text must be a string');
+        ASSERT(isVector2(pos), 'pos must be a vec2');
+        ASSERT(isVector2(size) || typeof size === 'number', 'size must be a vec2 or number');
+        ASSERT(isColor(color), 'color must be a color');
+
+        // if size is a number, make it a vector
+        size = typeof size === 'number' ? new Vector2(size, size) : size;
+
+        // precache objects for drawing
+        const drawPos = new Vector2;
+        const tileInfo = this.tileInfo;
+        const padding = tileInfo.padding;
+        const sizePaddedX = tileInfo.size.x + padding*2;
+        const sizePaddedY = tileInfo.size.y + padding*2;
+        const cols = tileInfo.textureInfo.size.x / sizePaddedX |0;
+
+        // draw each line of text
+        (text+'').split('\n').forEach((line, j)=>
         {
-            const centerOffset = center ? line.length * size.x * scale / 2 |0 : 0;
-            for (let j=line.length; j--;)
+            const centerOffset = center ? (line.length-1) * size.x / 2 : 0;
+            for (let i=line.length; i--;)
             {
-                // draw each character
-                let charCode = line[j].charCodeAt(0);
-                if (charCode < 32 || charCode > 127)
-                    charCode = 127; // unknown character
-
-                // get the character source location and draw it
-                const tile = charCode - 32;
-                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,
-                    drawPos.x - centerOffset, drawPos.y, size.x * scale, size.y * scale);
+                // get the character index
+                const charCode = line.charCodeAt(i);
+                const index = charCode < 32 || charCode > 127 ?
+                    95 : charCode - 32; // handle out of range characters
+
+                // get the position of the tile
+                const x = index % cols;
+                const y = index / cols |0;
+                tileInfo.pos.x = x*sizePaddedX + padding;
+                tileInfo.pos.y = y*sizePaddedY + padding;
+
+                // draw the tile
+                drawPos.x = pos.x + i * size.x - centerOffset |0;
+                drawPos.y = pos.y + j * size.y |0;
+                drawTile(drawPos, size, tileInfo, color, 0, false, undefined, useWebGL, true, context);
             }
         });
-        context.restore();
     }
+}
+
+// load engine font, called automatically on startup
+function fontImageInit()
+{
+    return new Promise(resolve =>
+    {
+        // create the engine font
+        const image = new Image;
+        image.onerror = image.onload = ()=>
+        {
+            const tilePos=vec2(), tileSize=vec2(8), padding=1, bleed=0;
+            const textureInfo = new TextureInfo(image);
+            const tileInfo = new TileInfo(tilePos, tileSize, textureInfo, padding, bleed);
+            engineFontImage = new FontImage(tileInfo);
+            resolve();
+        }
+        image.crossOrigin = 'anonymous';
+        image.src = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAUAAAAAeAQMAAABnrVXaAAAABlBMVEUAAAD///+l2Z/dAAAAAXRSTlMAQObYZgAAAjpJREFUOMu9kzFu2zAUhn+CAROgqrk+B2l0BWYxMjlXeYaAtFtbdA1sGgHqRQfI0CNkSG5AwYB0BQ8d5Bsomwah6CPVeGg6tEPzAxLwyI+P78cP4u9lNO9OoMKnLMOobG5020/yaj/MrRcCGh1gBbyiLTPJEYaIiom5KM9Jq7KgynMGtb6L4GL4MF2H4LQKCXTvDVw2I4MsgZT7QLExdiutH+D08VOP3INXRrWX1/mmpbkNgAPYRVANb4xpcegYvhiNbIXauQICEjBuYLfMakaakWQeXxiZ0VDtuJCKs3ztMV59QtsHJNcRxDzfdL21ty3PrfIcXTN+E+GFAv6T5nbT9jd50/WFxb5ksdAv49qS6ouymG66ji08UMT6moykYLAo+V0j23GN4m829ZySAD5K7QsBfQTvOG8eE+gTeGYRAmnNAubN3hf5Zv9tJWDHp/VTuaSm7SN4fyINQqaNO3RMVxvpSPXnOChnRNvFcGY0gnwiPswYwTKVPE0zVtX3mTEIOoFzaqLrGuJaV+Uqumb71fVk/VoOH3cdLNQP/FHi8hV0CQNoqBZsUPlLPMsdCJro9QAaQQ0woDy9BJm0eTxCFnO9srcYlhNVlfR2EyTrph1uUtbUtAJifwRgrKuYdXVHeb0YI3QpawohQHkloI3J5FuVwI5ORxC9k2Tuz9Ir1IjgeIPGMHYkAZe2RuYkmWFmt3gGbTPOmBUWVTmRmHtGrfpzG/yuQNOKa6gBB/WA9khitPgl6/GP+gl2Af6tCbvaygAAAABJRU5ErkJggg==';
+    });
 }
 /**
  * LittleJS Input System
@@ -4938,6 +5026,10 @@ let inputPreventDefault = true;
  *  @memberof Input */
 let gamepadPrimary = 0;
 
+/** True if a touch device has been detected
+ *  @memberof Input */
+const isTouchDevice = !headlessMode && window.ontouchstart !== undefined;
+
 /** Prevents input continuing to the default browser handling
  *  This is useful to disable for html menus so the browser can handle input normally
  *  @param {boolean} preventDefault
@@ -5136,10 +5228,6 @@ function gamepadStickCount(gamepad=gamepadPrimary)
     return gamepadStickData[gamepad]?.length ?? 0;
 }
 
-/** True if a touch device has been detected
- *  @memberof Input */
-const isTouchDevice = !headlessMode && window.ontouchstart !== undefined;
-
 ///////////////////////////////////////////////////////////////////////////////
 
 /** Pulse the vibration hardware if it exists
@@ -5148,7 +5236,7 @@ const isTouchDevice = !headlessMode && window.ontouchstart !== undefined;
 function vibrate(pattern=100)
 {
     ASSERT(isNumber(pattern) || isArray(pattern), 'pattern must be a number or array');
-    vibrateEnable && !headlessMode && navigator && navigator.vibrate && navigator.vibrate(pattern);
+    vibrateEnable && !headlessMode && navigator?.vibrate?.(pattern);
 }
 
 /** Cancel any ongoing vibration
@@ -5248,8 +5336,7 @@ function inputInit()
     }
     function onMouseDown(e)
     {
-        if (isTouchDevice && touchInputEnable)
-            return;
+        if (isTouchDevice && touchInputEnable) return;
 
         // fix stalled audio requiring user interaction
         if (soundEnable && !headlessMode && audioContext && !audioIsRunning())
@@ -5267,8 +5354,8 @@ function inputInit()
     }
     function onMouseUp(e)
     {
-        if (isTouchDevice && touchInputEnable)
-            return;
+        if (isTouchDevice && touchInputEnable) return;
+
         inputData[0][e.button] = (inputData[0][e.button]&2) | 4;
     }
     function onMouseMove(e)
@@ -5300,8 +5387,7 @@ function inputInit()
         let wasTouching;
         function handleTouch(e)
         {
-            if (!touchInputEnable)
-                return;
+            if (!touchInputEnable) return;
 
             // route touch to gamepad
             if (touchGamepadEnable)
@@ -5365,8 +5451,7 @@ function inputInit()
             }
 
             // don't process touch gamepad if paused
-            if (paused)
-                return;
+            if (paused) return;
 
             // get center of left and right sides
             const stickCenter = vec2(touchGamepadSize, mainCanvasSize.y-touchGamepadSize);
@@ -5456,8 +5541,7 @@ function inputUpdate()
         // update touch gamepad if enabled
         if (touchGamepadEnable && isTouchDevice)
         {
-            if (!touchGamepadTimer.isSet())
-                return;
+            if (!touchGamepadTimer.isSet()) return;
 
             // read virtual analog stick
             gamepadPrimary = 0; // touch gamepad uses index 0
@@ -5495,12 +5579,10 @@ function inputUpdate()
         }
 
         // return if gamepads are disabled or not supported
-        if (!gamepadsEnable || !navigator || !navigator.getGamepads)
-            return;
+        if (!gamepadsEnable || !navigator || !navigator.getGamepads) return;
 
         // only poll gamepads when focused or in debug mode
-        if (!debug && !document.hasFocus())
-            return;
+        if (!debug && !document.hasFocus()) return;
 
         // poll gamepads
         const maxGamepads = 8;
@@ -5537,8 +5619,7 @@ function inputUpdate()
                 data[j] = button.pressed ? wasDown ? 1 : 3 : wasDown ? 4 : 0;
 
                 // check for any input on this gamepad, analog must be full press
-                if (button.pressed)
-                if (!button.value || button.value > .9)
+                if (button.pressed && (!button.value || button.value > .9))
                     hadInput = true;
             }
             
@@ -5567,7 +5648,7 @@ function inputUpdate()
             }
 
             // copy dpad to left analog stick when pressed
-            if (gamepadDirectionEmulateStick && !dpad.isZero())
+            if (gamepadDirectionEmulateStick && (dpad.x || dpad.y))
                 sticks[0] = dpad.clampLength();
         }
 
@@ -5596,13 +5677,11 @@ function inputRender()
     function touchGamepadRender()
     {
         if (!touchInputEnable || !isTouchDevice || headlessMode) return;
-        if (!touchGamepadEnable || !touchGamepadTimer.isSet())
-            return;
+        if (!touchGamepadEnable || !touchGamepadTimer.isSet()) return;
 
         // fade off when not touching or paused
         const alpha = percent(touchGamepadTimer.get(), 4, 3);
-        if (!alpha || paused)
-            return;
+        if (!alpha || paused) return;
 
         // setup the canvas
         const context = mainContext;
@@ -5755,8 +5834,7 @@ class Sound
         {
             // remove randomness so it can be applied on playback
             const randomnessIndex = 1, defaultRandomness = .05;
-            this.randomness = zzfxSound[randomnessIndex] !== undefined ? 
-                zzfxSound[randomnessIndex] : defaultRandomness;
+            this.randomness = zzfxSound[randomnessIndex] ?? defaultRandomness;
             zzfxSound[randomnessIndex] = 0;
 
             // generate the zzfx samples
@@ -5836,7 +5914,7 @@ class Sound
      *  @return {number} - How long the sound is in seconds (undefined if loading)
      */
     getDuration()
-    { return this.sampleChannels && this.sampleRate ? this.sampleChannels[0].length / this.sampleRate : 0; }
+    { return this.sampleChannels?.[0].length / this.sampleRate || 0; }
 
     /** Check if sound is loaded, for sounds fetched from a url
      *  @return {boolean} - True if sound is loaded and ready to play
@@ -5928,8 +6006,7 @@ class SoundWave extends Sound
         this.sampleRate = audioBuffer.sampleRate;
         this.sampleChannels = sampleChannels;
         this.loadedPercent = 1;
-        if (this.onloadCallback)
-            this.onloadCallback(this);
+        this.onloadCallback?.(this);
     }
 }
 
@@ -6052,8 +6129,7 @@ class SoundInstance
     /** Pause this sound instance */
     pause()
     {
-        if (this.isPaused())
-            return;
+        if (this.isPaused()) return;
 
         // save current time and stop sound
         this.pausedTime = this.getCurrentTime();
@@ -6065,8 +6141,7 @@ class SoundInstance
     /** Unpauses this sound instance */
     resume()
     {
-        if (!this.isPaused())
-            return;
+        if (!this.isPaused()) return;
         
         // restart sound from paused time
         this.start(this.pausedTime);
@@ -6134,7 +6209,7 @@ function speak(text, language='', volume=1, rate=1, pitch=1)
 
 /** Stop all queued speech
  *  @memberof Audio */
-function speakStop() {speechSynthesis && speechSynthesis.cancel();}
+function speakStop() {speechSynthesis?.cancel();}
 
 /** Get frequency of a note on a musical scale
  *  @param {number} semitoneOffset - How many semitones away from the root note
@@ -6393,7 +6468,7 @@ function tileCollisionGetData(pos)
 
 /** Check if a tile layer collides with another object
  *  @param {Vector2}      pos
- *  @param {Vector2}      [size=(0,0)]
+ *  @param {Vector2}      [size=vec2()]
  *  @param {EngineObject} [object] - An object or undefined for generic test
  *  @param {boolean}      [solidOnly] - Only check solid layers if true
  *  @return {TileCollisionLayer}
@@ -6511,20 +6586,20 @@ function tileLayersLoad(tileMapData, tileInfo=tile(), renderOrder=0, collisionLa
 class TileLayerData
 {
     /** Create a tile layer data object, one for each tile in a TileLayer
-     *  @param {number}  [tile]      - The tile to use, untextured if undefined
+     *  @param {number}  [tile] - The tile to use, untextured if undefined
      *  @param {number}  [direction] - Integer direction of tile, in 90 degree increments
-     *  @param {boolean} [mirror]    - If the tile should be mirrored along the x axis
-     *  @param {Color}   [color]     - Color of the tile */
+     *  @param {boolean} [mirror] - If the tile should be mirrored along the x axis
+     *  @param {Color}   [color] - Color of the tile */
     constructor(tile, direction=0, mirror=false, color=new Color)
     {
-        /** @property {number}  - The tile to use, untextured if undefined */
-        this.tile      = tile;
-        /** @property {number}  - Integer direction of tile, in 90 degree increments */
+        /** @property {number} - The tile to use, untextured if undefined */
+        this.tile = tile;
+        /** @property {number} - Integer direction of tile, in 90 degree increments */
         this.direction = direction;
         /** @property {boolean} - If the tile should be mirrored along the x axis */
-        this.mirror    = mirror;
-        /** @property {Color}   - Color of the tile */
-        this.color     = color.copy();
+        this.mirror = mirror;
+        /** @property {Color} - Color of the tile */
+        this.color = color.copy();
     }
 
     /** Set this tile to clear, it will not be rendered */
@@ -6535,7 +6610,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 updateWebGL to enable/update
  * @extends EngineObject
  * @memberof TileLayers
  * @example
@@ -6549,8 +6624,9 @@ class CanvasLayer extends EngineObject
      *  @param {number}   [angle] - Angle the layer is rotated by
      *  @param {number}   [renderOrder] - Objects sorted by renderOrder
      *  @param {Vector2}  [canvasSize] - Default size of canvas, can be changed later
+     *  @param {boolean}  [useWebGL] - Should this layer use WebGL for rendering
     */
-    constructor(position, size, angle=0, renderOrder=0, canvasSize=vec2(512))
+    constructor(position, size, angle=0, renderOrder=0, canvasSize=vec2(512), useWebGL=glEnable)
     {
         ASSERT(isVector2(canvasSize), 'canvasSize must be a Vector2');
         super(position, size, undefined, angle, WHITE, renderOrder);
@@ -6560,13 +6636,10 @@ class CanvasLayer extends EngineObject
         /** @property {OffscreenCanvasRenderingContext2D} - The 2D canvas context used by this layer */
         this.context = this.canvas?.getContext('2d');
         /** @property {TextureInfo} - Texture info to use for this object rendering */
-        const useWebGL = false; // do not use webgl by default
         this.textureInfo = new TextureInfo(this.canvas, useWebGL);
-        /** @property {boolean} - True if WebGL texture needs to be refreshed */
-        this.refreshWebGL = false;
 
         // disable physics by default
-        this.mass = this.gravityScale = this.friction = this.restitution = 0;
+        this.mass = 0;
     }
 
     /** Destroy this canvas layer */
@@ -6581,7 +6654,7 @@ class CanvasLayer extends EngineObject
     // Render the layer, called automatically by the engine
     render()
     {
-        this.draw(this.pos, this.size, this.angle, this.color, this.mirror, this.additiveColor);
+        this.draw(this.pos, this.size, this.color, this.angle, this.mirror, this.additiveColor);
     }
 
     /** Draw this canvas layer centered in world space, with color applied if using WebGL
@@ -6594,103 +6667,54 @@ class CanvasLayer extends EngineObject
     *  @param {boolean} [screenSpace] - If true the pos and size are in screen space
     *  @param {CanvasRenderingContext2D|OffscreenCanvasRenderingContext2D} [context] - Canvas 2D context to draw to
     *  @memberof Draw */
-    draw(pos, size, angle=0, color=WHITE, mirror=false, additiveColor, screenSpace=false, context)
+    draw(pos, size, color=WHITE, angle=0, mirror=false, additiveColor, screenSpace=false, context)
     {
-        const useWebGL = glEnable && this.textureInfo.hasWebGL();
-        if (useWebGL && this.refreshWebGL)
-        {
-            // update the WebGL texture
-            this.textureInfo.createWebGLTexture();
-            this.refreshWebGL = false;
-        }
-
         // draw the canvas layer as a single tile that uses the whole texture
         const tileInfo = new TileInfo().setFullImage(this.textureInfo);
+        const useWebGL = this.hasWebGL();
         drawTile(pos, size, tileInfo, color, angle, mirror, additiveColor, useWebGL, screenSpace, context);
     }
 
-    /**
-     * @callback Canvas2DDrawCallback - Function that draws to a canvas 2D context
-     * @param {CanvasRenderingContext2D|OffscreenCanvasRenderingContext2D} context
-     * @memberof TileLayers
-     */
-
-    /** Draw onto the layer canvas in world space (bypass WebGL)
+    /** Draw a tile onto the layer canvas in world space
      *  @param {Vector2}  pos
-     *  @param {Vector2}  size
-     *  @param {number}   angle
-     *  @param {boolean}  mirror
-     *  @param {Canvas2DDrawCallback} drawFunction */
-    drawCanvas2D(pos, size, angle, mirror, drawFunction)
+     *  @param {Vector2}  [size=vec2(1)]
+     *  @param {TileInfo} [tileInfo]
+     *  @param {Color}    [color=WHITE]
+     *  @param {number}   [angle]
+     *  @param {boolean}  [mirror] */
+    drawTile(pos, size=vec2(1), tileInfo, color=new Color, angle=0, mirror=false)
     {
-        if (!this.context) return;
-
-        const context = this.context;
-        context.save();
         pos = pos.subtract(this.pos).multiply(this.tileInfo.size);
         size = size.multiply(this.tileInfo.size);
-        context.translate(pos.x, this.canvas.height - pos.y);
-        context.rotate(angle);
-        context.scale(mirror ? -size.x : size.x, size.y);
-        drawFunction(context);
-        context.restore();
-    }
+        pos.y = this.canvas.height - pos.y;
 
-    /** Draw a tile onto the layer canvas in world space
-     *  @param {Vector2}  pos
-     *  @param {Vector2}  [size=(1,1)]
-     *  @param {TileInfo} [tileInfo]
-     *  @param {Color}    [color=(1,1,1,1)]
-     *  @param {number}   [angle=0]
-     *  @param {boolean}  [mirror=false] */
-    drawTile(pos, size=vec2(1), tileInfo, color=new Color, angle, mirror)
-    {
-        this.drawCanvas2D(pos, size, angle, mirror, (context)=>
-        {
-            const textureInfo = tileInfo && tileInfo.textureInfo;
-            if (textureInfo)
-            {
-                context.globalAlpha = color.a; // only alpha is supported
-                context.drawImage(textureInfo.image,
-                    tileInfo.pos.x,  tileInfo.pos.y,
-                    tileInfo.size.x, tileInfo.size.y, -.5, -.5, 1, 1);
-                context.globalAlpha = 1;
-            }
-            else
-            {
-                // untextured
-                context.fillStyle = color.toString();
-                context.fillRect(-.5, -.5, 1, 1);
-            }
-        });
+        // draw the tile onto the layer canvas
+        const oldMainCanvasSize = mainCanvasSize;
+        mainCanvasSize = vec2(this.canvas.width, this.canvas.height);
+        const useWebGL = this.hasWebGL();
+        useWebGL && glSetRenderTarget(this.textureInfo.glTexture);
+        const drawContext = useWebGL ? undefined : this.context;
+        drawTile(pos, size, tileInfo, color, angle, mirror, undefined, useWebGL, true, drawContext);
+        useWebGL && glSetRenderTarget();
+        mainCanvasSize = oldMainCanvasSize;
     }
 
     /** Draw a rectangle onto the layer canvas in world space
      *  @param {Vector2} pos
-     *  @param {Vector2} [size=(1,1)]
-     *  @param {Color}   [color=(1,1,1,1)]
-     *  @param {number}  [angle=0] */
+     *  @param {Vector2} [size=vec2(1)]
+     *  @param {Color}   [color=WHITE]
+     *  @param {number}  [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 
-     *  @param {boolean} [immediate] - shoulkd the texture be updated immediately
-     */
-    useWebGL(enable=true, immediate=false)
-    {
-        if (!immediate && enable && this.textureInfo.hasWebGL())
-        {
-            // refresh the texture when needed
-            this.refreshWebGL = true;
-            return;
-        }
+    /** Create WebGL texture if necessary and copy layer canvas to it */
+    updateWebGL()
+    { this.textureInfo.createWebGLTexture(); }
 
-        if (enable)
-            this.textureInfo.createWebGLTexture();
-        else
-            this.textureInfo.destroyWebGLTexture();
-    }
+    /** Check if this layer is using WebGL
+     *  @return {boolean} */
+    hasWebGL()
+    { return glEnable && this.textureInfo.hasWebGL(); }
 }
 
 ///////////////////////////////////////////////////////////////////////////////
@@ -6709,50 +6733,67 @@ class CanvasLayer extends EngineObject
 class TileLayer extends CanvasLayer
 {
     /** Create a tile layer object
-    *  @param {Vector2}  position      - World space position
-    *  @param {Vector2}  size          - World space size
-    *  @param {TileInfo} [tileInfo]    - Default tile info for layer (used for size and texture)
+    *  @param {Vector2}  position - World space position
+    *  @param {Vector2}  size - World space size
+    *  @param {TileInfo} [tileInfo] - Default tile info for layer (used for size and texture)
     *  @param {number}   [renderOrder] - Objects are sorted by renderOrder
     */
     constructor(position, size, tileInfo=tile(), renderOrder=0)
     {
         const canvasSize = tileInfo ? size.multiply(tileInfo.size) : size;
-        super(position, size, 0, renderOrder, canvasSize);
-
-        // set tile info
-        this.tileInfo = tileInfo;
-
-        // init tile data
+        const useWebGL = true;
+        super(position, size, 0, renderOrder, canvasSize, useWebGL);
+        
+        /** @property {TileInfo} - Default tile info for layer */
+        this.tileInfo = undefined;
+        /** @property {Array<TileLayerData>} - Default tile info for layer */
         this.data = [];
-        for (let j = this.size.area(); j--;)
-            this.data.push(new TileLayerData);
+        /** @property {boolean} - Is this layer using a webgl texture? */
+        this.isUsingWebGL = false;
 
         if (headlessMode)
         {
-            // disable rendering
-            this.redraw       = () => {};
-            this.render       = () => {};
-            this.redrawStart  = () => {};
-            this.redrawEnd    = () => {};
-            this.drawTileData = () => {};
-            this.drawCanvas2D = () => {};
-            this.useWebGL     = () => {};
+            // disable rendering in headless mode
+            this.render         = () => {};
+            this.redraw         = () => {};
+            this.redrawStart    = () => {};
+            this.redrawEnd      = () => {};
+            this.drawTileData   = () => {};
+            this.redrawTileData = () => {};
+            this.drawLayerTile  = () => {};
+            this.drawLayerRect  = () => {};
+            this.clearLayerRect = () => {};
+            return;
+        }
+        
+        if (tileInfo)
+        {
+            // set tile info
+            this.tileInfo = tileInfo.frame(0);
+            this.tileInfo.bleed = 0; // disable bleed for tile layers
         }
+
+        // init tile data
+        for (let j = this.size.area(); j--;)
+            this.data.push(new TileLayerData);
     }
 
     /** Set data at a given position in the array
      *  @param {Vector2}       layerPos - Local position in array
-     *  @param {TileLayerData} data     - Data to set
+     *  @param {TileLayerData} data - Data to set
      *  @param {boolean}       [redraw] - Force the tile to redraw if true */
     setData(layerPos, data, redraw=false)
     {
+        layerPos = layerPos.floor();
         ASSERT(isVector2(layerPos), 'layerPos must be a Vector2');
         ASSERT(data instanceof TileLayerData, 'data must be a TileLayerData');
-        if (layerPos.arrayCheck(this.size))
-        {
-            this.data[(layerPos.y|0)*this.size.x+layerPos.x|0] = data;
-            redraw && this.drawTileData(layerPos);
-        }
+
+        if (!layerPos.arrayCheck(this.size)) return;
+        this.data[(layerPos.y|0)*this.size.x+layerPos.x|0] = data;
+
+        if (!redraw) return;
+        const isRedraw = drawContext === this.context;
+        isRedraw ? this.drawTileData(layerPos) : this.redrawTileData(layerPos);
     }
 
     /** Get data at a given position in the array
@@ -6761,7 +6802,18 @@ class TileLayer extends CanvasLayer
     getData(layerPos)
     { 
         ASSERT(isVector2(layerPos), 'layerPos must be a Vector2');
-        return layerPos.arrayCheck(this.size) && this.data[(layerPos.y|0)*this.size.x+layerPos.x|0]; 
+        return layerPos.arrayCheck(this.size) && this.data[(layerPos.y|0)*this.size.x+layerPos.x|0];
+    }
+
+    // Update the tile layer, refresh texture if needed
+    update()
+    {
+        if (!glEnable && this.isUsingWebGL)
+        {
+            // redraw the layer if webgl was disabled or context lost
+            this.isUsingWebGL = false;
+            this.redraw();
+        }
     }
 
     // Render the tile layer, called automatically by the engine
@@ -6769,78 +6821,76 @@ class TileLayer extends CanvasLayer
     {
         ASSERT(drawContext !== this.context, 'must call redrawEnd() after drawing tiles!');
 
-        if (this.refreshWebGL)
-        {
-            // update the WebGL texture
-            this.textureInfo.createWebGLTexture();
-            this.refreshWebGL = false;
-        }
-
-        // draw the tile layer as a single tile
-        const tileInfo = new TileInfo().setFullImage(this.textureInfo);
         const size = this.drawSize || this.size;
         const pos = this.pos.add(size.scale(.5));
-        const useWebGL = glEnable && this.textureInfo.hasWebGL();
-        drawTile(pos, size, tileInfo, WHITE, 0, false, CLEAR_BLACK, useWebGL);
+        this.draw(pos, this.size, this.color, this.angle, this.mirror, this.additiveColor);
     }
 
+    /** Called after this layer is redrawn, does nothing by default */
+    onRedraw() {}
+
     /** Draw all the tile data to an offscreen canvas
-     *  - This may be slow in some browsers but only needs to be done once */
+     *  - This may be slow if not using webgl but only needs to be done once */
     redraw()
     {
         this.redrawStart(true);
         for (let x = this.size.x; x--;)
         for (let y = this.size.y; y--;)
             this.drawTileData(vec2(x,y), false);
+        this.hasWebGL() && glFlush();
+        this.onRedraw();
         this.redrawEnd();
-        this.useWebGL();
     }
 
     /** Call to start the redraw process
-     *  - This can be used to manually update small parts of the level
+     *  - This can be used to manually update parts of the level
      *  @param {boolean} [clear] - Should it clear the canvas before drawing */
     redrawStart(clear=false)
     {
         if (!this.context) return;
-
+        ASSERT(drawContext !== this.context);
+        
         // save current render settings
-        /** @type {[HTMLCanvasElement|OffscreenCanvas, CanvasRenderingContext2D|OffscreenCanvasRenderingContext2D, Vector2, Vector2, number, Color]} */
-        this.savedRenderSettings = [drawCanvas, drawContext, mainCanvasSize, cameraPos, cameraScale, canvasClearColor];
+        /** @type {[CanvasRenderingContext2D|OffscreenCanvasRenderingContext2D, Vector2, Vector2, number, Color]} */
+        this.savedRenderSettings = [drawContext, mainCanvasSize, cameraPos, cameraScale, canvasClearColor];
 
         // set the draw canvas and context to this layer
         // use camera settings to match this layer's canvas
-        drawCanvas = this.canvas;
         drawContext = this.context;
-        cameraPos = this.size.scale(.5);
-        const tileSize = this.tileInfo ? this.tileInfo.size : vec2(1);
-        cameraScale = tileSize.x;
-        canvasClearColor = CLEAR_BLACK;
+        const tileSize = this.tileInfo?.size ?? vec2(1);
         mainCanvasSize = this.size.multiply(tileSize);
-        if (clear)
+        canvasClearColor = CLEAR_BLACK;
+        cameraPos = this.size.multiply(tileSize).scale(.5);
+        cameraScale = 1;
+
+        // set render target to this layer
+        this.isUsingWebGL = this.hasWebGL();
+        if (this.isUsingWebGL)
+            glSetRenderTarget(this.textureInfo.glTexture, clear);
+        else
         {
-            // clear and set size
-            drawCanvas.width  = mainCanvasSize.x;
-            drawCanvas.height = mainCanvasSize.y;
+            // disable smoothing for pixel art
+            this.context.imageSmoothingEnabled = !tilesPixelated;
+            if (clear)
+            {
+                // clear and set size
+                this.canvas.width  = mainCanvasSize.x;
+                this.canvas.height = mainCanvasSize.y;
+            }
         }
-
-        // disable smoothing for pixel art
-        drawContext.imageSmoothingEnabled = !tilesPixelated;
-
-        // setup gl rendering if enabled
-        glPreRender();
     }
 
     /** Call to end the redraw process */
     redrawEnd()
     {
         if (!this.context) return;
+        ASSERT(drawContext === this.context);
 
-        ASSERT(drawContext === this.context, 'must call redrawStart() before drawing tiles');
-        glCopyToContext(drawContext);
-        //debugSaveCanvas(this.canvas);
+        if (glEnable && this.textureInfo.glTexture)
+            glSetRenderTarget();
 
         // set stuff back to normal
-        [drawCanvas, drawContext, mainCanvasSize, cameraPos, cameraScale, canvasClearColor] = this.savedRenderSettings;
+        [drawContext, mainCanvasSize, cameraPos, cameraScale, canvasClearColor] = this.savedRenderSettings;
     }
 
     /** Draw the tile at a given position in the tile grid
@@ -6852,24 +6902,75 @@ class TileLayer extends CanvasLayer
     drawTileData(layerPos, clear=true)
     {
         if (!this.context) return;
+        ASSERT(drawContext === this.context, 'must call redrawStart() before drawing tiles');
         
-        // clear out where the tile was, for full opaque tiles this can be skipped
-        const s = this.tileInfo.size;
-        if (clear)
-        {
-            const pos = layerPos.multiply(s);
-            this.context.clearRect(pos.x, this.canvas.height-pos.y, s.x, -s.y);
-        }
+        // clear out where the tile was, can be skipped for fully opaque tiles
+        const drawSize = this.tileInfo?.size ?? vec2(1);
+        const drawPos = layerPos.multiply(drawSize);
+        clear && this.clearLayerRect(drawPos, drawSize);
 
         // draw the tile if it has layer data
         const d = this.getData(layerPos);
-        if (d.tile !== undefined)
-        {
-            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);
-        }
+        if (!d.tile) return;
+
+        const tileInfo = this.tileInfo && this.tileInfo.tile(d.tile);
+        this.drawLayerTile(drawPos, drawSize, tileInfo, d.color, d.direction*PI/2, d.mirror);
+    }
+
+    /** Draw the tile at a given position in the tile grid
+     *  This can be used to clear tiles when they are destroyed
+     *  For better performance use drawTileData inside a redrawStart/End block
+     *  @param {Vector2} layerPos
+     *  @param {boolean} [clear] - should the old tile be cleared
+     */
+    redrawTileData(layerPos, clear=true)
+    {
+        if (!this.context) return;
+        ASSERT(drawContext !== this.context, 'redrawStart() should not be active when calling redrawTileData(), instead use drawTileData()');
+
+        this.redrawStart();
+        this.drawTileData(layerPos, clear);
+        this.redrawEnd();
+    }
+
+    /** Draw textured tile in layer space
+     *  @param {Vector2}  pos - Position in pixel coordinates
+     *  @param {Vector2}  [size=vec2(1)] - Size of the tile
+     *  @param {TileInfo} [tileInfo] - Tile info to use, untextured if undefined
+     *  @param {Color}    [color=WHITE] - 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 */
+    drawLayerTile(pos, size=vec2(1), tileInfo, color=WHITE,
+    angle=0, mirror, additiveColor)
+    {
+        const drawPos = pos.add(size.scale(.5));
+        drawTile(drawPos, size, tileInfo, color, angle, mirror, additiveColor);
+    }
+
+    /** Clear a rectangle in layer space
+     *  @param {Vector2} pos
+     *  @param {Vector2} size
+     *  @param {Color} [color=WHITE] - Color to modulate with
+     *  @param {number} [angle] - Angle to rotate by
+     */
+    drawLayerRect(pos, size, color, angle=0)
+    { this.drawLayerTile(pos, size, undefined, color, angle); }
+
+    /** Clear a rectangle in layer space
+     *  @param {Vector2} pos - position in pixel coordinates
+     *  @param {Vector2} size
+     */
+    clearLayerRect(pos, size)
+    {
+        ASSERT(drawContext === this.context, 'must call redrawStart() before clearing tiles');
+
+        const x = pos.x, y = this.canvas.height - pos.y - size.y;
+        const useWebGL = this.hasWebGL();
+        if (useWebGL)
+            glClearRect(x, y, size.x, size.y);
+        else
+            this.context.clearRect(x, y, size.x, size.y);
     }
 }
 
@@ -6878,7 +6979,6 @@ 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 collision layers should not overlap each other
  * @extends TileLayer
  * @memberof TileLayers
  */
@@ -6908,8 +7008,7 @@ class TileCollisionLayer extends TileLayer
     /** Destroy this tile layer */
     destroy()
     {
-        if (this.destroyed)
-            return;
+        if (this.destroyed) return;
 
         // remove from collision layers array and destroy
         const index = tileCollisionLayers.indexOf(this);
@@ -6951,7 +7050,7 @@ class TileCollisionLayer extends TileLayer
 
     /** Check if collision with another object should occur
     *  @param {Vector2}      pos
-    *  @param {Vector2}      [size=(0,0)]
+    *  @param {Vector2}      [size=vec2()]
     *  @param {EngineObject} [object]
     *  @return {boolean} */
     collisionTest(pos, size=new Vector2, object)
@@ -7271,7 +7370,7 @@ class ParticleEmitter extends EngineObject
         particle.mirror        = randBool();
 
         // call particle create callback
-        this.particleCreateCallback && this.particleCreateCallback(particle);
+        this.particleCreateCallback?.(particle);
 
         // return the newly created particle
         return particle;
@@ -7356,7 +7455,7 @@ class Particle extends EngineObject
             const c = this.colorEnd;
             this.color.set(c.r, c.g, c.b, c.a);
             this.size.set(this.sizeEnd, this.sizeEnd);
-            this.destroyCallback && this.destroyCallback(this);
+            this.destroyCallback?.(this);
             this.destroyed = 1;
         }
     }
@@ -7446,10 +7545,11 @@ function medalsInit(saveName)
 
     // engine automatically renders medals
     engineAddPlugin(undefined, medalsRender);
+
+    // plugin functions
     function medalsRender()
     {
-        if (!medalsDisplayQueue.length)
-            return;
+        if (!medalsDisplayQueue.length) return;
 
         // update first medal in queue
         const medal = medalsDisplayQueue[0];
@@ -7539,8 +7639,7 @@ class Medal
     /** Unlocks a medal if not already unlocked */
     unlock()
     {
-        if (medalsPreventUnlock || this.unlocked)
-            return;
+        if (medalsPreventUnlock || this.unlocked) return;
 
         // save the medal
         ASSERT(medalsSaveName, 'save name must be set');
@@ -7634,7 +7733,7 @@ let glContext;
 let glAntialias = true;
 
 // WebGL internal variables not exposed to documentation
-let glShader, glPolyShader, glPolyMode, glAdditive, glBatchAdditive, glActiveTexture, glArrayBuffer, glGeometryBuffer, glPositionData, glColorData, glBatchCount, glTextureInfos, glCanBeEnabled = true;
+let glShader, glPolyShader, glPolyMode, glAdditive, glBatchAdditive, glActiveTexture, glArrayBuffer, glGeometryBuffer, glPositionData, glColorData, glBatchCount, glTextureInfos, glInstancedVAO, glPolyVAO, glFramebuffer, glRenderTarget, glCanBeEnabled = true;
 
 // WebGL internal constants
 const gl_ARRAY_BUFFER_SIZE = 5e5;
@@ -7710,7 +7809,7 @@ function glInit(rootElement)
         // setup instanced rendering shader program
         glShader = glCreateProgram(
             '#version 300 es\n' +     // specify GLSL ES version
-            'precision highp float;'+ // use highp for better accuracy
+            'precision highp float;'+ // use highp for accuracy
             'uniform mat4 m;'+        // transform matrix
             'in vec2 g;'+             // in: geometry
             'in vec4 p,u,c,a;'+       // in: position/size, uvs, color, additiveColor
@@ -7725,7 +7824,7 @@ function glInit(rootElement)
             '}'                       // end of shader
             ,
             '#version 300 es\n' +     // specify GLSL ES version
-            'precision highp float;'+ // use highp for better accuracy
+            'precision highp float;'+ // use highp for accuracy
             'uniform sampler2D s;'+   // texture
             'in vec2 v;'+             // in: uv
             'in vec4 d,e;'+           // in: color, additiveColor
@@ -7763,87 +7862,96 @@ function glInit(rootElement)
         glColorData = new Uint32Array(glInstanceData);
         glArrayBuffer = glContext.createBuffer();
         glGeometryBuffer = glContext.createBuffer();
+        glFramebuffer = glContext.createFramebuffer();
+        glBatchCount = 0;
 
         // create the geometry buffer, triangle strip square
-        const geometry = new Float32Array([glBatchCount=0,0,1,0,0,1,1,1]);
+        const geometry = new Float32Array([0,0,1,0,0,1,1,1]);
         glContext.bindBuffer(glContext.ARRAY_BUFFER, glGeometryBuffer);
         glContext.bufferData(glContext.ARRAY_BUFFER, geometry, glContext.STATIC_DRAW);
+        
+        let offset, shader, stride;
+        const initVertexAttrib = (name, type, typeSize, size, divisor=0)=>
+        {
+            const location = glContext.getAttribLocation(shader, name);
+            const normalize = typeSize === 1;
+            const fixedStride = typeSize && stride;
+            glContext.enableVertexAttribArray(location);
+            glContext.vertexAttribPointer(location, size, type, normalize, fixedStride, offset);
+            glContext.vertexAttribDivisor(location, divisor);
+            offset += size*typeSize;
+        }
+
+        // setup VAO for instanced rendering
+        glInstancedVAO = glContext.createVertexArray();
+        glContext.bindVertexArray(glInstancedVAO);
+        
+        // configure instanced vertex attributes
+        offset = 0, shader = glShader, stride = gl_INSTANCE_BYTE_STRIDE;
+        glContext.bindBuffer(glContext.ARRAY_BUFFER, glGeometryBuffer);
+        initVertexAttrib('g', glContext.FLOAT, 0, 2); // geometry
+        glContext.bindBuffer(glContext.ARRAY_BUFFER, glArrayBuffer);
+        glContext.bufferData(glContext.ARRAY_BUFFER, gl_ARRAY_BUFFER_SIZE, glContext.DYNAMIC_DRAW);
+        initVertexAttrib('p', glContext.FLOAT, 4, 4, 1); // position & size
+        initVertexAttrib('u', glContext.FLOAT, 4, 4, 1); // texture coords
+        initVertexAttrib('c', glContext.UNSIGNED_BYTE, 1, 4, 1); // color
+        initVertexAttrib('a', glContext.UNSIGNED_BYTE, 1, 4, 1); // additiveColor
+        initVertexAttrib('r', glContext.FLOAT, 4, 1, 1); // rotation
+
+        // setup VAO for poly rendering
+        glPolyVAO = glContext.createVertexArray();
+        glContext.bindVertexArray(glPolyVAO);
+        
+        // configure poly vertex attributes
+        offset = 0, shader = glPolyShader, stride = gl_POLY_VERTEX_BYTE_STRIDE;
+        initVertexAttrib('p', glContext.FLOAT, 4, 2);         // position
+        initVertexAttrib('c', glContext.UNSIGNED_BYTE, 1, 4); // color
     }
 }
 
-function glSetInstancedMode()
+function glSetInstancedMode(force=false)
 {
-    if (!glPolyMode)
-        return;
+    if (!force && !glPolyMode) return;
     
     // setup instanced mode
     glFlush();
     glPolyMode = false;
     glContext.useProgram(glShader);
-
-    // set vertex attributes
-    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
-        glContext.enableVertexAttribArray(location);
-        glContext.vertexAttribPointer(location, size, type, normalize, stride, offset);
-        glContext.vertexAttribDivisor(location, divisor);
-        offset += size*typeSize;
-    }
-    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_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
+    glContext.bindVertexArray(glInstancedVAO);
 }
 
 function glSetPolyMode()
 {
-    if (glPolyMode)
-        return;
+    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
+    glContext.bindVertexArray(glPolyVAO);
 }
 
 // Setup WebGL render each frame, called automatically by engine
 // Also used by tile layer rendering when redrawing tiles
-function glPreRender()
+function glPreRender(clear=true)
 {
     if (!glEnable || !glContext) return;
 
-    // clear the canvas
-    glClearCanvas();
+    ASSERT(!glBatchCount, 'glPreRender called with unflushed batch.');
+
+    if (!glRenderTarget)
+    {
+        // set to same size as main canvas
+        glCanvas.width = mainCanvasSize.x;
+        glCanvas.height = mainCanvasSize.y;
+    }
+    glContext.viewport(0, 0, mainCanvasSize.x, mainCanvasSize.y);
+    clear && glClearCanvas();
 
     // build the transform matrix
     const s = vec2(2*cameraScale).divide(mainCanvasSize);
+    if (glRenderTarget)
+        s.y = -s.y; // invert y when using render target
     const rotatedCam = cameraPos.rotate(-cameraAngle);
     const p = vec2(-1).subtract(rotatedCam.multiply(s));
     const ca = cos(cameraAngle);
@@ -7872,12 +7980,14 @@ function glPreRender()
         glContext.bindTexture(glContext.TEXTURE_2D, glActiveTexture);
     }
 
+    // rebind the array buffer
+    glContext.bindBuffer(glContext.ARRAY_BUFFER, glArrayBuffer);
+
     // start with additive blending off
     glAdditive = glBatchAdditive = false;
 
-    // force it to set instanced mode by first setting poly mode true
-    glPolyMode = true;
-    glSetInstancedMode();
+    // force it to set instanced mode
+    glSetInstancedMode(true);
 }
 
 /** Clear the canvas and setup the viewport
@@ -7886,13 +7996,9 @@ function glClearCanvas()
 {
     if (!glContext) return;
 
-    // clear and set to same size as main canvas
-    glCanvas.width = drawCanvas.width;
-    glCanvas.height = drawCanvas.height;
-    glContext.viewport(0, 0, glCanvas.width, glCanvas.height);
+    // clear using the canvasClearColor
     const color = canvasClearColor;
-    if (color.a > 0)
-        glContext.clearColor(color.r, color.g, color.b, color.a);
+    glContext.clearColor(color.r, color.g, color.b, color.a);
     glContext.clear(glContext.COLOR_BUFFER_BIT);
 }
 
@@ -7904,8 +8010,7 @@ function glClearCanvas()
 function glSetTexture(texture, wrap=false)
 {
     // must flush cache with the old texture to set a new one
-    if (!glContext || texture === glActiveTexture)
-        return;
+    if (!glContext || texture === glActiveTexture) return;
 
     glFlush();
     glActiveTexture = texture;
@@ -7970,7 +8075,7 @@ function glCreateTexture(image)
     // build the texture
     const texture = glContext.createTexture();
     let mipMap = false;
-    if (image && image.width)
+    if (image?.width)
     {
         glSetTextureData(texture, image);
         glContext.bindTexture(glContext.TEXTURE_2D, texture);
@@ -7991,7 +8096,9 @@ function glCreateTexture(image)
     glContext.texParameteri(glContext.TEXTURE_2D, glContext.TEXTURE_MIN_FILTER, minFilter);
     if (mipMap)
         glContext.generateMipmap(glContext.TEXTURE_2D);
-    glContext.bindTexture(glContext.TEXTURE_2D, glActiveTexture); // rebind active texture
+
+    // rebind active texture
+    glContext.bindTexture(glContext.TEXTURE_2D, glActiveTexture);
     return texture;
 }
 
@@ -8001,6 +8108,7 @@ function glCreateTexture(image)
 function glDeleteTexture(texture)
 {
     if (!glContext) return;
+    
     glContext.deleteTexture(texture);
 }
 
@@ -8013,10 +8121,12 @@ function glSetTextureData(texture, image)
     if (!glContext) return;
 
     // build the texture
-    ASSERT(!!image && image.width > 0, 'Invalid image data.');
+    ASSERT(image?.width > 0, 'Invalid image data.');
     glContext.bindTexture(glContext.TEXTURE_2D, texture);
     glContext.texImage2D(glContext.TEXTURE_2D, 0, glContext.RGBA, glContext.RGBA, glContext.UNSIGNED_BYTE, image);
-    glContext.bindTexture(glContext.TEXTURE_2D, glActiveTexture); // rebind active texture
+
+    // rebind active texture
+    glContext.bindTexture(glContext.TEXTURE_2D, glActiveTexture);
 }
 
 /** Tells WebGL to create or update the glTexture and start tracking it
@@ -8085,8 +8195,7 @@ function glFlush()
  *  @memberof WebGL */
 function glCopyToContext(context)
 {
-    if (!glEnable || !glContext)
-        return;
+    if (!glEnable || !glContext) return;
 
     glFlush();
     context.drawImage(glCanvas, 0, 0);
@@ -8236,6 +8345,48 @@ function glDrawColoredPoints(points, pointColors)
     glBatchCount += vertCount;
 }
 
+/** Set the WebGL render target to the given texture or back to the canvas
+ *  @param {WebGLTexture} [texture] - a texture or undefined to use normal glCanvas
+ *  @param {boolean} [clear] - should the render target be cleared
+ *  @memberof WebGL */
+function glSetRenderTarget(texture, clear=false)
+{
+    if (texture)
+    {
+        glRenderTarget = texture;
+        glContext.bindFramebuffer(glContext.FRAMEBUFFER, glFramebuffer);
+        glContext.framebufferTexture2D(glContext.FRAMEBUFFER, 
+            glContext.COLOR_ATTACHMENT0, glContext.TEXTURE_2D, texture, 0);
+       glPreRender(clear);
+    }
+    else
+    {
+        glFlush();
+        glRenderTarget = undefined;
+        glContext.bindFramebuffer(glContext.FRAMEBUFFER, null);
+    }
+}
+
+/** Clear out a rectangle area of the WebGL canvas or render target
+ *  @param {number} x
+ *  @param {number} y
+ *  @param {number} width
+ *  @param {number} height
+ *  @memberof WebGL */
+function glClearRect(x, y, width, height)
+{
+    if (!glEnable) return;
+
+    // Enable scissor test to clear only the specified area
+    glContext.enable(glContext.SCISSOR_TEST);
+    glContext.scissor(x, y, width, height);
+    glContext.clearColor(0, 0, 0, 0);
+    glContext.clear(glContext.COLOR_BUFFER_BIT);
+    glContext.disable(glContext.SCISSOR_TEST);
+}
+
+///////////////////////////////////////////////////////////////////////////////
+
 // WebGL internal function to convert polygon to outline triangle strip
 function glMakeOutline(points, width, wrap=true)
 {
@@ -8369,23 +8520,20 @@ function glPolyStrip(points)
             const a = points[i0], b = points[i1], c = points[i2];
 
             // check if convex
-            if (cross(a, b, c) < e)
-                continue;
+            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;
+                if (k === i0 || k === i1 || k === i2) continue;
+
                 const p = points[k];
                 hasInside = pointInTriangle(p, a, b, c);
-                if (hasInside)
-                    break;
+                if (hasInside) break;
             }
-            if (hasInside)
-                continue;
+            if (hasInside) continue;
 
             // found valid ear
             triangles.push([i0, i1, i2]);
@@ -8410,8 +8558,7 @@ function glPolyStrip(points)
                     worstIndex = i;
                 }
             }
-            if (worstIndex < 0)
-                break;
+            if (worstIndex < 0) break;
             
             const i0 = indices[(worstIndex + indices.length - 1) % indices.length];
             const i1 = indices[worstIndex];
@@ -8642,14 +8789,16 @@ class PostProcessPlugin
 {
     /** Create global post processing shader
     *  @param {string} shaderCode
-    *  @param {boolean} [includeMainCanvas]
-     *  @example
-     *  // create the post process plugin object
-     *  new PostProcessPlugin(shaderCode);
-     */
-    constructor(shaderCode, includeMainCanvas=true)
+    *  @param {boolean} [includeMainCanvas] - combine mainCanvs onto glCanvas
+    *  @param {boolean} [feedbackTexture] - use glCanvas from previous frame as the texture
+    *  @example
+    *  // create the post process plugin object
+    *  new PostProcessPlugin(shaderCode);
+    */
+    constructor(shaderCode, includeMainCanvas=false, feedbackTexture=false)
     {
         ASSERT(!postProcess, 'Post process already initialized');
+        ASSERT(!(includeMainCanvas && feedbackTexture), 'Post process cannot both include main canvas and use feedback texture');
         postProcess = this;
 
         if (!shaderCode) // default shader pass through
@@ -8657,9 +8806,10 @@ class PostProcessPlugin
 
         /** @property {WebGLProgram} - Shader for post processing */
         this.shader = undefined;
-
         /** @property {WebGLTexture} - Texture for post processing */
         this.texture = undefined;
+        /** @property {WebGLVertexArrayObject} - Vertex array object */
+        this.vao = undefined;
 
         // setup the post processing plugin
         initPostProcess();
@@ -8668,7 +8818,6 @@ class PostProcessPlugin
         function initPostProcess()
         {
             if (headlessMode) return;
-
             if (!glEnable)
             {
                 console.warn('PostProcessPlugin: WebGL not enabled!');
@@ -8679,14 +8828,14 @@ class PostProcessPlugin
             postProcess.texture = glCreateTexture();
             postProcess.shader = glCreateProgram(
                 '#version 300 es\n' +            // specify GLSL ES version
-                'precision highp float;'+        // use highp for better accuracy
+                'precision highp float;'+        // use highp for accuracy
                 'in vec2 p;'+                    // position
                 'void main(){'+                  // shader entry point
                 'gl_Position=vec4(p+p-1.,1,1);'+ // set position
                 '}'                              // end of shader
                 ,
                 '#version 300 es\n' +            // specify GLSL ES version
-                'precision highp float;'+        // use highp for better accuracy
+                'precision highp float;'+        // use highp for accuracy
                 'uniform sampler2D iChannel0;'+  // input texture
                 'uniform vec3 iResolution;'+     // size of output texture
                 'uniform float iTime;'+          // time
@@ -8697,6 +8846,17 @@ class PostProcessPlugin
                 'c.a=1.;'+                       // always use full alpha
                 '}'                              // end of shader
             );
+
+            // setup VAO for post processing
+            postProcess.vao = glContext.createVertexArray();
+            glContext.bindVertexArray(postProcess.vao);
+            glContext.bindBuffer(glContext.ARRAY_BUFFER, glGeometryBuffer);
+
+            // configure vertex attributes
+            const vertexByteStride = 8;
+            const pLocation = glContext.getAttribLocation(postProcess.shader, 'p');
+            glContext.enableVertexAttribArray(pLocation);
+            glContext.vertexAttribPointer(pLocation, 2, glContext.FLOAT, false, vertexByteStride, 0);
         }
         function postProcessContextLost()
         {
@@ -8711,14 +8871,17 @@ class PostProcessPlugin
         }
         function postProcessRender()
         {
-            if (headlessMode) return;
-
-            if (!glEnable)
-                return;
+            if (headlessMode || !glEnable) return;
             
             // clear out the buffer
             glFlush();
-            
+
+            // setup shader program to draw a quad
+            glContext.useProgram(postProcess.shader);
+            glContext.bindVertexArray(postProcess.vao);
+            glContext.pixelStorei(glContext.UNPACK_FLIP_Y_WEBGL, true);
+            glContext.disable(glContext.BLEND);
+
             // setup texture
             glContext.activeTexture(glContext.TEXTURE0);
             glContext.bindTexture(glContext.TEXTURE_2D, postProcess.texture);
@@ -8729,29 +8892,32 @@ class PostProcessPlugin
                 workCanvas.height = mainCanvasSize.y;
                 glCopyToContext(workContext);
                 workContext.drawImage(mainCanvas, 0, 0);
+                mainCanvas.width |= 0
                 
                 // copy work canvas to texture
                 glContext.texImage2D(glContext.TEXTURE_2D, 0, glContext.RGBA, glContext.RGBA, glContext.UNSIGNED_BYTE, workCanvas);
             }
-
-            // setup shader program to draw a quad
-            glContext.useProgram(postProcess.shader);
-            glContext.bindBuffer(glContext.ARRAY_BUFFER, glGeometryBuffer);
-            glContext.pixelStorei(glContext.UNPACK_FLIP_Y_WEBGL, 1);
-            glContext.disable(glContext.BLEND);
-
-            // set vertex position attribute
-            const vertexByteStride = 8;
-            const pLocation = glContext.getAttribLocation(postProcess.shader, 'p');
-            glContext.enableVertexAttribArray(pLocation);
-            glContext.vertexAttribPointer(pLocation, 2, glContext.FLOAT, false, vertexByteStride, 0);
-
+            else if (!feedbackTexture)
+            {
+                // copy glCanvas to texture
+                glContext.texImage2D(glContext.TEXTURE_2D, 0, glContext.RGBA, glContext.RGBA, glContext.UNSIGNED_BYTE, glCanvas);
+            }
+            
             // set uniforms and draw
             const uniformLocation = (name)=>glContext.getUniformLocation(postProcess.shader, name);
             glContext.uniform1i(uniformLocation('iChannel0'), 0);
             glContext.uniform1f(uniformLocation('iTime'), time);
             glContext.uniform3f(uniformLocation('iResolution'), mainCanvas.width, mainCanvas.height, 1);
             glContext.drawArrays(glContext.TRIANGLE_STRIP, 0, 4);
+
+            if (feedbackTexture)
+            {
+                // pass glCanvas back to overlay texture
+                glContext.texImage2D(glContext.TEXTURE_2D, 0, glContext.RGBA, glContext.RGBA, glContext.UNSIGNED_BYTE, glCanvas);
+            }
+
+            // force it to set instanced mode
+            glSetInstancedMode(true);
         }
     }
 }
@@ -9432,7 +9598,7 @@ class UISystemPlugin
         const up = 'ArrowUp', down = 'ArrowDown', left = 'ArrowLeft', right = 'ArrowRight';
         if (both)
         {
-            return keyIsDown(up) || keyIsDown(left) ? -1 : 
+            return keyIsDown(up) || keyIsDown(left) ? -1 :
                 keyIsDown(down) || keyIsDown(right) ? 1 : 0;
         }
         const back = vertical ? up : left;
@@ -9463,7 +9629,7 @@ class UISystemPlugin
      *  @return {boolean} */
     getNavigationWasPressed()
     {
-        return isUsingGamepad ? gamepadWasPressed(0, gamepadPrimary) : 
+        return isUsingGamepad ? gamepadWasPressed(0, gamepadPrimary) :
             keyWasPressed('Space') || keyWasPressed('Enter');
     }
         
@@ -9511,7 +9677,7 @@ class UISystemPlugin
         buttonYes.textHeight = 40;
         buttonYes.navigationIndex = 1;
         buttonYes.hoverColor = hsl(0,1,.5);
-        buttonYes.onClick = ()=> { closeMenu(); yesCallback && yesCallback(); }; 
+        buttonYes.onClick = ()=> { closeMenu(); yesCallback && yesCallback(); };
         confirmMenu.addChild(buttonYes);
         
         // no button
@@ -9541,8 +9707,8 @@ class UISystemPlugin
 class UIObject
 {
     /** Create a UIObject
-     *  @param {Vector2}  [pos=(0,0)]
-     *  @param {Vector2}  [size=(1,1)]
+     *  @param {Vector2}  [pos=vec2()]
+     *  @param {Vector2}  [size=vec2(1)]
      */
     constructor(pos=vec2(), size=vec2())
     {
@@ -9557,7 +9723,7 @@ class UIObject
         this.size = size.copy();
         /** @property {Color} - Color of the object */
         this.color = uiSystem.defaultColor.copy();
-        /** @property {Color} - Color of the object when active, uses color if undefined */
+        /** @property {Color} - Color of the object when active, uses hoverColor if undefined */
         this.activeColor = undefined;
         /** @property {string} - Text for this ui object */
         this.text = undefined;
@@ -9655,10 +9821,10 @@ class UIObject
 
         // disconnect from parent and destroy children
         this.destroyed = 1;
-        this.parent && this.parent.removeChild(this);
+        this.parent?.removeChild(this);
         for (const child of this.children)
         {
-            child.parent = 0;
+            child.parent = undefined;
             child.destroy();
         }
     }
@@ -9682,7 +9848,7 @@ class UIObject
         this.onUpdate();
 
         // unset active if disabled
-        if (this.disabled && this == uiSystem.activeObject)
+        if (this.disabled && this === uiSystem.activeObject)
             uiSystem.activeObject = undefined;
 
         const wasHover = uiSystem.lastHoverObject === this;
@@ -9754,10 +9920,10 @@ class UIObject
             this.interactive && this.isActiveObject() && !this.disabled ?
             this.color : this.lineColor;
         const color = isNavigationObject ? this.hoverColor :
-            this.disabled ? this.disabledColor : 
-            this.interactive ? 
-                this.isHoverObject() ? this.hoverColor : 
-                this.isActiveObject() ? this.activeColor || this.color : 
+            this.disabled ? this.disabledColor :
+            this.interactive ?
+                this.isActiveObject() ? this.activeColor || this.hoverColor :
+                this.isHoverObject() ? this.hoverColor :
                 this.color : this.color;
         const lineWidth = this.lineWidth * (isNavigationObject ? 1.5 : 1);
         
@@ -9769,7 +9935,7 @@ class UIObject
     getTextSize()
     {
         return vec2(
-            this.textWidth  || this.textFitScale * this.size.x, 
+            this.textWidth  || this.textFitScale * this.size.x,
             this.textHeight || this.textFitScale * this.size.y);
     }
 
@@ -9817,9 +9983,9 @@ class UIObject
     renderDebug(visible=true)
     {
         // apply color based on state
-        const color = 
+        const color =
             !visible ? GREEN :
-            this.isHoverObject() ? YELLOW : 
+            this.isHoverObject() ? YELLOW :
             this.disabled ? PURPLE :
             this.interactive ? RED : BLUE;
         uiSystem.drawRect(this.pos, this.size, CLEAR_BLACK, 4, color);