littlejsengine 1.15.9 → 1.16.2

package/dist/littlejs.esm.js

@@ -33,7 +33,7 @@ const engineName = 'LittleJS';
  *  @type {string}
  *  @default
  *  @memberof Engine */
-const engineVersion = '1.15.9';
+const engineVersion = '1.16.2';
 
 /** Frames per second to update
  *  @type {number}
@@ -180,8 +180,7 @@ async function engineInit(gameInit, gameUpdate, gameUpdatePost, gameRender, game
         mainCanvasSize = vec2(mainCanvas.width, mainCanvas.height);
 
         // disable smoothing for pixel art
-        overlayContext.imageSmoothingEnabled =
-            mainContext.imageSmoothingEnabled = !tilesPixelated;
+        mainContext.imageSmoothingEnabled = !tilesPixelated;
 
         // setup gl rendering if enabled
         glPreRender();
@@ -193,7 +192,7 @@ async function engineInit(gameInit, gameUpdate, gameUpdatePost, gameRender, game
         // update time keeping
         let frameTimeDeltaMS = frameTimeMS - frameTimeLastMS;
         frameTimeLastMS = frameTimeMS;
-        if (debug || showWatermark)
+        if (debug || debugWatermark)
             averageFPS = lerp(averageFPS, 1e3/(frameTimeDeltaMS||1), .05);
         const debugSpeedUp   = debug && keyIsDown('Equal'); // +
         const debugSpeedDown = debug && keyIsDown('Minus'); // -
@@ -221,6 +220,8 @@ async function engineInit(gameInit, gameUpdate, gameUpdatePost, gameRender, game
             debugUpdate();
             gameUpdatePost();
             inputUpdatePost();
+            if (debugVideoCaptureIsActive())
+                renderFrame();
         }
         else
         {
@@ -271,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 (showWatermark && !debugVideoCaptureIsActive())
-            {
-                // update fps display
-                overlayContext.textAlign = 'right';
-                overlayContext.textBaseline = 'top';
-                overlayContext.font = '1em monospace';
-                overlayContext.fillStyle = '#000';
-                const text = engineName + ' ' + 'v' + engineVersion + ' / '
-                    + drawCount + ' / ' + engineObjects.length + ' / ' + averageFPS.toFixed(1)
-                    + (glEnable ? ' GL' : ' 2D') ;
-                overlayContext.fillText(text, mainCanvas.width-3, 3);
-                overlayContext.fillStyle = '#fff';
-                overlayContext.fillText(text, mainCanvas.width-2, 2);
-            }
+            debugRenderPost();
             drawCount = 0;
         }
     }
@@ -316,8 +304,8 @@ async function engineInit(gameInit, gameUpdate, gameUpdatePost, gameRender, game
             const fixedAspect = canvasFixedSize.x / canvasFixedSize.y;
             const w = innerAspect < fixedAspect ? '100%' : '';
             const h = innerAspect < fixedAspect ? '' : '100%';
-            overlayCanvas.style.width  = mainCanvas.style.width  = w;
-            overlayCanvas.style.height = mainCanvas.style.height = h;
+            mainCanvas.style.width  = w;
+            mainCanvas.style.height = h;
             if (glCanvas)
             {
                 glCanvas.style.width  = w;
@@ -332,6 +320,7 @@ async function engineInit(gameInit, gameUpdate, gameUpdatePost, gameRender, game
             
             // responsive aspect ratio with native resolution
             const innerAspect = innerWidth / innerHeight;
+            ASSERT(canvasMinAspect <= canvasMaxAspect); 
             if (canvasMaxAspect && innerAspect > canvasMaxAspect)
             {
                 // full height
@@ -346,12 +335,12 @@ async function engineInit(gameInit, gameUpdate, gameUpdatePost, gameRender, game
             }
         }
 
-        // clear main and overlay canvas and set size
-        overlayCanvas.width  = mainCanvas.width  = mainCanvasSize.x;
-        overlayCanvas.height = mainCanvas.height = mainCanvasSize.y;
+        // clear main canvas and set size
+        mainCanvas.width  = mainCanvasSize.x;
+        mainCanvas.height = mainCanvasSize.y;
 
         // apply the clear color to main canvas
-        if (canvasClearColor.a > 0)
+        if (canvasClearColor.a > 0 && !glEnable)
         {
             mainContext.fillStyle = canvasClearColor.toString();
             mainContext.fillRect(0, 0, mainCanvasSize.x, mainCanvasSize.y);
@@ -359,19 +348,15 @@ async function engineInit(gameInit, gameUpdate, gameUpdatePost, gameRender, game
         }
 
         // set default line join and cap
-        const lineJoin = 'round', lineCap = 'round';
-        mainContext.lineJoin = overlayContext.lineJoin = lineJoin;
-        mainContext.lineCap  = overlayContext.lineCap  = lineCap;
+        mainContext.lineJoin = 'round';
+        mainContext.lineCap  = 'round';
     }
+    
+    // skip setup if headless
+    if (headlessMode) return startEngine();
 
-    // wait for gameInit to load
-    async function startEngine()
-    {
-        await gameInit();
-        engineUpdate();
-    }
-    if (headlessMode)
-        return startEngine();
+    // setup webgl
+    glInit(rootElement);
 
     // setup html
     const styleRoot =
@@ -383,36 +368,30 @@ 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 = document.createElement('canvas');
-    rootElement.appendChild(mainCanvas);
+    mainCanvas = rootElement.appendChild(document.createElement('canvas'));
     drawContext = mainContext = mainCanvas.getContext('2d');
 
     // init stuff and start engine
     inputInit();
     audioInit();
     debugInit();
-    glInit();
-
-    // create overlay canvas for hud to appear above gl canvas
-    overlayCanvas = document.createElement('canvas')
-    rootElement.appendChild(overlayCanvas);
-    overlayContext = overlayCanvas.getContext('2d');
 
     // setup canvases
     // transform way is still more reliable then 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 = overlayCanvas.style.cssText = styleCanvas;
+    mainCanvas.style.cssText = styleCanvas;
     if (glCanvas)
         glCanvas.style.cssText = styleCanvas;
     setCanvasPixelated(canvasPixelated);
-    setOverlayCanvasPixelated(overlayCanvasPixelated);
     updateCanvas();
     glPreRender();
 
-    // create offscreen canvas for image processing
-    workCanvas = new OffscreenCanvas(256, 256);
-    workContext = workCanvas.getContext('2d', { willReadFrequently: true });
+    // create offscreen canvases for image processing
+    workCanvas = new OffscreenCanvas(64, 64);
+    workContext = workCanvas.getContext('2d');
+    workReadCanvas = new OffscreenCanvas(64, 64);
+    workReadContext = workReadCanvas.getContext('2d', { willReadFrequently: true });
 
     // create promises for loading images
     const promises = imageSources.map((src, textureIndex)=>
@@ -464,13 +443,20 @@ async function engineInit(gameInit, gameUpdate, gameUpdatePost, gameRender, game
     await Promise.all(promises);
     return startEngine();
 
+    async function startEngine()
+    {
+        // wait for gameInit to load
+        await gameInit();
+        engineUpdate();
+    }
+
     ///////////////////////////////////////////////////////////////////////////
     // LittleJS Splash Screen
     function drawEngineSplashScreen(t)
     {
-        const x = overlayContext;
-        const w = overlayCanvas.width = innerWidth;
-        const h = overlayCanvas.height = innerHeight;
+        const x = mainContext;
+        const w = mainCanvas.width = innerWidth;
+        const h = mainCanvas.height = innerHeight;
 
         {
             // background
@@ -768,7 +754,7 @@ const debugPointSize = .5;
  *  @type {boolean}
  *  @default
  *  @memberof Debug */
-let showWatermark = true;
+let debugWatermark = true;
 
 /** Key code used to toggle debug mode, Esc by default
  *  @type {string}
@@ -783,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
@@ -970,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
@@ -1045,21 +991,18 @@ function debugShowErrors()
 
 function debugInit()
 {
-    // create link for saving screenshots
-    downloadLink = document.createElement('a');
 }
 
 function debugUpdate()
 {
-    if (!debug)
-        return;
+    if (!debug) return;
 
     if (keyWasPressed(debugKey)) // Esc
         debugOverlay = !debugOverlay;
     if (debugOverlay)
     {
         if (keyWasPressed('Digit0'))
-            showWatermark = !showWatermark;
+            debugWatermark = !debugWatermark;
         if (keyWasPressed('Digit1'))
             debugPhysics = !debugPhysics, debugParticles = false;
         if (keyWasPressed('Digit2'))
@@ -1070,9 +1013,15 @@ function debugUpdate()
             debugRaycast = !debugRaycast;
         if (keyWasPressed('Digit5'))
             debugScreenshot();
-        if (keyWasPressed('Digit6'))
-            debugVideoCaptureIsActive() ? debugVideoCaptureStop() : debugVideoCaptureStart();
     }
+    if (debugVideoCaptureIsActive())
+    {
+        // control to stop video capture
+        if (!debugOverlay || keyWasPressed('Digit6'))
+            debugVideoCaptureStop();
+    }
+    else if (debugOverlay && keyWasPressed('Digit6'))
+        debugVideoCaptureStart();
 }
 
 function debugRender()
@@ -1087,13 +1036,11 @@ function debugRender()
     {
         // combine canvases, remove alpha and save
         combineCanvases();
-        const w = mainCanvas.width, h = mainCanvas.height;
-        overlayContext.fillRect(0,0,w,h);
-        overlayContext.drawImage(mainCanvas, 0, 0);
-        debugSaveCanvas(overlayCanvas);
+        saveCanvas(mainCanvas);
         debugTakeScreenshot = 0;
     }
 
+    const debugContext = mainContext;
     if (debugGamepads && gamepadsEnable)
     {
         // draw gamepads
@@ -1141,9 +1088,6 @@ function debugRender()
     let debugObject;
     if (debugOverlay)
     {
-        const saveContext = mainContext;
-        mainContext = overlayContext;
-
         // draw red rectangle around screen
         const cameraSize = getCameraSize();
         debugRect(cameraPos, cameraSize.subtract(vec2(.1)), '#f008');
@@ -1175,15 +1119,14 @@ function debugRender()
             // show floored tile pick for tile collision
             drawRect(mousePos.floor().add(vec2(.5)), vec2(1), rgb(1,1,0,.5));
         }
-        mainContext = saveContext;
     }
 
     {
         // draw debug primitives
-        overlayContext.lineWidth = 2;
+        debugContext.lineWidth = 2;
         debugPrimitives.forEach(p=>
         {
-            overlayContext.save();
+            debugContext.save();
 
             // create canvas transform from world space to screen space
             // without scaling because we want consistent pixel sizes
@@ -1194,55 +1137,56 @@ function debugRender()
                 scale = cameraScale;
                 angle -= cameraAngle;
             }
-            overlayContext.translate(pos.x|0, pos.y|0);
-            overlayContext.rotate(angle);
-            overlayContext.scale(1, p.text ? 1 : -1);
-            overlayContext.fillStyle = overlayContext.strokeStyle = p.color;
+            debugContext.translate(pos.x|0, pos.y|0);
+            debugContext.rotate(angle);
+            debugContext.scale(1, p.text ? 1 : -1);
+            debugContext.fillStyle = p.color;
+            debugContext.strokeStyle = p.color;
             if (p.text !== undefined)
             {
-                overlayContext.font = p.size*scale + 'px '+ p.font;
-                overlayContext.textAlign = 'center';
-                overlayContext.textBaseline = 'middle';
-                overlayContext.fillText(p.text, 0, 0);
+                debugContext.font = p.size*scale + 'px '+ p.font;
+                debugContext.textAlign = 'center';
+                debugContext.textBaseline = 'middle';
+                debugContext.fillText(p.text, 0, 0);
             }
             else if (p.points !== undefined)
             {
                 // poly
-                overlayContext.beginPath();
+                debugContext.beginPath();
                 for (const point of p.points)
                 {
                     const p2 = point.scale(scale).floor();
-                    overlayContext.lineTo(p2.x, p2.y);
+                    debugContext.lineTo(p2.x, p2.y);
                 }
-                overlayContext.closePath();
-                p.fill && overlayContext.fill();
-                overlayContext.stroke();
+                debugContext.closePath();
+                p.fill && debugContext.fill();
+                debugContext.stroke();
             }
             else if (p.size === 0 || (p.size.x === 0 && p.size.y === 0))
             {
                 // point
                 const pointSize = debugPointSize * scale;
-                overlayContext.fillRect(-pointSize/2, -1, pointSize, 3);
-                overlayContext.fillRect(-1, -pointSize/2, 3, pointSize);
+                debugContext.fillRect(-pointSize/2, -1, pointSize, 3);
+                debugContext.fillRect(-1, -pointSize/2, 3, pointSize);
             }
             else if (p.size.x !== undefined)
             {
                 // rect
                 const s = p.size.scale(scale).floor();
                 const w = s.x, h = s.y;
-                p.fill && overlayContext.fillRect(-w/2|0, -h/2|0, w, h);
-                overlayContext.strokeRect(-w/2|0, -h/2|0, w, h);
+                p.fill && debugContext.fillRect(-w/2|0, -h/2|0, w, h);
+                debugContext.strokeRect(-w/2|0, -h/2|0, w, h);
             }
             else
             {
                 // circle
-                overlayContext.beginPath();
-                overlayContext.arc(0, 0, p.size*scale/2, 0, 9);
-                p.fill && overlayContext.fill();
-                overlayContext.stroke();
+                debugContext.beginPath();
+                debugContext.arc(0, 0, p.size*scale/2, 0, 9);
+                p.fill && debugContext.fill();
+                debugContext.stroke();
             }
 
-            overlayContext.restore();
+            debugContext.restore();
         });
 
         // remove expired primitives
@@ -1251,55 +1195,53 @@ function debugRender()
 
     if (debugObject)
     {
-        const saveContext = mainContext;
-        mainContext = overlayContext;
         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));
 
-        const debugText = 'mouse pos = ' + mousePos +
-            '\nmouse collision = ' + tileCollisionGetData(mousePos) +
-            '\n\n--- object info ---\n' +
-            debugObject.toString();
+        let debugText = 'mouse pos = ' + mousePos;
+        if (tileCollisionLayers.length)
+            debugText += '\nmouse collision = ' + tileCollisionGetData(mousePos);
+        debugText += '\n\n--- object info ---\n';
+        debugText += debugObject.toString();
         drawTextScreen(debugText, mousePosScreen, 24, rgb(), .05, undefined, 'center', 'monospace');
-        mainContext = saveContext;
     }
 
     {
         // draw debug overlay
         const fontSize = 20;
         const lineHeight = fontSize * 1.2 | 0;
-        overlayContext.save();
-        overlayContext.fillStyle = '#fff';
-        overlayContext.textAlign = 'left';
-        overlayContext.textBaseline = 'top';
-        overlayContext.font = fontSize + 'px monospace';
-        overlayContext.shadowColor = '#000';
-        overlayContext.shadowBlur = 9;
+        debugContext.save();
+        debugContext.fillStyle = '#fff';
+        debugContext.textAlign = 'left';
+        debugContext.textBaseline = 'top';
+        debugContext.font = fontSize + 'px monospace';
+        debugContext.shadowColor = '#000';
+        debugContext.shadowBlur = 9;
 
         let x = 9, y = 0, h = lineHeight;
         if (debugOverlay)
         {
-            overlayContext.fillText(`${engineName} v${engineVersion}`, x, y += h/2 );
-            overlayContext.fillText('Time: ' + formatTime(time), x, y += h);
-            overlayContext.fillText('FPS: ' + averageFPS.toFixed(1) + (glEnable?' WebGL':' Canvas2D'), 
+            debugContext.fillText(`${engineName} v${engineVersion}`, x, y += h/2 );
+            debugContext.fillText('Time: ' + formatTime(time), x, y += h);
+            debugContext.fillText('FPS: ' + averageFPS.toFixed(1) + (glEnable?' WebGL':' Canvas2D'), 
                 x, y += h);
-            overlayContext.fillText('Objects: ' + engineObjects.length, x, y += h);
-            overlayContext.fillText('Draw Count: ' + drawCount, x, y += h);
-            overlayContext.fillText('---------', x, y += h);
-            overlayContext.fillStyle = '#f00';
-            overlayContext.fillText('ESC: Debug Overlay', x, y += h);
-            overlayContext.fillStyle = debugPhysics ? '#f00' : '#fff';
-            overlayContext.fillText('1: Debug Physics', x, y += h);
-            overlayContext.fillStyle = debugParticles ? '#f00' : '#fff';
-            overlayContext.fillText('2: Debug Particles', x, y += h);
-            overlayContext.fillStyle = debugGamepads ? '#f00' : '#fff';
-            overlayContext.fillText('3: Debug Gamepads', x, y += h);
-            overlayContext.fillStyle = debugRaycast ? '#f00' : '#fff';
-            overlayContext.fillText('4: Debug Raycasts', x, y += h);
-            overlayContext.fillStyle = '#fff';
-            overlayContext.fillText('5: Save Screenshot', x, y += h);
-            overlayContext.fillText('6: Toggle Video Capture', x, y += h);
+            debugContext.fillText('Objects: ' + engineObjects.length, x, y += h);
+            debugContext.fillText('Draw Count: ' + drawCount, x, y += h);
+            debugContext.fillText('---------', x, y += h);
+            debugContext.fillStyle = '#f00';
+            debugContext.fillText('ESC: Debug Overlay', x, y += h);
+            debugContext.fillStyle = debugPhysics ? '#f00' : '#fff';
+            debugContext.fillText('1: Debug Physics', x, y += h);
+            debugContext.fillStyle = debugParticles ? '#f00' : '#fff';
+            debugContext.fillText('2: Debug Particles', x, y += h);
+            debugContext.fillStyle = debugGamepads ? '#f00' : '#fff';
+            debugContext.fillText('3: Debug Gamepads', x, y += h);
+            debugContext.fillStyle = debugRaycast ? '#f00' : '#fff';
+            debugContext.fillText('4: Debug Raycasts', x, y += h);
+            debugContext.fillStyle = '#fff';
+            debugContext.fillText('5: Save Screenshot', x, y += h);
+            debugContext.fillText('6: Toggle Video Capture', x, y += h);
 
             let keysPressed = '';
             let mousePressed = '';
@@ -1312,8 +1254,8 @@ function debugRender()
                 else if (keyIsDown(i, 0))
                     keysPressed += i + ' ' ;
             }
-            mousePressed && overlayContext.fillText('Mouse: ' + mousePressed, x, y += h);
-            keysPressed && overlayContext.fillText('Keys: ' + keysPressed, x, y += h);
+            mousePressed && debugContext.fillText('Mouse: ' + mousePressed, x, y += h);
+            keysPressed && debugContext.fillText('Keys: ' + keysPressed, x, y += h);
 
             // show gamepad buttons
             for (let i = 1; i < inputData.length; i++)
@@ -1325,26 +1267,49 @@ function debugRender()
                     if (keyIsDown(j, i))
                         buttonsPressed += j + ' ' ;
                 }
-                buttonsPressed && overlayContext.fillText(`Gamepad ${i-1}: ` + buttonsPressed, x, y += h);
+                buttonsPressed && debugContext.fillText(`Gamepad ${i-1}: ` + buttonsPressed, x, y += h);
             }
         }
         else
         {
-            overlayContext.fillText(debugPhysics ? 'Debug Physics' : '', x, y += h);
-            overlayContext.fillText(debugParticles ? 'Debug Particles' : '', x, y += h);
-            overlayContext.fillText(debugRaycast ? 'Debug Raycasts' : '', x, y += h);
-            overlayContext.fillText(debugGamepads ? 'Debug Gamepads' : '', x, y += h);
+            debugContext.fillText(debugPhysics ? 'Debug Physics' : '', x, y += h);
+            debugContext.fillText(debugParticles ? 'Debug Particles' : '', x, y += h);
+            debugContext.fillText(debugRaycast ? 'Debug Raycasts' : '', x, y += h);
+            debugContext.fillText(debugGamepads ? 'Debug Gamepads' : '', x, y += h);
         }
 
-        overlayContext.restore();
+        debugContext.restore();
     }
 }
 
+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 */
@@ -1354,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);
 
-    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);
 }
 
 ///////////////////////////////////////////////////////////////////////////////
@@ -1466,99 +1454,99 @@ function debugProtectConstant(obj)
  * - Color - holds a rgba color with some math functions
  * - Timer - tracks time automatically
  * - RandomGenerator - seeded random number generator
- * @namespace Utilities
+ * @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
@@ -1566,7 +1554,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
@@ -1574,7 +1562,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; }
 
@@ -1583,13 +1571,9 @@ function percent(value, valueA, valueB)
  *  @param {number} valueB
  *  @param {number} percent
  *  @return {number}
- *  @memberof Utilities */
+ *  @memberof Math */
 function lerp(valueA, valueB, percent)
-{
-    if (valueA >= 0 && valueA <= 1 && ((valueB < 0 || valueB > 1) && (percent < 0 || percent > 1)))
-        console.warn('lerp() parameter order changed! use lerp(start, end, p)');
-    return valueA + clamp(percent) * (valueB-valueA);
-}
+{ return valueA + clamp(percent) * (valueB-valueA); }
 
 /** Gets percent between percentA and percentB and linearly interpolates between lerpA and lerpB
  *  A shortcut for lerp(lerpA, lerpB, percent(value, percentA, percentB))
@@ -1599,7 +1583,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)); }
 
@@ -1608,7 +1592,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; }
 
@@ -1618,19 +1602,15 @@ 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)
-{
-    if (valueA >= 0 && valueA <= 1 && ((valueB < 0 || valueB > 1) && (percent < 0 || percent > 1)))
-        console.warn('lerpWrap() parameter order changed! use lerpWrap(start, end, p)');
-    return valueA + clamp(percent) * distanceWrap(valueB, valueA, wrapSize);
-}
+{ return valueA + clamp(percent) * distanceWrap(valueB, valueA, wrapSize); }
 
 /** Returns signed wrapped distance between the two angles passed in
  *  @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
@@ -1638,25 +1618,25 @@ 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
@@ -1666,7 +1646,7 @@ function nearestPowerOfTwo(value) { return 2**ceil(log2(value)); }
  *  @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 */
+ *  @memberof Math */
 function isOverlapping(posA, sizeA, posB, sizeB=vec2())
 {
     const dx = (posA.x - posB.x)*2;
@@ -1682,7 +1662,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
@@ -1723,52 +1703,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 */
+ * @memberof Math */
 function isString(s) { return s !== undefined && 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); }
 
 /**
@@ -1784,7 +1741,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');
@@ -1796,8 +1753,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();
@@ -2031,14 +1987,14 @@ class RandomGenerator
  * let a = vec2(0, 1); // vector with coordinates (0, 1)
  * a = vec2(5);        // set a to (5, 5)
  * b = vec2();         // set b to (0, 0)
- * @memberof Utilities */
+ * @memberof Math */
 function vec2(x=0, y) { return new Vector2(x, y === undefined ? x : y); }
 
 /**
  * Check if object is a valid Vector2
  * @param {any} v
  * @return {boolean}
- * @memberof Utilities */
+ * @memberof Math */
 function isVector2(v) { return v instanceof Vector2 && v.isValid(); }
 
 // vector2 asserts
@@ -2288,7 +2244,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); }
 
@@ -2299,14 +2255,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
@@ -2487,7 +2443,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) : '');
     }
@@ -2544,67 +2500,67 @@ 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 Utilities */
+ *  @memberof Math */
 const MAGENTA = debugProtectConstant(rgb(1,0,1));
 
 ///////////////////////////////////////////////////////////////////////////////
@@ -2690,6 +2646,84 @@ class Timer
      * @return {number} */
     valueOf() { return this.get(); }
 }
+/**
+ * LittleJS Utility 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
+ */
+
+/** 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 */
+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)
+{
+    // 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);
+}
 /**
  * LittleJS Engine Settings
  * - All settings for the engine are here
@@ -2727,7 +2761,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;
@@ -2764,15 +2798,7 @@ let canvasFixedSize = vec2();
  *  @type {boolean}
  *  @default
  *  @memberof Settings */
-let canvasPixelated = true;
-
-/** Use nearest canvas scaling for more pixelated look
- *  - If enabled sets css image-rendering:pixelated
- *  - This defaults to false because text looks better with smoothing
- *  @type {boolean}
- *  @default
- *  @memberof Settings */
-let overlayCanvasPixelated = false;
+let canvasPixelated = false;
 
 /** Disables texture filtering for crisper pixel art
  *  @type {boolean}
@@ -2820,13 +2846,19 @@ let glCircleSides = 32;
  *  @type {Vector2}
  *  @default Vector2(16,16)
  *  @memberof Settings */
-let tileSizeDefault = vec2(16);
+let tileDefaultSize = vec2(16);
 
-/** How many pixels smaller to draw tiles to prevent bleeding from neighbors
+/** Default padding pixels around tiles
  *  @type {number}
  *  @default
  *  @memberof Settings */
-let tileFixBleedScale = 0;
+let tileDefaultPadding = 0;
+
+/** Default amount of pixels smaller to draw tiles to prevent neighbor bleeding
+ *  @type {number}
+ *  @default
+ *  @memberof Settings */
+let tileDefaultBleed = 0;
 
 ///////////////////////////////////////////////////////////////////////////////
 // Object settings
@@ -3038,7 +3070,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(); }
@@ -3064,7 +3096,6 @@ function setCanvasMaxAspect(aspect) { canvasMaxAspect = aspect; }
 function setCanvasFixedSize(size) { canvasFixedSize = size.copy(); }
 
 /** Use nearest scaling algorithm for canvas for more pixelated look
- *  - If enabled sets css image-rendering:pixelated
  *  @param {boolean} pixelated
  *  @memberof Settings */
 function setCanvasPixelated(pixelated)
@@ -3076,18 +3107,6 @@ function setCanvasPixelated(pixelated)
         glCanvas.style.imageRendering = pixelated ? 'pixelated' : '';
 }
 
-/** Use nearest scaling algorithm for canvas for more pixelated look
- *  - If enabled sets css image-rendering:pixelated
- *  - This defaults to false because text looks better with smoothing
- *  @param {boolean} pixelated
- *  @memberof Settings */
-function setOverlayCanvasPixelated(pixelated)
-{
-    overlayCanvasPixelated = pixelated;
-    if (overlayCanvas)
-        overlayCanvas.style.imageRendering = pixelated ? 'pixelated' : '';
-}
-
 /** Disables texture filtering for crisper pixel art
  *  @param {boolean} pixelated
  *  @memberof Settings */
@@ -3131,12 +3150,17 @@ function setGLCircleSides(sides) { glCircleSides = sides; }
 /** Set default size of tiles in pixels
  *  @param {Vector2} size
  *  @memberof Settings */
-function setTileSizeDefault(size) { tileSizeDefault = size.copy(); }
+function setTileDefaultSize(size) { tileDefaultSize = size.copy(); }
 
-/** Set to prevent tile bleeding from neighbors in pixels
- *  @param {number} scale
+/** Default padding pixels around tiles
+ *  @param {number} padding
  *  @memberof Settings */
-function setTileFixBleedScale(scale) { tileFixBleedScale = scale; }
+function setTileDefaultPadding(padding) { tileDefaultPadding = padding; }
+
+/** Default amount of pixels smaller to draw tiles to prevent neighbor bleeding
+ *  @param {number} bleed
+ *  @memberof Settings */
+function setTileDefaultBleed(bleed) { tileDefaultBleed = bleed; }
 
 /** Set if collisions between objects are enabled
  *  @param {boolean} enable
@@ -3287,7 +3311,7 @@ function setMedalsPreventUnlock(preventUnlock) { medalsPreventUnlock = preventUn
 /** Set if watermark with FPS should be shown
  *  @param {boolean} show
  *  @memberof Debug */
-function setShowWatermark(show) { showWatermark = show; }
+function setDebugWatermark(show) { debugWatermark = show; }
 
 /** Set key code used to toggle debug mode, Esc by default
  *  @param {string} key
@@ -3723,10 +3747,11 @@ 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 given local transform
+    /** Attaches a child to this with a local transform, returns child for chaining   
      *  @param {EngineObject} child
      *  @param {Vector2}      [localPos=(0,0)]
-     *  @param {number}       [localAngle] */
+     *  @param {number}       [localAngle]
+     *  @return {EngineObject} The child object added */
     addChild(child, localPos=vec2(), localAngle=0)
     {
         ASSERT(!child.parent && !this.children.includes(child));
@@ -3736,6 +3761,7 @@ class EngineObject
         child.parent = this;
         child.localPos = localPos.copy();
         child.localAngle = localAngle;
+        return child;
     }
 
     /** Removes a child from this one
@@ -3802,8 +3828,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));
@@ -3826,7 +3851,6 @@ class EngineObject
  * There are 3 canvas/contexts available to draw to...
  * mainCanvas - 2D background canvas, non WebGL stuff like tile layers are drawn here.
  * glCanvas - Used by the accelerated WebGL batch rendering system.
- * overlayCanvas - Another 2D canvas that appears on top of the other 2 canvases.
  *
  * The WebGL rendering system is very fast with some caveats...
  * - Switching blend modes (additive) or textures causes another draw call which is expensive in excess
@@ -3846,21 +3870,6 @@ let mainCanvas;
  *  @memberof Draw */
 let mainContext;
 
-/** A canvas that appears on top of everything the same size as mainCanvas
- *  @type {HTMLCanvasElement}
- *  @memberof Draw */
-let overlayCanvas;
-
-/** 2d context for overlayCanvas
- *  @type {CanvasRenderingContext2D}
- *  @memberof Draw */
-let overlayContext;
-
-/** 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 */
@@ -3876,6 +3885,16 @@ let workCanvas;
  *  @memberof Draw */
 let workContext;
 
+/** Offscreen canvas with willReadFrequently that can be used for image processing
+ *  @type {OffscreenCanvas}
+ *  @memberof Draw */
+let workReadCanvas;
+
+/** Offscreen canvas with willReadFrequently that can be used for image processing
+ *  @type {OffscreenCanvasRenderingContext2D}
+ *  @memberof Draw */
+let workReadContext;
+
 /** The size of the main canvas (and other secondary canvases)
  *  @type {Vector2}
  *  @memberof Draw */
@@ -3898,7 +3917,7 @@ let drawCount;
  * - 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} [size=tileSizeDefault] - Size of tile in pixels
+ * @param {Vector2|number} [size] - Size of tile in pixels
  * @param {number} [textureIndex] - Texture index to use
  * @param {number} [padding] - How many pixels padding around tiles
  * @return {TileInfo}
@@ -3908,7 +3927,7 @@ 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=tileSizeDefault, textureIndex=0, padding=0)
+function tile(pos=new Vector2, size=tileDefaultSize, textureIndex=0, padding=tileDefaultPadding)
 {
     if (headlessMode)
         return new TileInfo;
@@ -3947,13 +3966,13 @@ function tile(pos=new Vector2, size=tileSizeDefault, textureIndex=0, padding=0)
 class TileInfo
 {
     /** Create a tile info object
-     *  @param {Vector2} [pos=(0,0)]            - Top left corner of tile in pixels
-     *  @param {Vector2} [size=tileSizeDefault] - Size of tile in pixels
-     *  @param {number}  [textureIndex]         - Texture index to use
-     *  @param {number}  [padding]              - How many pixels padding around tiles
-     *  @param {number}  [bleedScale]           - How many pixels smaller to draw tiles
+     *  @param {Vector2} [pos=(0,0)] - 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
      */
-    constructor(pos=vec2(), size=tileSizeDefault, textureIndex=0, padding=0, bleedScale=tileFixBleedScale)
+    constructor(pos=vec2(), size=tileDefaultSize, textureIndex=0, padding=tileDefaultPadding, bleed=tileDefaultBleed)
     {
         /** @property {Vector2} - Top left corner of tile in pixels */
         this.pos = pos.copy();
@@ -3966,7 +3985,7 @@ class TileInfo
         /** @property {TextureInfo} - The texture info for this tile */
         this.textureInfo = textureInfos[this.textureIndex];
         /** @property {number} - Shrinks tile by this many pixels to prevent neighbors bleeding */
-        this.bleedScale = bleedScale;
+        this.bleed = bleed;
     }
 
     /** Returns a copy of this tile offset by a vector
@@ -3974,7 +3993,7 @@ class TileInfo
     *  @return {TileInfo}
     */
     offset(offset)
-    { return new TileInfo(this.pos.add(offset), this.size, this.textureIndex, this.padding, this.bleedScale); }
+    { return new TileInfo(this.pos.add(offset), this.size, this.textureIndex, 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
@@ -3997,7 +4016,7 @@ class TileInfo
         this.size = textureInfo.size.copy();
         this.textureInfo = textureInfo;
         // do not use padding or bleed
-        this.bleedScale = this.padding = 0;
+        this.bleed = this.padding = 0;
         return this;
     }
 }
@@ -4063,7 +4082,7 @@ function drawTile(pos, size=new Vector2(1), tileInfo, color=WHITE,
     ASSERT(!context || !useWebGL, 'context only supported in canvas 2D mode');
 
     const textureInfo = tileInfo && tileInfo.textureInfo;
-    const bleedScale = tileInfo ? tileInfo.bleedScale : 0;
+    const bleed = tileInfo?.bleed ?? 0;
     if (useWebGL && glEnable)
     {
         ASSERT(!!glContext, 'WebGL is not enabled!');
@@ -4078,13 +4097,13 @@ function drawTile(pos, size=new Vector2(1), tileInfo, color=WHITE,
             const w = tileInfo.size.x * sizeInverse.x;
             const h = tileInfo.size.y * sizeInverse.y;
             glSetTexture(textureInfo.glTexture);
-            if (bleedScale)
+            if (bleed)
             {
-                const tileImageFixBleedX = sizeInverse.x*bleedScale;
-                const tileImageFixBleedY = sizeInverse.y*bleedScale;
+                const bleedX = sizeInverse.x*bleed;
+                const bleedY = sizeInverse.y*bleed;
                 glDraw(pos.x, pos.y, mirror ? -size.x : size.x, size.y, angle,
-                    x + tileImageFixBleedX,     y + tileImageFixBleedY,
-                    x - tileImageFixBleedX + w, y - tileImageFixBleedY + h,
+                    x + bleedX,     y + bleedY,
+                    x - bleedX + w, y - bleedY + h,
                     color.rgbaInt(), additiveColor && additiveColor.rgbaInt());
             }
             else
@@ -4112,7 +4131,7 @@ function drawTile(pos, size=new Vector2(1), tileInfo, color=WHITE,
                 // calculate uvs and render
                 const x = tileInfo.pos.x,  y = tileInfo.pos.y;
                 const w = tileInfo.size.x, h = tileInfo.size.y;
-                drawImageColor(context, textureInfo.image, x, y, w, h, -.5, -.5, 1, 1, color, additiveColor, bleedScale);
+                drawImageColor(context, textureInfo.image, x, y, w, h, -.5, -.5, 1, 1, color, additiveColor, bleed);
             }
             else
             {
@@ -4438,7 +4457,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);
@@ -4477,26 +4500,7 @@ function drawText(text, pos, size=1, color, lineWidth=0, lineColor, textAlign, f
     drawTextScreen(text, pos, size, color, lineWidth, lineColor, textAlign, font, fontStyle, maxWidth, angle, context);
 }
 
-/** Draw text on overlay canvas in world space
- *  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}  [lineWidth]
- *  @param {Color}   [lineColor=(0,0,0,1)]
- *  @param {CanvasTextAlign}  [textAlign='center']
- *  @param {string}  [font=fontDefault]
- *  @param {string}  [fontStyle]
- *  @param {number}  [maxWidth]
- *  @param {number}  [angle]
- *  @memberof Draw */
-function drawTextOverlay(text, pos, size=1, color, lineWidth=0, lineColor, textAlign, font, fontStyle, maxWidth, angle=0)
-{
-    drawText(text, pos, size, color, lineWidth, lineColor, textAlign, font, fontStyle, maxWidth, angle, overlayContext);
-}
-
-/** Draw text on overlay canvas in screen space
+/** Draw text in screen space
  *  Automatically splits new lines into rows
  *  @param {string|number}  text
  *  @param {Vector2} pos
@@ -4509,9 +4513,9 @@ function drawTextOverlay(text, pos, size=1, color, lineWidth=0, lineColor, textA
  *  @param {string}  [fontStyle]
  *  @param {number}  [maxWidth]
  *  @param {number}  [angle]
- *  @param {CanvasRenderingContext2D|OffscreenCanvasRenderingContext2D} [context=overlayContext]
+ *  @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=overlayContext)
+function drawTextScreen(text, pos, size=1, 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');
@@ -4555,16 +4559,16 @@ function drawTextScreen(text, pos, size=1, color=WHITE, lineWidth=0, lineColor=B
  *  @memberof Draw */
 function screenToWorld(screenPos)
 {
+    ASSERT(isVector2(screenPos), 'screenPos must be a vec2');
+
     let x = (screenPos.x - mainCanvasSize.x/2 + .5) /  cameraScale;
     let y = (screenPos.y - mainCanvasSize.y/2 + .5) / -cameraScale;
     if (cameraAngle)
     {
         // apply camera rotation
         const c = cos(-cameraAngle), s = sin(-cameraAngle);
-        const rotatedX = x * c - y * s;
-        const rotatedY = x * s + y * c;
-        x = rotatedX;
-        y = rotatedY;
+        const xr = x * c - y * s, yr = x * s + y * c;
+        x = xr; y = yr;
     }
     return new Vector2(x + cameraPos.x, y + cameraPos.y);
 }
@@ -4575,16 +4579,16 @@ function screenToWorld(screenPos)
  *  @memberof Draw */
 function worldToScreen(worldPos)
 {
+    ASSERT(isVector2(worldPos), 'worldPos must be a vec2');
+
     let x = worldPos.x - cameraPos.x;
     let y = worldPos.y - cameraPos.y;
     if (cameraAngle)
     {
         // apply inverse camera rotation
         const c = cos(cameraAngle), s = sin(cameraAngle);
-        const rotatedX = x * c - y * s;
-        const rotatedY = x * s + y * c;
-        x = rotatedX;
-        y = rotatedY;
+        const xr = x * c - y * s, yr = x * s + y * c;
+        x = xr; y = yr;
     }
     return new Vector2
     (
@@ -4599,16 +4603,16 @@ function worldToScreen(worldPos)
  *  @memberof Draw */
 function screenToWorldDelta(screenDelta)
 {
+    ASSERT(isVector2(screenDelta), 'screenDelta must be a vec2');
+
     let x = screenDelta.x /  cameraScale;
     let y = screenDelta.y / -cameraScale;
     if (cameraAngle)
     {
         // apply camera rotation
         const c = cos(-cameraAngle), s = sin(-cameraAngle);
-        const rotatedX = x * c - y * s;
-        const rotatedY = x * s + y * c;
-        x = rotatedX;
-        y = rotatedY;
+        const xr = x * c - y * s, yr = x * s + y * c;
+        x = xr; y = yr;
     }
     return new Vector2(x, y);
 }
@@ -4619,16 +4623,16 @@ function screenToWorldDelta(screenDelta)
  *  @memberof Draw */
 function worldToScreenDelta(worldDelta)
 {
+    ASSERT(isVector2(worldDelta), 'worldDelta must be a vec2');
+
     let x = worldDelta.x;
     let y = worldDelta.y;
     if (cameraAngle)
     {
         // apply inverse camera rotation
         const c = cos(cameraAngle), s = sin(cameraAngle);
-        const rotatedX = x * c - y * s;
-        const rotatedY = x * s + y * c;
-        x = rotatedX;
-        y = rotatedY;
+        const xr = x * c - y * s, yr = x * s + y * c;
+        x = xr; y = yr;
     }
     return new Vector2(x *  cameraScale, y * -cameraScale);
 }
@@ -4641,6 +4645,10 @@ function worldToScreenDelta(worldDelta)
  *  @memberof Draw */
 function screenToWorldTransform(screenPos, screenSize, screenAngle=0)
 {
+    ASSERT(isVector2(screenPos), 'screenPos must be a vec2');
+    ASSERT(isVector2(screenSize), 'screenSize must be a vec2');
+    ASSERT(isNumber(screenAngle), 'screenAngle must be a number');
+
     return [
         screenToWorld(screenPos),
         screenSize.scale(1/cameraScale),
@@ -4648,28 +4656,13 @@ 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)
-{
-    return [
-        worldToScreen(worldPos),
-        worldSize.scale(cameraScale),
-        worldAngle - cameraAngle
-    ];
-}
-
 /** Get the size of the camera window in world space
  *  @return {Vector2}
  *  @memberof Draw */
 function getCameraSize() { return mainCanvasSize.scale(1/cameraScale); }
 
-/** Check if a point or circle is on screen
- *  If size is a Vector2, uses the largest dimension as diameter
+/** Check if a box, point, or circle is on screen with a circle test
+ *  If size is a Vector2, uses the length as diameter
  *  This can be used to cull offscreen objects from render or update
  *  @param {Vector2} pos - world space position
  *  @param {Vector2|number} size - world space size or diameter
@@ -4677,12 +4670,30 @@ function getCameraSize() { return mainCanvasSize.scale(1/cameraScale); }
  *  @memberof Draw */
 function isOnScreen(pos, size=0)
 {
-    pos = worldToScreen(pos);
+    ASSERT(isVector2(pos), 'pos must be a vec2');
+    ASSERT(isVector2(size) || isNumber(size), 'size must be a vec2 or number');
+
+    // optimized circle on screen test
+    // pos = worldToScreen(pos);
+    let x = pos.x - cameraPos.x;
+    let y = pos.y - cameraPos.y;
+    if (cameraAngle)
+    {
+        // apply inverse camera rotation
+        const c = cos(cameraAngle), s = sin(cameraAngle);
+        const xr = x * c - y * s, yr = x * s + y * c;
+        x = xr; y = yr;
+    }
+    x *= cameraScale*2; y *= -cameraScale*2;
+
     if (size instanceof Vector2)
-        size = max(size.x, size.y); // use largest dimension
-    size *= cameraScale/2;
-    return pos.x + size > 0 && pos.x - size < mainCanvasSize.x &&
-           pos.y + size > 0 && pos.y - size < mainCanvasSize.y;
+        size = size.length(); // use length of vector as diameter
+    size *= cameraScale;
+
+    // check against screen bounds
+    const w = mainCanvasSize.x, h = mainCanvasSize.y;
+    return x + size > -w && x - size < w &&
+           y + size > -h && y - size < h;
 }
 
 /** Enable normal or additive blend mode
@@ -4696,18 +4707,19 @@ function setBlendMode(additive=false, context)
     context.globalCompositeOperation = additive ? 'lighter' : 'source-over';
 }
 
-/** Combines all LittleJS canvases onto the main canvas and clears them
- *  This is necessary for things like saving a screenshot
+/** Combines LittleJS canvases onto the main canvas
+ *  This is necessary for things like screenshots and video
  *  @memberof Draw */
 function combineCanvases()
 {
-    // combine canvases
-    glCopyToContext(mainContext);
-    mainContext.drawImage(overlayCanvas, 0, 0);
-
-    // clear canvases
-    glClearCanvas();
-    overlayCanvas.width |= 0;
+    const w = mainCanvasSize.x, h = mainCanvasSize.y;
+    workCanvas.width = w;
+    workCanvas.height = h;
+    workContext.fillRect(0,0,w,h); // remove background alpha
+    glCopyToContext(workContext);
+    workContext.drawImage(mainCanvas, 0, 0);
+    mainCanvas.width |= 0;
+    mainContext.drawImage(workCanvas, 0, 0);
 }
 
 /** Helper function to draw an image with color and additive color applied
@@ -4724,18 +4736,18 @@ function combineCanvases()
     *  @param {number} dHeight
     *  @param {Color} color
     *  @param {Color} [additiveColor]
-    *  @param {number} [bleedScale] - How much to shrink the source, used to fix bleeding
+    *  @param {number} [bleed] - How many pixels to shrink the source, used to fix bleeding
  *  @memberof Draw */
-function drawImageColor(context, image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight, color, additiveColor, bleedScale=0)
+function drawImageColor(context, image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight, color, additiveColor, bleed=0)
 {
     function isWhite(c) { return c.r >= 1 && c.g >= 1 && c.b >= 1; }
     function isBlack(c) { return c.r <= 0 && c.g <= 0 && c.b <= 0 && c.a <= 0; }
-    const sx2 = bleedScale;
-    const sy2 = bleedScale;
+    const sx2 = bleed;
+    const sy2 = bleed;
     sWidth  = max(1,sWidth|0);
     sHeight = max(1,sHeight|0);
-    const sWidth2  = sWidth  - 2*bleedScale;
-    const sHeight2 = sHeight - 2*bleedScale;
+    const sWidth2  = sWidth  - 2*bleed;
+    const sHeight2 = sHeight - 2*bleed;
     if (!canvasColorTiles || (additiveColor ? isWhite(color.add(additiveColor)) && additiveColor.a <= 0 : isWhite(color)))
     {
         // white texture with no additive alpha, no need to tint
@@ -4746,12 +4758,12 @@ function drawImageColor(context, image, sx, sy, sWidth, sHeight, dx, dy, dWidth,
     else
     {
         // copy to offscreen canvas
-        workCanvas.width = sWidth;
-        workCanvas.height = sHeight;
-        workContext.drawImage(image, sx|0, sy|0, sWidth, sHeight, 0, 0, sWidth, sHeight);
+        workReadCanvas.width = sWidth;
+        workReadCanvas.height = sHeight;
+        workReadContext.drawImage(image, sx|0, sy|0, sWidth, sHeight, 0, 0, sWidth, sHeight);
 
         // tint image using offscreen work context
-        const imageData = workContext.getImageData(0, 0, sWidth, sHeight);
+        const imageData = workReadContext.getImageData(0, 0, sWidth, sHeight);
         const data = imageData.data;
         if (additiveColor && !isBlack(additiveColor))
         {
@@ -4760,8 +4772,8 @@ function drawImageColor(context, image, sx, sy, sWidth, sHeight, dx, dy, dWidth,
             const colorAdd = [additiveColor.r * 255, additiveColor.g * 255, additiveColor.b * 255, additiveColor.a * 255];
             for (let i = 0; i < data.length; ++i)
                 data[i] = data[i] * colorMultiply[i&3] + colorAdd[i&3] |0;
-            workContext.putImageData(imageData, 0, 0);
-            context.drawImage(workCanvas, sx2, sy2, sWidth2, sHeight2, dx, dy, dWidth, dHeight);
+            workReadContext.putImageData(imageData, 0, 0);
+            context.drawImage(workReadCanvas, sx2, sy2, sWidth2, sHeight2, dx, dy, dWidth, dHeight);
         }
         else
         {
@@ -4772,9 +4784,9 @@ function drawImageColor(context, image, sx, sy, sWidth, sHeight, dx, dy, dWidth,
                 data[i+1] *= color.g;
                 data[i+2] *= color.b;
             }
-            workContext.putImageData(imageData, 0, 0);
+            workReadContext.putImageData(imageData, 0, 0);
             context.globalAlpha = color.a;
-            context.drawImage(workCanvas, sx2, sy2, sWidth2, sHeight2, dx, dy, dWidth, dHeight);
+            context.drawImage(workReadCanvas, sx2, sy2, sWidth2, sHeight2, dx, dy, dWidth, dHeight);
             context.globalAlpha = 1;
         }
     }
@@ -4836,7 +4848,7 @@ class FontImage
     constructor(image, tileSize=vec2(8), paddingSize=vec2(0,1))
     {
         // load default font image
-        if (!engineFontImage)
+        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';
@@ -4859,23 +4871,14 @@ class FontImage
         this.drawTextScreen(text, worldToScreen(pos).floor(), scale*cameraScale|0, center, context);
     }
 
-    /** Draw text on overlay canvas in world space using the image font
-     *  @param {string|number}  text
-     *  @param {Vector2} pos
-     *  @param {number}  [scale]
-     *  @param {boolean} [center]
-     */
-    drawTextOverlay(text, pos, scale=4, center)
-    { this.drawText(text, pos, scale, center, overlayContext); }
-
-    /** Draw text on overlay canvas in screen space using the image font
+    /** Draw text in screen space using the image font
      *  @param {string|number}  text
      *  @param {Vector2} pos
      *  @param {number}  [scale]
      *  @param {boolean} [center]
      *  @param {CanvasRenderingContext2D|OffscreenCanvasRenderingContext2D} [context=drawContext]
      */
-    drawTextScreen(text, pos, scale=4, center=true, context=overlayContext)
+    drawTextScreen(text, pos, scale=4, center=true, context=drawContext)
     {
         context.save();
         const size = this.tileSize;
@@ -5268,8 +5271,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())
@@ -5320,8 +5322,7 @@ function inputInit()
         let wasTouching;
         function handleTouch(e)
         {
-            if (!touchInputEnable)
-                return;
+            if (!touchInputEnable) return;
 
             // route touch to gamepad
             if (touchGamepadEnable)
@@ -5385,8 +5386,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);
@@ -5625,7 +5625,7 @@ function inputRender()
             return;
 
         // setup the canvas
-        const context = overlayContext;
+        const context = mainContext;
         context.save();
         context.globalAlpha = alpha*touchGamepadAlpha;
         context.strokeStyle = '#fff';
@@ -5867,12 +5867,12 @@ class Sound
 ///////////////////////////////////////////////////////////////////////////////
 
 /**
- * Sound Wave Object - Stores a wave sound for later use and can be played positionally
- * - this can be used to play wave, mp3, and ogg files
+ * Sound Wave Object - Loads and stores an audio file for later use
+ * - this can be used to load and play wave, mp3, and ogg files
  * @extends Sound
  * @memberof Audio
  * @example
- * // create a sound
+ * // load an audio asset file
  * const sound_example = new SoundWave('sound.mp3');
  *
  * // play the sound
@@ -6072,8 +6072,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();
@@ -6085,8 +6084,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);
@@ -6824,26 +6822,26 @@ class TileLayer extends CanvasLayer
         if (!this.context) return;
 
         // save current render settings
-        /** @type {[HTMLCanvasElement|OffscreenCanvas, CanvasRenderingContext2D|OffscreenCanvasRenderingContext2D, Vector2, Vector2, number]} */
-        this.savedRenderSettings = [drawCanvas, drawContext, mainCanvasSize, cameraPos, cameraScale];
+        /** @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;
         mainCanvasSize = this.size.multiply(tileSize);
         if (clear)
         {
             // clear and set size
-            drawCanvas.width  = mainCanvasSize.x;
-            drawCanvas.height = mainCanvasSize.y;
+            this.canvas.width  = mainCanvasSize.x;
+            this.canvas.height = mainCanvasSize.y;
         }
 
         // disable smoothing for pixel art
-        this.context.imageSmoothingEnabled = !tilesPixelated;
+        drawContext.imageSmoothingEnabled = !tilesPixelated;
 
         // setup gl rendering if enabled
         glPreRender();
@@ -6856,10 +6854,10 @@ class TileLayer extends CanvasLayer
 
         ASSERT(drawContext === this.context, 'must call redrawStart() before drawing tiles');
         glCopyToContext(drawContext);
-        //debugSaveCanvas(this.canvas);
+        //saveCanvas(this.canvas);
 
         // set stuff back to normal
-        [drawCanvas, drawContext, mainCanvasSize, cameraPos, cameraScale] = this.savedRenderSettings;
+        [drawContext, mainCanvasSize, cameraPos, cameraScale, canvasClearColor] = this.savedRenderSettings;
     }
 
     /** Draw the tile at a given position in the tile grid
@@ -6927,8 +6925,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);
@@ -7465,10 +7462,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];
@@ -7558,8 +7556,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');
@@ -7572,10 +7569,10 @@ class Medal
      */
     render(hidePercent=0)
     {
-        const context = overlayContext;
+        const context = mainContext;
         const width = min(medalDisplaySize.x, mainCanvas.width);
         const height = medalDisplaySize.y;
-        const x = overlayCanvas.width - width;
+        const x = mainCanvas.width - width;
         const y = -height*hidePercent;
         const backgroundColor = hsl(0,0,.9);
 
@@ -7616,7 +7613,7 @@ class Medal
     {
         // draw the image or icon
         if (this.image)
-            overlayContext.drawImage(this.image, pos.x-size/2, pos.y-size/2, size, size);
+            mainContext.drawImage(this.image, pos.x-size/2, pos.y-size/2, size, size);
         else
             drawTextScreen(this.icon, pos, size*.7, BLACK);
     }
@@ -7637,7 +7634,7 @@ class Medal
  * @namespace WebGL
  */
 
-/** The WebGL canvas which appears above the main canvas and below the overlay canvas
+/** The WebGL canvas which appears below the main canvas
  *  @type {HTMLCanvasElement}
  *  @memberof WebGL */
 let glCanvas;
@@ -7667,7 +7664,7 @@ const gl_MAX_POLY_VERTEXES = gl_ARRAY_BUFFER_SIZE / gl_POLY_VERTEX_BYTE_STRIDE |
 ///////////////////////////////////////////////////////////////////////////////
 
 // Initialize WebGL, called automatically by the engine
-function glInit()
+function glInit(rootElement)
 {
     // keep set of texture infos so they can be restored if context is lost
     glTextureInfos = new Set;
@@ -7691,8 +7688,7 @@ function glInit()
         return;
     }
 
-    // attach the WebGL canvas
-    const rootElement = mainCanvas.parentElement;
+    // attach the WebGL canvas;
     rootElement.appendChild(glCanvas);
     
     // startup webgl
@@ -7793,8 +7789,7 @@ function glInit()
 
 function glSetInstancedMode()
 {
-    if (!glPolyMode)
-        return;
+    if (!glPolyMode) return;
     
     // setup instanced mode
     glFlush();
@@ -7827,8 +7822,7 @@ function glSetInstancedMode()
 
 function glSetPolyMode()
 {
-    if (glPolyMode)
-        return;
+    if (glPolyMode) return;
     
     // setup poly mode
     glFlush();
@@ -7907,9 +7901,12 @@ function glClearCanvas()
     if (!glContext) return;
 
     // clear and set to same size as main canvas
-    glCanvas.width = drawCanvas.width;
-    glCanvas.height = drawCanvas.height;
+    glCanvas.width = mainCanvasSize.x;
+    glCanvas.height = mainCanvasSize.y;
     glContext.viewport(0, 0, glCanvas.width, glCanvas.height);
+    const color = canvasClearColor;
+    if (color.a > 0)
+        glContext.clearColor(color.r, color.g, color.b, color.a);
     glContext.clear(glContext.COLOR_BUFFER_BIT);
 }
 
@@ -7921,8 +7918,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;
@@ -8018,6 +8014,7 @@ function glCreateTexture(image)
 function glDeleteTexture(texture)
 {
     if (!glContext) return;
+    
     glContext.deleteTexture(texture);
 }
 
@@ -8102,8 +8099,7 @@ function glFlush()
  *  @memberof WebGL */
 function glCopyToContext(context)
 {
-    if (!glEnable || !glContext)
-        return;
+    if (!glEnable || !glContext) return;
 
     glFlush();
     context.drawImage(glCanvas, 0, 0);
@@ -8139,7 +8135,6 @@ function glDraw(x, y, sizeX, sizeY, angle=0, uv0X=0, uv0Y=0, uv1X=1, uv1Y=1, rgb
         glFlush();
     glSetInstancedMode();
 
-    glPolyMode = false;
     let offset = glBatchCount++ * gl_INDICES_PER_INSTANCE;
     glPositionData[offset++] = x;
     glPositionData[offset++] = y;
@@ -8660,13 +8655,12 @@ class PostProcessPlugin
 {
     /** Create global post processing shader
     *  @param {string} shaderCode
-    *  @param {boolean} [includeOverlay]
     *  @param {boolean} [includeMainCanvas]
      *  @example
      *  // create the post process plugin object
      *  new PostProcessPlugin(shaderCode);
      */
-    constructor(shaderCode, includeOverlay=false, includeMainCanvas=true)
+    constructor(shaderCode, includeMainCanvas=true)
     {
         ASSERT(!postProcess, 'Post process already initialized');
         postProcess = this;
@@ -8738,17 +8732,19 @@ class PostProcessPlugin
             // clear out the buffer
             glFlush();
             
-            if (includeMainCanvas || includeOverlay)
+            // setup texture
+            glContext.activeTexture(glContext.TEXTURE0);
+            glContext.bindTexture(glContext.TEXTURE_2D, postProcess.texture);
+            if (includeMainCanvas)
             {
-                // copy WebGL to the main canvas
-                mainContext.drawImage(glCanvas, 0, 0);
-
-                if (includeOverlay)
-                {
-                    // copy overlay canvas so it will be included in post processing
-                    mainContext.drawImage(overlayCanvas, 0, 0);
-                    overlayCanvas.width |= 0; // clear overlay canvas
-                }
+                // copy main canvas to work canvas
+                workCanvas.width = mainCanvasSize.x;
+                workCanvas.height = mainCanvasSize.y;
+                glCopyToContext(workContext);
+                workContext.drawImage(mainCanvas, 0, 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
@@ -8757,14 +8753,6 @@ class PostProcessPlugin
             glContext.pixelStorei(glContext.UNPACK_FLIP_Y_WEBGL, 1);
             glContext.disable(glContext.BLEND);
 
-            // set textures, pass in the 2d canvas and gl canvas in separate texture channels
-            glContext.activeTexture(glContext.TEXTURE0);
-            glContext.bindTexture(glContext.TEXTURE_2D, postProcess.texture);
-            if (includeMainCanvas || includeOverlay)
-            {
-                glContext.texImage2D(glContext.TEXTURE_2D, 0, glContext.RGBA, glContext.RGBA, glContext.UNSIGNED_BYTE, mainCanvas);
-            }
-
             // set vertex position attribute
             const vertexByteStride = 8;
             const pLocation = glContext.getAttribLocation(postProcess.shader, 'p');
@@ -8993,12 +8981,14 @@ class UISystemPlugin
      *  // create the ui plugin object
      *  new UISystemPlugin;
      */
-    constructor(context=overlayContext)
+    constructor(context=mainContext)
     {
         ASSERT(!uiSystem, 'UI system already initialized');
         uiSystem = this;
 
         // default settings
+        /** @property {boolean} - Activate when mouse is pressed down instead of clicked */
+        this.activateOnPress = false;
         /** @property {Color} - Default fill color for UI elements */
         this.defaultColor = WHITE;
         /** @property {Color} - Default outline color for UI elements */
@@ -9650,13 +9640,15 @@ class UIObject
         uiSystem.uiObjects.push(this);
     }
 
-    /** Add a child UIObject to this object
-     *  @param {UIObject} child */
+    /** Add a child UIObject to this object, returns child for chaining
+     *  @param {UIObject} child
+     *  @return {UIObject} The child object added */
     addChild(child)
     {
         ASSERT(!child.parent && !this.children.includes(child));
         this.children.push(child);
         child.parent = this;
+        return child;
     }
 
     /** Remove a child UIObject from this object
@@ -9703,7 +9695,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;
@@ -9729,8 +9721,16 @@ class UIObject
                         if (uiSystem.activeObject && !isActive)
                             uiSystem.activeObject.onRelease();
                         uiSystem.activeObject = this;
+
+                        if (uiSystem.activateOnPress)
+                        {
+                            this.onClick();
+                            if (!this.soundPress && this.soundClick)
+                                this.soundClick.play();
+                        }
                     }
                 }
+                if (!uiSystem.activateOnPress)
                 if (!mouseDown && this.isActiveObject() && this.interactive)
                 {
                     this.onClick();
@@ -12170,33 +12170,33 @@ async function box2dInit()
             color = getDebugColor(color);
             point1 = box2d.vec2FromPointer(point1);
             point2 = box2d.vec2FromPointer(point2);
-            drawLine(point1, point2, debugLineWidth, color, vec2(), 0, false, false, overlayContext);
+            drawLine(point1, point2, debugLineWidth, color, vec2(), 0, false);
         };
         debugDraw.DrawPolygon = function(vertices, vertexCount, color)
         {
             color = getDebugColor(color);
             const points = getPointsList(vertices, vertexCount);
-            drawPoly(points, CLEAR_WHITE, debugLineWidth, color, vec2(), 0, false, false, overlayContext);
+            drawPoly(points, CLEAR_WHITE, debugLineWidth, color, vec2(), 0, false);
         };
         debugDraw.DrawSolidPolygon = function(vertices, vertexCount, color)
         {
             color = getDebugColor(color);
             const points = getPointsList(vertices, vertexCount);
-            drawPoly(points, color, 0, color, vec2(), 0, false, false, overlayContext);
+            drawPoly(points, color, 0, color, vec2(), 0, false);
         };
         debugDraw.DrawCircle = function(center, radius, color)
         {
             color = getDebugColor(color);
             center = box2d.vec2FromPointer(center);
-            drawCircle(center, radius*2, CLEAR_WHITE, debugLineWidth, color, false, false, overlayContext);
+            drawCircle(center, radius*2, CLEAR_WHITE, debugLineWidth, color, false);
         };
         debugDraw.DrawSolidCircle = function(center, radius, axis, color)
         {
             color = getDebugColor(color);
             center = box2d.vec2FromPointer(center);
             axis = box2d.vec2FromPointer(axis).scale(radius);
-            drawCircle(center, radius*2, color, debugLineWidth, color, false, false, overlayContext);
-            drawLine(vec2(), axis, debugLineWidth, color, center, 0, false, false, overlayContext);
+            drawCircle(center, radius*2, color, debugLineWidth, color, false);
+            drawLine(vec2(), axis, debugLineWidth, color, center, 0, false);
         };
         debugDraw.DrawTransform = function(transform)
         {
@@ -12205,8 +12205,8 @@ async function box2dInit()
             const angle = -transform.get_q().GetAngle();
             const p1 = vec2(1,0), c1 = rgb(.75,0,0,.8);
             const p2 = vec2(0,1), c2 = rgb(0,.75,0,.8);
-            drawLine(vec2(), p1, debugLineWidth, c1, pos, angle, false, false, overlayContext);
-            drawLine(vec2(), p2, debugLineWidth, c2, pos, angle, false, false, overlayContext);
+            drawLine(vec2(), p1, debugLineWidth, c1, pos, angle, false);
+            drawLine(vec2(), p2, debugLineWidth, c2, pos, angle, false);
         }
             
         debugDraw.AppendFlags(box2d.instance.b2Draw.e_shapeBit);
@@ -12226,8 +12226,8 @@ async function box2dInit()
 
 ///////////////////////////////////////////////////////////////////////////////
 
-/** Draw a scalable nine-slice UI element to the overlay canvas in screen space
- *  This function can not apply color because it draws using the overlay 2d context
+/** Draw a scalable nine-slice UI element to the main canvas in screen space
+ *  This function can not apply color because it draws using the 2d context
  *  @param {Vector2} pos - Screen space position
  *  @param {Vector2} size - Screen space size
  *  @param {TileInfo} startTile - Starting tile for the nine-slice pattern
@@ -12237,7 +12237,7 @@ async function box2dInit()
  *  @memberof DrawUtilities */
 function drawNineSliceScreen(pos, size, startTile, borderSize=32, extraSpace=2, angle=0)
 {
-    drawNineSlice(pos, size, startTile, WHITE, borderSize, BLACK, extraSpace, angle, false, true, overlayContext);
+    drawNineSlice(pos, size, startTile, WHITE, borderSize, BLACK, extraSpace, angle, false, true);
 }
 
 /** Draw a scalable nine-slice UI element in world space
@@ -12286,8 +12286,8 @@ function drawNineSlice(pos, size, startTile, color, borderSize=1, additiveColor,
     }
 }
 
-/** Draw a scalable three-slice UI element to the overlay canvas in screen space
- *  This function can not apply color because it draws using the overlay 2d context
+/** Draw a scalable three-slice UI element to the main canvas in screen space
+ *  This function can not apply color because it draws using the 2d context
  *  @param {Vector2} pos - Screen space position
  *  @param {Vector2} size - Screen space size
  *  @param {TileInfo} startTile - Starting tile for the three-slice pattern
@@ -12297,7 +12297,7 @@ function drawNineSlice(pos, size, startTile, color, borderSize=1, additiveColor,
  *  @memberof DrawUtilities */
 function drawThreeSliceScreen(pos, size, startTile, borderSize=32, extraSpace=2, angle=0)
 {
-    drawThreeSlice(pos, size, startTile, WHITE, borderSize, BLACK, extraSpace, angle, false, true, overlayContext);
+    drawThreeSlice(pos, size, startTile, WHITE, borderSize, BLACK, extraSpace, angle, false, true);
 }
 
 /** Draw a scalable three-slice UI element in world space
@@ -12377,7 +12377,7 @@ export
 	// Globals
 	debug,
 	debugOverlay,
-	showWatermark,
+	debugWatermark,
 
 	// Debug
 	ASSERT,
@@ -12391,13 +12391,10 @@ export
 	debugText,
 	debugClear,
 	debugScreenshot,
-	debugSaveCanvas,
-	debugSaveText,
-	debugSaveDataURL,
 	debugShowErrors,
-	debugVideoCaptureIsActive,
 	debugVideoCaptureStart,
 	debugVideoCaptureStop,
+	debugVideoCaptureIsActive,
 
 	// Settings
 	cameraPos,
@@ -12410,13 +12407,13 @@ export
 	canvasMaxAspect,
 	canvasFixedSize,
 	canvasPixelated,
-	overlayCanvasPixelated,
 	tilesPixelated,
 	fontDefault,
 	showSplashScreen,
 	headlessMode,
-	tileSizeDefault,
-	tileFixBleedScale,
+	tileDefaultSize,
+	tileDefaultPadding,
+	tileDefaultBleed,
 	enablePhysicsSolver,
 	objectDefaultMass,
 	objectDefaultDamping,
@@ -12455,14 +12452,14 @@ export
 	setCanvasMaxAspect,
 	setCanvasFixedSize,
 	setCanvasPixelated,
-	setOverlayCanvasPixelated,
 	setTilesPixelated,
 	setFontDefault,
 	setShowSplashScreen,
 	setHeadlessMode,
 	setGLEnable,
-	setTileSizeDefault,
-	setTileFixBleedScale,
+	setTileDefaultSize,
+	setTileDefaultPadding,
+	setTileDefaultBleed,
 	setEnablePhysicsSolver,
 	setObjectDefaultMass,
 	setObjectDefaultDamping,
@@ -12491,10 +12488,10 @@ export
 	setMedalDisplaySlideTime,
 	setMedalDisplaySize,
 	setMedalsPreventUnlock,
-	setShowWatermark,
+	setDebugWatermark,
 	setDebugKey,
 
-	// Utilities
+	// Math
 	PI,
 	abs,
 	floor,
@@ -12522,8 +12519,13 @@ export
 	isOverlapping,
 	isIntersecting,
 	wave,
+
+	// Utilities
 	formatTime,
 	fetchJSON,
+	saveText,
+	saveCanvas,
+	saveDataURL,
 
 	// Random
 	rand,
@@ -12569,10 +12571,11 @@ export
 	TextureInfo,
 	mainCanvas,
 	mainContext,
-	drawCanvas,
 	drawContext,
-	overlayCanvas,
-	overlayContext,
+	workCanvas,
+	workContext,
+	workReadCanvas,
+	workReadContext,
 	mainCanvasSize,
 	textureInfos,
 	drawCount,
@@ -12580,6 +12583,7 @@ export
 	worldToScreen,
 	screenToWorldDelta,
 	worldToScreenDelta,
+	screenToWorldTransform,
 	drawTile,
 	drawRect,
 	drawRectGradient,
@@ -12590,7 +12594,6 @@ export
 	drawCircle,
 	drawCanvas2D,
 	drawText,
-	drawTextOverlay,
 	drawTextScreen,
 	setBlendMode,
 	combineCanvases,