littlejsengine 1.13.1 → 1.13.4

package/dist/littlejs.release.js

@@ -33,7 +33,7 @@ const engineName = 'LittleJS';
  *  @type {string}
  *  @default
  *  @memberof Engine */
-const engineVersion = '1.13.1';
+const engineVersion = '1.13.4';
 
 /** Frames per second to update
  *  @type {number}
@@ -300,7 +300,6 @@ async function engineInit(gameInit, gameUpdate, gameUpdatePost, gameRender, game
         'margin:0;' +                 // fill the window
         'overflow:hidden;' +          // no scroll bars
         'background:#000;' +          // set background color
-        (canvasPixelated ? 'image-rendering:pixelated;' : '') + // pixel art
         'user-select:none;' +         // prevent hold to select
         '-webkit-user-select:none;' + // compatibility for ios
         (!touchInputEnable ? '' :     // no touch css settings
@@ -328,7 +327,13 @@ async function engineInit(gameInit, gameUpdate, gameUpdatePost, gameRender, game
     mainCanvas.style.cssText = overlayCanvas.style.cssText = styleCanvas;
     if (glCanvas)
         glCanvas.style.cssText = styleCanvas;
+    setCanvasPixelated(canvasPixelated);
+    setOverlayCanvasPixelated(overlayCanvasPixelated);
     updateCanvas();
+
+    // create offscreen canvas for image processing
+    workCanvas = new OffscreenCanvas(256, 256);
+    workContext = workCanvas.getContext('2d', { willReadFrequently: true });
     
     // create promises for loading images
     const promises = imageSources.map((src, textureIndex)=>
@@ -817,11 +822,12 @@ function isPowerOfTwo(value) { return !(value & (value - 1)); }
  *  @memberof Utilities */
 function nearestPowerOfTwo(value) { return 2**Math.ceil(Math.log2(value)); }
 
-/** Returns true if two axis aligned bounding boxes are overlapping 
+/** Returns true if two axis aligned bounding boxes are overlapping
+ *  this can be used for simple collision detection between objects
  *  @param {Vector2} posA          - Center of box A
  *  @param {Vector2} sizeA         - Size of box A
  *  @param {Vector2} posB          - Center of box B
- *  @param {Vector2} [sizeB=(0,0)] - Size of box B, a point if undefined
+ *  @param {Vector2} [sizeB=(0,0)] - Size of box B, uses a point if undefined
  *  @return {boolean}              - True if overlapping
  *  @memberof Utilities */
 function isOverlapping(posA, sizeA, posB, sizeB=vec2())
@@ -875,10 +881,11 @@ function isIntersecting(start, end, pos, size)
  *  @param {number} [frequency] - Frequency of the wave in Hz
  *  @param {number} [amplitude] - Amplitude (max height) of the wave
  *  @param {number} [t=time]    - Value to use for time of the wave
+ *  @param {number} [offset]    - Value to use for time offset of the wave
  *  @return {number}            - Value waving between 0 and amplitude
  *  @memberof Utilities */
-function wave(frequency=1, amplitude=1, t=time)
-{ return amplitude/2 * (1 - Math.cos(t*frequency*2*PI)); }
+function wave(frequency=1, amplitude=1, t=time, offset=0)
+{ return amplitude/2 * (1 - Math.cos(offset + t*frequency*2*PI)); }
 
 /** Formats seconds to mm:ss style for display purposes 
  *  @param {number} t - time in seconds
@@ -1535,9 +1542,7 @@ class Color
     /** Checks if this is a valid color
      * @return {boolean} */
     isValid()
-    { 
-        return isNumber(this.r) && isNumber(this.g) && isNumber(this.b) && isNumber(this.a);
-    }
+    { return isNumber(this.r) && isNumber(this.g) && isNumber(this.b) && isNumber(this.a); }
 }
 
 ///////////////////////////////////////////////////////////////////////////////
@@ -1700,6 +1705,13 @@ let cameraScale = 32;
 ///////////////////////////////////////////////////////////////////////////////
 // Display settings
 
+/** Enable applying color to tiles when using canvas2d
+ *  - This is slower but should be the same as webgl rendering
+ *  @type {boolean}
+ *  @default
+ *  @memberof Settings */
+let canvasColorTiles = true;
+
 /** The max size of the canvas, centered if window is larger
  *  @type {Vector2}
  *  @default Vector2(1920,1080)
@@ -1713,14 +1725,21 @@ let canvasMaxSize = vec2(1920, 1080);
  *  @memberof Settings */
 let canvasFixedSize = vec2();
 
-/** Use nearest neighbor canvas scaling for more pixelated look
- *  - Must be set before startup to take effect
+/** Use nearest canvas scaling for more pixelated look
  *  - If enabled sets css image-rendering:pixelated
  *  @type {boolean}
  *  @default
  *  @memberof Settings */
 let canvasPixelated = true;
 
+/** Use nearest canvas scaling for more pixelated look
+ *  - If enabled sets css image-rendering:pixelated
+ *  - This defaults to false because text looks better with smoothing
+ *  @type {boolean}
+ *  @default
+ *  @memberof Settings */
+let overlayCanvasPixelated = false;
+
 /** Disables texture filtering for crisper pixel art
  *  @type {boolean}
  *  @default
@@ -1961,6 +1980,14 @@ function setCameraAngle(angle) { cameraAngle = angle; }
  *  @memberof Settings */
 function setCameraScale(scale) { cameraScale = scale; }
 
+/** Set if tiles should be colorized when using canvas2d
+ *  This can be slower but results should look nearly identical to webgl rendering
+ *  It can be enabled/disabled at any time
+ *  Optimized for performance, and will use faster method if color is white or untextured
+ *  @param {boolean} colorTiles
+ *  @memberof Settings */
+function setCanvasColorTiles(colorTiles) { canvasColorTiles = colorTiles; }
+
 /** Set max size of the canvas
  *  @param {Vector2} size
  *  @memberof Settings */
@@ -1971,10 +1998,30 @@ function setCanvasMaxSize(size) { canvasMaxSize = size; }
  *  @memberof Settings */
 function setCanvasFixedSize(size) { canvasFixedSize = size; }
 
-/** Use nearest neighbor scaling algorithm for canvas for more pixelated look
+/** Use nearest scaling algorithm for canvas for more pixelated look
+ *  - If enabled sets css image-rendering:pixelated
+ *  @param {boolean} pixelated
+ *  @memberof Settings */
+function setCanvasPixelated(pixelated)
+{
+    canvasPixelated = pixelated;
+    if (mainCanvas)
+        mainCanvas.style.imageRendering = pixelated ? 'pixelated' : '';
+    if (glCanvas)
+        glCanvas.style.imageRendering = pixelated ? 'pixelated' : '';
+}
+
+/** Use nearest scaling algorithm for canvas for more pixelated look
+ *  - If enabled sets css image-rendering:pixelated
+ *  - This defaults to false because text looks better with smoothing
  *  @param {boolean} pixelated
  *  @memberof Settings */
-function setCanvasPixelated(pixelated) { canvasPixelated = pixelated; }
+function setOverlayCanvasPixelated(pixelated)
+{ 
+    overlayCanvasPixelated = pixelated; 
+    if (overlayCanvas)
+        overlayCanvas.style.imageRendering = pixelated ? 'pixelated' : '';
+}
 
 /** Disables texture filtering for crisper pixel art
  *  @param {boolean} pixelated
@@ -1999,7 +2046,12 @@ function setHeadlessMode(headless) { headlessMode = headless; }
 /** Set if webgl rendering is enabled
  *  @param {boolean} enable
  *  @memberof Settings */
-function setGLEnable(enable) { glEnable = enable; }
+function setGLEnable(enable)
+{
+    glEnable = enable;
+    if (glCanvas) // hide glCanvas if webgl is disabled
+        glCanvas.style.visibility = enable ? 'visible' : 'hidden';
+}
 
 /** Set default size of tiles in pixels
  *  @param {Vector2} size
@@ -2363,7 +2415,7 @@ class EngineObject
                     if (o.mass) // push away if not fixed
                         o.velocity = o.velocity.subtract(velocity);
                         
-                    debugOverlay && debugPhysics && debugOverlap(this.pos, this.size, o.pos, o.size, '#f00');
+                    debugPhysics && debugOverlap(this.pos, this.size, o.pos, o.size, '#f00');
                     continue;
                 }
 
@@ -2425,7 +2477,7 @@ class EngineObject
                     else // bounce if other object is fixed
                         this.velocity.x *= -restitution;
                 }
-                debugOverlay && debugPhysics && debugOverlap(this.pos, this.size, o.pos, o.size, '#f0f');
+                debugPhysics && debugOverlap(this.pos, this.size, o.pos, o.size, '#f0f');
             }
         }
         if (this.collideTiles)
@@ -2470,7 +2522,7 @@ class EngineObject
                         this.pos.x = oldPos.x;
                         this.velocity.x *= -this.restitution;
                     }
-                    debugOverlay && debugPhysics && debugRect(this.pos, this.size, '#f00');
+                    debugPhysics && debugRect(this.pos, this.size, '#f00');
                 }
             }
         }
@@ -2672,6 +2724,16 @@ let drawCanvas;
  *  @memberof Draw */
 let drawContext;
 
+/** Offscreen canvas that can be used for image processing
+ *  @type {OffscreenCanvas}
+ *  @memberof Draw */
+let workCanvas;
+
+/** Offscreen canvas that can be used for image processing
+ *  @type {OffscreenCanvasRenderingContext2D}
+ *  @memberof Draw */
+let workContext;
+
 /** The size of the main canvas (and other secondary canvases) 
  *  @type {Vector2}
  *  @memberof Draw */
@@ -2691,10 +2753,10 @@ let drawCount;
  * Create a tile info object using a grid based system
  * - This can take vecs or floats for easier use and conversion
  * - If an index is passed in, the tile size and index will determine the position
- * @param {Vector2|number} [pos=0]                - Index of tile in sheet
+ * @param {Vector2|number} [pos=0] - Index of tile in sheet
  * @param {Vector2|number} [size=tileSizeDefault] - Size of tile in pixels
- * @param {number} [textureIndex]                   - Texture index to use
- * @param {number} [padding]                        - How many pixels padding around tiles
+ * @param {number} [textureIndex] - Texture index to use
+ * @param {number} [padding] - How many pixels padding around tiles
  * @return {TileInfo}
  * @example
  * tile(2)                       // a tile at index 2 using the default tile size of 16
@@ -2821,55 +2883,7 @@ class TextureInfo
 }
 
 ///////////////////////////////////////////////////////////////////////////////
-
-/** Convert from screen to world space coordinates
- *  @param {Vector2} screenPos
- *  @return {Vector2}
- *  @memberof Draw */
-function screenToWorld(screenPos)
-{
-    let cameraPosRelativeX = (screenPos.x - mainCanvasSize.x/2 + .5) /  cameraScale;
-    let cameraPosRelativeY = (screenPos.y - mainCanvasSize.y/2 + .5) / -cameraScale;
-    if (cameraAngle) 
-    {
-        // apply camera rotation
-        const cos = Math.cos(-cameraAngle), sin = Math.sin(-cameraAngle);
-        const rotatedX = cameraPosRelativeX * cos - cameraPosRelativeY * sin;
-        const rotatedY = cameraPosRelativeX * sin + cameraPosRelativeY * cos;
-        cameraPosRelativeX = rotatedX;
-        cameraPosRelativeY = rotatedY;
-    }
-    return new Vector2(cameraPosRelativeX + cameraPos.x, cameraPosRelativeY + cameraPos.y);
-}
-
-/** Convert from world to screen space coordinates
- *  @param {Vector2} worldPos
- *  @return {Vector2}
- *  @memberof Draw */
-function worldToScreen(worldPos)
-{
-    let cameraPosRelativeX = worldPos.x - cameraPos.x;
-    let cameraPosRelativeY = worldPos.y - cameraPos.y;
-    if (cameraAngle)
-    {
-        // apply inverse camera rotation
-        const cos = Math.cos(cameraAngle), sin = Math.sin(cameraAngle);
-        const rotatedX = cameraPosRelativeX * cos - cameraPosRelativeY * sin;
-        const rotatedY = cameraPosRelativeX * sin + cameraPosRelativeY * cos;
-        cameraPosRelativeX = rotatedX;
-        cameraPosRelativeY = rotatedY;
-    }
-    return new Vector2
-    (
-        cameraPosRelativeX *  cameraScale + mainCanvasSize.x/2 - .5,
-        cameraPosRelativeY * -cameraScale + mainCanvasSize.y/2 - .5
-    );
-}
-
-/** Get the camera's visible area in world space
- *  @return {Vector2}
- *  @memberof Draw */
-function getCameraSize() { return mainCanvasSize.scale(1/cameraScale); }
+// Drawing functions
 
 /** Draw textured tile centered in world space, with color applied if using WebGL
  *  @param {Vector2} pos                        - Center of the tile in world space
@@ -2892,6 +2906,9 @@ function drawTile(pos, size=new Vector2(1), tileInfo, color=new Color,
     ASSERT(isColor(color) && (!additiveColor || isColor(additiveColor)), 'drawTile color is invalid');
     ASSERT(isNumber(angle), 'drawTile angle should be a number');
 
+    if (color.a <= 0 && (!additiveColor || additiveColor.a <= 0) || !size.x || !size.y)
+        return; // completely invisible, skip render
+
     const textureInfo = tileInfo && tileInfo.textureInfo;
     if (useWebGL)
     {
@@ -2942,18 +2959,15 @@ function drawTile(pos, size=new Vector2(1), tileInfo, color=new Color,
             if (textureInfo)
             {
                 // calculate uvs and render
-                const x = tileInfo.pos.x + tileFixBleedScale;
-                const y = tileInfo.pos.y + tileFixBleedScale;
-                const w = tileInfo.size.x - 2*tileFixBleedScale;
-                const h = tileInfo.size.y - 2*tileFixBleedScale;
-                context.globalAlpha = color.a; // only alpha is supported
-                context.drawImage(textureInfo.image, x, y, w, h, -.5, -.5, 1, 1);
-                context.globalAlpha = 1; // set back to full alpha
+                const x = tileInfo.pos.x,  y = tileInfo.pos.y;
+                const w = tileInfo.size.x, h = tileInfo.size.y;
+                drawImageColor(context, textureInfo.image, x, y, w, h, -.5, -.5, 1, 1, color, additiveColor);
             }
             else
             {
-                // if no tile info, force untextured
-                context.fillStyle = color.toString();
+                // if no tile info, use untextured rect
+                const c = additiveColor ? color.add(additiveColor) : color;
+                context.fillStyle = c.toString();
                 context.fillRect(-.5, -.5, 1, 1);
             }
         }, screenSpace, context);
@@ -2966,7 +2980,7 @@ function drawTile(pos, size=new Vector2(1), tileInfo, color=new Color,
  *  @param {Color}   [color=(1,1,1,1)]
  *  @param {number}  [angle]
  *  @param {boolean} [useWebGL=glEnable]
- *  @param {boolean} [screenSpace=false]
+ *  @param {boolean} [screenSpace]
  *  @param {CanvasRenderingContext2D|OffscreenCanvasRenderingContext2D} [context]
  *  @memberof Draw */
 function drawRect(pos, size, color, angle, useWebGL, screenSpace, context)
@@ -2979,73 +2993,90 @@ function drawRect(pos, size, color, angle, useWebGL, screenSpace, context)
  *  @param {Vector2} posB
  *  @param {number}  [thickness]
  *  @param {Color}   [color=(1,1,1,1)]
+ *  @param {Vector2} [pos=(0,0)] - Offset to apply
+ *  @param {number}  [angle] - Angle to rotate by
  *  @param {boolean} [useWebGL=glEnable]
- *  @param {boolean} [screenSpace=false]
+ *  @param {boolean} [screenSpace]
  *  @param {CanvasRenderingContext2D|OffscreenCanvasRenderingContext2D} [context]
  *  @memberof Draw */
-function drawLine(posA, posB, thickness=.1, color, useWebGL, screenSpace, context)
+function drawLine(posA, posB, thickness=.1, color, pos=vec2(), angle=0, useWebGL, screenSpace, context)
 {
     const halfDelta = vec2((posB.x - posA.x)/2, (posB.y - posA.y)/2);
     const size = vec2(thickness, halfDelta.length()*2);
-    drawRect(posA.add(halfDelta), size, color, halfDelta.angle(), useWebGL, screenSpace, context);
+    pos = pos.add(posA.add(halfDelta));
+    angle += halfDelta.angle();
+    drawRect(pos, size, color, angle, useWebGL, screenSpace, context);
 }
 
 /** Draw colored polygon using passed in points
- *  @param {Array<Vector2>}   points - Array of Vector2 points
+ *  @param {Array<Vector2>} points - Array of Vector2 points
  *  @param {Color}   [color=(1,1,1,1)]
- *  @param {number}  [lineWidth=0]
+ *  @param {number}  [lineWidth]
  *  @param {Color}   [lineColor=(0,0,0,1)]
- *  @param {boolean} [screenSpace=false]
+ *  @param {Vector2} [pos=(0,0)] - Offset to apply
+ *  @param {number}  [angle] - Angle to rotate by
+ *  @param {boolean} [useWebGL] - Webgl not supported
+ *  @param {boolean} [screenSpace]
  *  @param {CanvasRenderingContext2D|OffscreenCanvasRenderingContext2D} [context=drawContext]
  *  @memberof Draw */
-function drawPoly(points, color=new Color, lineWidth=0, lineColor=new Color(0,0,0), screenSpace, context=drawContext)
+function drawPoly(points, color=new Color, lineWidth=0, lineColor=BLACK, pos=vec2(), angle=0, useWebGL=false, screenSpace=false, context=drawContext)
 {
-    ASSERT(isColor(color) && isColor(lineColor));
-    context.fillStyle = color.toString();
-    context.beginPath();
-    for (const point of screenSpace ? points : points.map(worldToScreen))
-        context.lineTo(point.x, point.y);
-    context.closePath();
-    context.fill();
-    if (lineWidth)
+    ASSERT(isVector2(pos) && pos.isValid(), 'drawPoly pos should be a vec2');
+    ASSERT(Array.isArray(points), 'drawPoly points should be an array');
+    ASSERT(isColor(color) && isColor(lineColor), 'drawPoly color is invalid');
+    ASSERT(isNumber(lineWidth), 'drawPoly lineWidth should be a number');
+    ASSERT(isNumber(angle), 'drawPoly angle should be a number');
+    ASSERT(!useWebGL, 'drawPoly webgl not supported');
+    drawCanvas2D(pos, vec2(1), angle, false, context=>
     {
-        context.strokeStyle = lineColor.toString();
-        context.lineWidth = screenSpace ? lineWidth : lineWidth*cameraScale;
-        context.stroke();
-    }
+        context.beginPath();
+        for (const point of points)
+            context.lineTo(point.x, point.y);
+        context.closePath();
+        context.fillStyle = color.toString();
+        context.fill();
+        if (lineWidth)
+        {
+            context.strokeStyle = lineColor.toString();
+            context.lineWidth = lineWidth;
+            context.stroke();
+        }
+    }, screenSpace, context);
 }
 
 /** Draw colored ellipse using passed in point
  *  @param {Vector2} pos
- *  @param {number}  [width=1]
- *  @param {number}  [height=1]
- *  @param {number}  [angle=0]
+ *  @param {Vector2} [size=(1,1)]
  *  @param {Color}   [color=(1,1,1,1)]
- *  @param {number}  [lineWidth=0]
+ *  @param {number}  [angle]
+ *  @param {number}  [lineWidth]
  *  @param {Color}   [lineColor=(0,0,0,1)]
- *  @param {boolean} [screenSpace=false]
+ *  @param {boolean} [useWebGL] - Webgl not supported
+ *  @param {boolean} [screenSpace]
  *  @param {CanvasRenderingContext2D|OffscreenCanvasRenderingContext2D} [context=drawContext]
  *  @memberof Draw */
-function drawEllipse(pos, width=1, height=1, angle=0, color=new Color, lineWidth=0, lineColor=new Color(0,0,0), screenSpace, context=drawContext)
+function drawEllipse(pos, size=vec2(1), color=new Color, angle=0, lineWidth=0, lineColor=BLACK, useWebGL=false, screenSpace=false, context=drawContext)
 {
-    ASSERT(isColor(color) && isColor(lineColor));
-    if (!screenSpace)
-    {
-        pos = worldToScreen(pos);
-        width *= cameraScale;
-        height *= cameraScale;
-        lineWidth *= cameraScale;
-    }
-    context.fillStyle = color.toString();
-    context.beginPath();
-    context.ellipse(pos.x, pos.y, width, height, angle, 0, 9);
-    context.fill();
-    if (lineWidth)
+    ASSERT(isVector2(pos) && pos.isValid(), 'drawEllipse pos should be a vec2');
+    ASSERT(isVector2(size) && size.isValid(), 'drawEllipse size should be a vec2');
+    ASSERT(isColor(color) && isColor(lineColor), 'drawEllipse color is invalid');
+    ASSERT(isNumber(angle), 'drawEllipse angle should be a number');
+    ASSERT(isNumber(lineWidth), 'drawEllipse lineWidth should be a number');
+    ASSERT(lineWidth>=0 && lineWidth < size.x && lineWidth < size.y, 'drawEllipse invalid lineWidth');
+    ASSERT(!useWebGL, 'drawEllipse webgl not supported');
+    drawCanvas2D(pos, vec2(1), angle, false, context=>
     {
-        context.strokeStyle = lineColor.toString();
-        context.lineWidth = lineWidth;
-        context.stroke();
-    }
+        context.beginPath();
+        context.ellipse(0, 0, size.y, size.x, 0, 0, 9);
+        context.fillStyle = color.toString();
+        context.fill();
+        if (lineWidth)
+        {
+            context.strokeStyle = lineColor.toString();
+            context.lineWidth = lineWidth;
+            context.stroke();   
+        }
+    }, screenSpace, context);
 }
 
 /** Draw colored circle using passed in point
@@ -3054,11 +3085,12 @@ function drawEllipse(pos, width=1, height=1, angle=0, color=new Color, lineWidth
  *  @param {Color}   [color=(1,1,1,1)]
  *  @param {number}  [lineWidth=0]
  *  @param {Color}   [lineColor=(0,0,0,1)]
+ *  @param {boolean} [useWebGL] - Webgl not supported
  *  @param {boolean} [screenSpace=false]
  *  @param {CanvasRenderingContext2D|OffscreenCanvasRenderingContext2D} [context=drawContext]
  *  @memberof Draw */
-function drawCircle(pos, radius=1, color=new Color, lineWidth=0, lineColor=new Color(0,0,0), screenSpace, context=drawContext)
-{ drawEllipse(pos, radius, radius, 0, color, lineWidth, lineColor, screenSpace, context); }
+function drawCircle(pos, radius=1, color=new Color, lineWidth=0, lineColor=BLACK, useWebGL=false, screenSpace, context=drawContext)
+{ drawEllipse(pos, vec2(radius), color, 0, lineWidth, lineColor, useWebGL, screenSpace, context); }
 
 /** Draw directly to a 2d canvas context in world space
  *  @param {Vector2}  pos
@@ -3085,6 +3117,9 @@ function drawCanvas2D(pos, size, angle=0, mirror=false, drawFunction, screenSpac
     context.restore();
 }
 
+///////////////////////////////////////////////////////////////////////////////
+// Text Drawing Functions
+
 /** Draw text on main canvas in world space
  *  Automatically splits new lines into rows
  *  @param {string}  text
@@ -3133,7 +3168,7 @@ function drawTextOverlay(text, pos, size=1, color, lineWidth=0, lineColor, textA
  *  @param {number}  [maxWidth]
  *  @param {CanvasRenderingContext2D|OffscreenCanvasRenderingContext2D} [context=overlayContext]
  *  @memberof Draw */
-function drawTextScreen(text, pos, size=1, color=new Color, lineWidth=0, lineColor=new Color(0,0,0), textAlign='center', font=fontDefault, maxWidth=undefined, context=overlayContext)
+function drawTextScreen(text, pos, size=1, color=new Color, lineWidth=0, lineColor=BLACK, textAlign='center', font=fontDefault, maxWidth=undefined, context=overlayContext)
 {
     context.fillStyle = color.toString();
     context.strokeStyle = lineColor.toString();
@@ -3154,22 +3189,67 @@ function drawTextScreen(text, pos, size=1, color=new Color, lineWidth=0, lineCol
     });
 }
 
+///////////////////////////////////////////////////////////////////////////////
+// Drawing utilities
+
+/** Convert from screen to world space coordinates
+ *  @param {Vector2} screenPos
+ *  @return {Vector2}
+ *  @memberof Draw */
+function screenToWorld(screenPos)
+{
+    let cameraPosRelativeX = (screenPos.x - mainCanvasSize.x/2 + .5) /  cameraScale;
+    let cameraPosRelativeY = (screenPos.y - mainCanvasSize.y/2 + .5) / -cameraScale;
+    if (cameraAngle) 
+    {
+        // apply camera rotation
+        const cos = Math.cos(-cameraAngle), sin = Math.sin(-cameraAngle);
+        const rotatedX = cameraPosRelativeX * cos - cameraPosRelativeY * sin;
+        const rotatedY = cameraPosRelativeX * sin + cameraPosRelativeY * cos;
+        cameraPosRelativeX = rotatedX;
+        cameraPosRelativeY = rotatedY;
+    }
+    return new Vector2(cameraPosRelativeX + cameraPos.x, cameraPosRelativeY + cameraPos.y);
+}
+
+/** Convert from world to screen space coordinates
+ *  @param {Vector2} worldPos
+ *  @return {Vector2}
+ *  @memberof Draw */
+function worldToScreen(worldPos)
+{
+    let cameraPosRelativeX = worldPos.x - cameraPos.x;
+    let cameraPosRelativeY = worldPos.y - cameraPos.y;
+    if (cameraAngle)
+    {
+        // apply inverse camera rotation
+        const cos = Math.cos(cameraAngle), sin = Math.sin(cameraAngle);
+        const rotatedX = cameraPosRelativeX * cos - cameraPosRelativeY * sin;
+        const rotatedY = cameraPosRelativeX * sin + cameraPosRelativeY * cos;
+        cameraPosRelativeX = rotatedX;
+        cameraPosRelativeY = rotatedY;
+    }
+    return new Vector2
+    (
+        cameraPosRelativeX *  cameraScale + mainCanvasSize.x/2 - .5,
+        cameraPosRelativeY * -cameraScale + mainCanvasSize.y/2 - .5
+    );
+}
+
+/** Get the camera's visible area in world space
+ *  @return {Vector2}
+ *  @memberof Draw */
+function getCameraSize() { return mainCanvasSize.scale(1/cameraScale); }
+
 /** Enable normal or additive blend mode
  *  @param {boolean} [additive]
- *  @param {boolean} [useWebGL=glEnable]
  *  @param {CanvasRenderingContext2D|OffscreenCanvasRenderingContext2D} [context]
  *  @memberof Draw */
-function setBlendMode(additive=false, useWebGL=glEnable, context)
+function setBlendMode(additive=false, context)
 {
-    ASSERT(!context || !useWebGL, 'context only supported in canvas 2D mode');
-    if (useWebGL)
-        glAdditive = additive;
-    else
-    {
-        if (!context)
-            context = drawContext;
-        context.globalCompositeOperation = additive ? 'lighter' : 'source-over';
-    }
+    glAdditive = additive;
+    context ||= drawContext;
+    context.globalCompositeOperation = additive ? 'lighter' : 'source-over';
 }
 
 /** Combines all LittleJS canvases onto the main canvas and clears them
@@ -3186,6 +3266,102 @@ function combineCanvases()
     overlayCanvas.width |= 0;
 }
 
+/** Helper function to draw an image with color and additive color applied
+ *  This is slower then normal drawImage when color is applied
+    *  @param {CanvasRenderingContext2D|OffscreenCanvasRenderingContext2D} context
+    *  @param {HTMLImageElement|OffscreenCanvas} image
+    *  @param {number} sx
+    *  @param {number} sy
+    *  @param {number} sWidth
+    *  @param {number} sHeight
+    *  @param {number} dx
+    *  @param {number} dy
+    *  @param {number} dWidth
+    *  @param {number} dHeight
+    *  @param {Color} color
+    *  @param {Color} [additiveColor]
+ *  @memberof Draw */
+function drawImageColor(context, image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight, color, additiveColor)
+{
+    function isWhite(c) { return c.r >= 1 && c.g >= 1 && c.b >= 1; }
+    function isBlack(c) { return c.r <= 0 && c.g <= 0 && c.b <= 0 && c.a <= 0; }
+    const sx2 = tileFixBleedScale;
+    const sy2 = tileFixBleedScale;
+    const sWidth2  = sWidth  - 2*tileFixBleedScale;
+    const sHeight2 = sHeight - 2*tileFixBleedScale;
+    if (!canvasColorTiles || (additiveColor ? isWhite(color.add(additiveColor)) && additiveColor.a <= 0 : isWhite(color)))
+    {
+        // white texture with no additive alpha, no need to tint
+        context.globalAlpha = color.a;
+        context.drawImage(image, sx+sx2, sy+sy2, sWidth2, sHeight2, dx, dy, dWidth, dHeight); 
+        context.globalAlpha = 1;
+    }
+    else
+    {
+        // copy to offscreen canvas
+        workCanvas.width = sWidth;
+        workCanvas.height = sHeight;
+        workContext.drawImage(image, sx, sy, sWidth, sHeight, 0, 0, sWidth, sHeight);
+
+        // tint image using offscreen work context
+        const imageData = workContext.getImageData(0, 0, sWidth, sHeight);
+        const data = imageData.data;
+        if (additiveColor && !isBlack(additiveColor))
+        {
+            // slower path with additive color
+            const colorMultiply = [color.r, color.g, color.b, color.a];
+            const colorAdd = [additiveColor.r * 255, additiveColor.g * 255, additiveColor.b * 255, additiveColor.a * 255];
+            for (let i = 0; i < data.length; ++i)
+                data[i] = data[i] * colorMultiply[i&3] + colorAdd[i&3] |0;
+            workContext.putImageData(imageData, 0, 0);
+            context.drawImage(workCanvas, sx2, sy2, sWidth2, sHeight2, dx, dy, dWidth, dHeight); 
+        }
+        else
+        {
+            // faster path with no additive color
+            for (let i = 0; i < data.length; i+=4)
+            {
+                data[i  ] *= color.r;
+                data[i+1] *= color.g;
+                data[i+2] *= color.b;
+            }
+            workContext.putImageData(imageData, 0, 0);
+            context.globalAlpha = color.a;
+            context.drawImage(workCanvas, sx2, sy2, sWidth2, sHeight2, dx, dy, dWidth, dHeight); 
+            context.globalAlpha = 1;
+        }
+    }
+}
+
+
+/** Returns true if fullscreen mode is active
+ *  @return {boolean}
+ *  @memberof Draw */
+function isFullscreen() { return !!document.fullscreenElement; }
+
+/** Toggle fullscreen mode
+ *  @memberof Draw */
+function toggleFullscreen()
+{
+    const rootElement = mainCanvas.parentElement;
+    if (isFullscreen())
+    {
+        if (document.exitFullscreen)
+            document.exitFullscreen();
+    }
+    else if (rootElement.requestFullscreen)
+        rootElement.requestFullscreen();
+}
+
+/** Set the cursor style
+ *  @param {string}  cursorStyle - CSS cursor style (auto, none, crosshair, etc)
+ *  @memberof Draw */
+function setCursor(cursorStyle = 'auto')
+{
+    const rootElement = mainCanvas.parentElement;
+    rootElement.style.cursor = cursorStyle;
+}
+
 ///////////////////////////////////////////////////////////////////////////////
 
 let engineFontImage;
@@ -3253,7 +3429,7 @@ class FontImage
         (text+'').split('\n').forEach((line, i)=>
         {
             const centerOffset = center ? line.length * size.x * scale / 2 |0 : 0;
-            for(let j=line.length; j--;)
+            for (let j=line.length; j--;)
             {
                 // draw each character
                 let charCode = line[j].charCodeAt(0);
@@ -3272,37 +3448,6 @@ class FontImage
 
         context.restore();
     }
-}
-
-///////////////////////////////////////////////////////////////////////////////
-// Display functions
-
-/** Returns true if fullscreen mode is active
- *  @return {boolean}
- *  @memberof Draw */
-function isFullscreen() { return !!document.fullscreenElement; }
-
-/** Toggle fullscreen mode
- *  @memberof Draw */
-function toggleFullscreen()
-{
-    const rootElement = mainCanvas.parentElement;
-    if (isFullscreen())
-    {
-        if (document.exitFullscreen)
-            document.exitFullscreen();
-    }
-    else if (rootElement.requestFullscreen)
-        rootElement.requestFullscreen();
-}
-
-/** Set the cursor style
- *  @param {string}  cursorStyle - CSS cursor style (auto, none, crosshair, etc)
- *  @memberof Draw */
-function setCursor(cursorStyle = 'auto')
-{
-    const rootElement = mainCanvas.parentElement;
-    rootElement.style.cursor = cursorStyle;
 }
 /** 
  * LittleJS Input System
@@ -3854,7 +3999,7 @@ function touchGamepadRender()
     }
     else // draw cross shaped gamepad
     {
-        for(let i=10; i--;)
+        for (let i=10; i--;)
         {
             const angle = i*PI/4;
             context.arc(leftCenter.x, leftCenter.y,touchGamepadSize*.6, angle + PI/8, angle + PI/8);
@@ -3898,7 +4043,7 @@ function pointerLockExit() { document.exitPointerLock && document.exitPointerLoc
 /** Check if pointer is locked (true if locked)
  *  @return {boolean}
  *  @memberof Input */
-function pointerLockIsActive() { return document.pointerLockElement == mainCanvas }
+function pointerLockIsActive() { return document.pointerLockElement == mainCanvas; }
 /** 
  * LittleJS Audio System
  * - <a href=https://killedbyapixel.github.io/ZzFX/>ZzFX Sound Effects</a> - ZzFX Sound Effect Generator
@@ -4322,7 +4467,7 @@ function zzfxG
         repeatTime = repeatTime * sampleRate | 0;
 
     // generate waveform
-    for(length = attack + decay + sustain + release + delay | 0;
+    for (length = attack + decay + sustain + release + delay | 0;
         i < length; b[i++] = s * volume)                   // sample
     {
         if (!(++crush%(bitCrush*100|0)))                   // bit crush
@@ -5215,10 +5360,17 @@ class ParticleEmitter extends EngineObject
         const particle = new Particle(pos, this.tileInfo, angle, colorStart, colorEnd, particleTime, sizeStart, sizeEnd, this.fadeRate, this.additive,  this.trailScale, this.localSpace && this, this.particleDestroyCallback);
         particle.velocity      = vec2().setAngle(velocityAngle, speed);
         particle.angleVelocity = angleSpeed;
+        if (!this.localSpace)
+        {
+            // apply emitter velocity to particle
+            particle.velocity.x += this.velocity.x;
+            particle.velocity.y += this.velocity.y;
+            particle.angleVelocity += this.angleVelocity;
+        }
         particle.fadeRate      = this.fadeRate;
         particle.damping       = this.damping;
         particle.angleDamping  = this.angleDamping;
-        particle.restitution    = this.restitution;
+        particle.restitution   = this.restitution;
         particle.friction      = this.friction;
         particle.gravityScale  = this.gravityScale;
         particle.collideTiles  = this.collideTiles;
@@ -5505,7 +5657,7 @@ class Medal
         context.save();
         context.beginPath();
         context.fillStyle = new Color(.9,.9,.9).toString();
-        context.strokeStyle = new Color(0,0,0).toString();
+        context.strokeStyle = BLACK.toString();
         context.lineWidth = 3;
         context.rect(x, y, width, height);
         context.fill();
@@ -5522,11 +5674,11 @@ class Medal
         const descriptionSize = height*.3;
         const pos = vec2(x + medalDisplayIconSize + 2*gap.x, y + gap.y*2 + nameSize/2);
         const textWidth = width - medalDisplayIconSize - 3*gap.x;
-        drawTextScreen(this.name, pos, nameSize, new Color(0,0,0), 0, undefined, 'left', undefined, textWidth);
+        drawTextScreen(this.name, pos, nameSize, BLACK, 0, undefined, 'left', undefined, textWidth);
 
         // draw the description
         pos.y = y + height - gap.y*2 - descriptionSize/2;
-        drawTextScreen(this.description, pos, descriptionSize, new Color(0,0,0), 0, undefined, 'left', undefined, textWidth);
+        drawTextScreen(this.description, pos, descriptionSize, BLACK, 0, undefined, 'left', undefined, textWidth);
         context.restore();
     }
 
@@ -5540,7 +5692,7 @@ class Medal
         if (this.image)
             overlayContext.drawImage(this.image, pos.x-size/2, pos.y-size/2, size, size);
         else
-            drawTextScreen(this.icon, pos, size*.7, new Color(0,0,0));
+            drawTextScreen(this.icon, pos, size*.7, BLACK);
     }
  
     // Get local storage key used by the medal
@@ -5549,12 +5701,13 @@ class Medal
 /**
  * LittleJS WebGL Interface
  * - All webgl used by the engine is wrapped up here
+ * - Will fall back to 2D canvas rendering if webgl is not supported
  * - For normal stuff you won't need to see or call anything in this file
  * - For advanced stuff there are helper functions to create shaders, textures, etc
  * - Can be disabled with glEnable to revert to 2D canvas rendering
  * - Batches sprite rendering on GPU for incredibly fast performance
  * - Sprite transform math is done in the shader where possible
- * - Supports shadertoy style post processing shaders
+ * - Supports shadertoy style post processing shaders via plugin
  * @namespace WebGL
  */
 
@@ -5593,6 +5746,14 @@ function glInit()
     glCanvas = document.createElement('canvas');
     glContext = glCanvas.getContext('webgl2', {antialias:glAntialias});
 
+    if (!glContext)
+    {
+        console.warn('WebGL2 not supported, falling back to 2D canvas rendering!');
+        glCanvas = glContext = undefined;
+        glEnable = false;
+        return;
+    }
+
     // create the webgl canvas
     const rootElement = mainCanvas.parentElement;
     rootElement.appendChild(glCanvas);
@@ -5642,7 +5803,7 @@ function glInit()
 // Also used by tile layer rendering when redrawing tiles
 function glPreRender()
 {
-    if (!glEnable || headlessMode) return;
+    if (!glEnable || !glContext) return;
 
     // set up the shader and canvas
     glClearCanvas();
@@ -5693,6 +5854,8 @@ function glPreRender()
  *  @memberof WebGL */
 function glClearCanvas()
 {
+    if (!glContext) return;
+    
     // clear and set to same size as main canvas
     glContext.viewport(0, 0, glCanvas.width=drawCanvas.width, glCanvas.height=drawCanvas.height);
     glContext.clear(glContext.COLOR_BUFFER_BIT);
@@ -5706,7 +5869,7 @@ function glClearCanvas()
 function glSetTexture(texture, wrap=false)
 {
     // must flush cache with the old texture to set a new one
-    if (headlessMode || texture == glActiveTexture)
+    if (!glContext || texture == glActiveTexture)
         return;
 
     glFlush();
@@ -5725,6 +5888,8 @@ function glSetTexture(texture, wrap=false)
  *  @memberof WebGL */
 function glCompileShader(source, type)
 {
+    if (!glContext) return;
+
     // build the shader
     const shader = glContext.createShader(type);
     glContext.shaderSource(shader, source);
@@ -5743,6 +5908,8 @@ function glCompileShader(source, type)
  *  @memberof WebGL */
 function glCreateProgram(vsSource, fsSource)
 {
+    if (!glContext) return;
+
     // build the program
     const program = glContext.createProgram();
     glContext.attachShader(program, glCompileShader(vsSource, glContext.VERTEX_SHADER));
@@ -5761,6 +5928,8 @@ function glCreateProgram(vsSource, fsSource)
  *  @memberof WebGL */
 function glCreateTexture(image)
 {
+    if (!glContext) return;
+
     // build the texture
     const texture = glContext.createTexture();
     glContext.bindTexture(glContext.TEXTURE_2D, texture);
@@ -5796,6 +5965,7 @@ function glCreateTexture(image)
  *  @memberof WebGL */
 function glDeleteTexture(texture)
 {
+    if (!glContext) return;
     glContext.deleteTexture(texture);
 }
 
@@ -5805,6 +5975,8 @@ function glDeleteTexture(texture)
  *  @memberof WebGL */
 function glSetTextureData(texture, image)
 {
+    if (!glContext) return;
+
     // build the texture
     ASSERT(!!image && image.width > 0, 'Invalid image data.');
     glContext.bindTexture(glContext.TEXTURE_2D, texture);
@@ -5815,7 +5987,7 @@ function glSetTextureData(texture, image)
  *  @memberof WebGL */
 function glFlush()
 {
-    if (!glEnable || !glInstanceCount) return;
+    if (!glEnable || !glContext || !glInstanceCount) return;
 
     const destBlend = glBatchAdditive ? glContext.ONE : glContext.ONE_MINUS_SRC_ALPHA;
     glContext.blendFuncSeparate(glContext.SRC_ALPHA, destBlend, glContext.ONE, destBlend);
@@ -5835,7 +6007,7 @@ function glFlush()
  *  @memberof WebGL */
 function glCopyToContext(context)
 {
-    if (!glEnable)
+    if (!glEnable || !glContext)
         return;
 
     glFlush();
@@ -6090,6 +6262,13 @@ class PostProcessPlugin
         postProcess = this;
 
         if (headlessMode) return;
+
+        if (!glEnable)
+        {
+            console.warn('PostProcessPlugin: WebGL not enabled!');
+            return;
+        }
+
         if (!shaderCode) // default shader pass through
             shaderCode = 'void mainImage(out vec4 c,vec2 p){c=texture(iChannel0,p/iResolution.xy);}';
 
@@ -6399,7 +6578,7 @@ class UISystemPlugin
 
         function updateInvisible(o)
         {
-            for(const c of o.children)
+            for (const c of o.children)
                 updateInvisible(c);
             o.updateInvisible();
         }
@@ -6415,7 +6594,7 @@ class UISystemPlugin
                     if (o.parent)
                         o.pos = o.localPos.add(o.parent.pos);
                     // update in reverse order to detect mouse enter/leave
-                    for(let i=o.children.length; i--;)
+                    for (let i=o.children.length; i--;)
                         updateObject(o.children[i]);
                     o.update();
                 }
@@ -6433,7 +6612,7 @@ class UISystemPlugin
                 if (o.parent)
                     o.pos = o.localPos.add(o.parent.pos);
                 o.render();
-                for(const c of o.children)
+                for (const c of o.children)
                     renderObject(c);
             }
             uiSystem.uiObjects.forEach(o=> o.parent || renderObject(o));
@@ -6490,7 +6669,7 @@ class UISystemPlugin
     *  @param {boolean}  [mirror] */
     drawTile(pos, size, tileInfo, color=uiSystem.defaultColor, angle=0, mirror=false)
     {
-        drawTile(pos, size, tileInfo, color, angle, mirror, BLACK, false, true, uiSystem.uiContext);
+        drawTile(pos, size, tileInfo, color, angle, mirror, CLEAR_BLACK, false, true, uiSystem.uiContext);
     }
 
     /** Draw text to the UI context
@@ -6940,7 +7119,7 @@ class Box2dObject extends EngineObject
         bodyDef.set_angle(-angle);
         this.body = box2d.world.CreateBody(bodyDef);
         this.body.object = this;
-        this.outlineColor = BLACK;
+        this.lineColor = BLACK;
     }
 
     /** Destroy this object and it's physics body */
@@ -6967,7 +7146,7 @@ class Box2dObject extends EngineObject
         if (this.tileInfo)
             super.render();
         else
-            this.drawFixtures(this.color, this.outlineColor, this.lineWidth, mainContext);
+            this.drawFixtures(this.color, this.lineColor, this.lineWidth, mainContext);
     }
 
     /** Render debug info */
@@ -6981,13 +7160,13 @@ class Box2dObject extends EngineObject
 
     /** Draws all this object's fixtures 
      *  @param {Color}  [color]
-     *  @param {Color}  [outlineColor]
+     *  @param {Color}  [lineColor]
      *  @param {number} [lineWidth]
      *  @param {CanvasRenderingContext2D} [context] */
-    drawFixtures(color=WHITE, outlineColor, lineWidth=.1, context)
+    drawFixtures(color=WHITE, lineColor, lineWidth=.1, context)
     {
         this.getFixtureList().forEach(fixture=>
-            box2d.drawFixture(fixture, this.pos, this.angle, color, outlineColor, lineWidth, context));
+            box2d.drawFixture(fixture, this.pos, this.angle, color, lineColor, lineWidth, context));
     }
 
     ///////////////////////////////////////////////////////////////////////////////
@@ -8468,10 +8647,10 @@ class Box2dPlugin
      *  @param {Vector2} pos
      *  @param {number} angle
      *  @param {Color} [color]
-     *  @param {Color} [outlineColor]
+     *  @param {Color} [lineColor]
      *  @param {number} [lineWidth]
      *  @param {CanvasRenderingContext2D} [context] */
-    drawFixture(fixture, pos, angle, color=WHITE, outlineColor=BLACK, lineWidth=.1, context=drawContext)
+    drawFixture(fixture, pos, angle, color=WHITE, lineColor=BLACK, lineWidth=.1, context=drawContext)
     {
         const shape = box2d.castObjectType(fixture.GetShape());
         switch (shape.GetType())
@@ -8481,101 +8660,25 @@ class Box2dPlugin
                 let points = [];
                 for (let i=shape.GetVertexCount(); i--;)
                     points.push(box2d.vec2From(shape.GetVertex(i)));
-                box2d.drawPoly(pos, angle, points, color, outlineColor, lineWidth, context);
+                drawPoly(points, color, lineWidth, lineColor, pos, angle, false, false, context);
                 break;
             }
             case box2d.instance.b2Shape.e_circle:
             {
                 const radius = shape.get_m_radius();
-                box2d.drawCircle(pos, radius, color, outlineColor, lineWidth, context);
+                drawCircle(pos, radius, color, lineWidth, lineColor, false, false, context);
                 break;
             }
             case box2d.instance.b2Shape.e_edge:
             {
                 const v1 = box2d.vec2From(shape.get_m_vertex1());
                 const v2 = box2d.vec2From(shape.get_m_vertex2());
-                box2d.drawLine(pos, angle, v1, v2, color, lineWidth, context);
+                drawLine(v1, v2, lineWidth, lineColor, pos, angle, false, false, context);
                 break;
             }
         }
     }
 
-    /** draws a circle
-     *  @param {Vector2} pos
-     *  @param {number} radius
-     *  @param {Color} [color]
-     *  @param {Color} [outlineColor]
-     *  @param {number} [lineWidth]
-     *  @param {CanvasRenderingContext2D} [context] */
-    drawCircle(pos, radius, color=WHITE, outlineColor=BLACK, lineWidth=.1, context=drawContext)
-    {
-        drawCanvas2D(pos, vec2(1), 0, 0, context=>
-        {
-            context.beginPath();
-            context.arc(0, 0, radius, 0, 9);
-            box2d.drawFillStroke(color, outlineColor, lineWidth, context);
-        }, 0, context);
-    }
-
-    /** draws a polygon
-     *  @param {Vector2} pos
-     *  @param {number} angle
-     *  @param {Array<Vector2>} points
-     *  @param {Color} [color]
-     *  @param {Color} [outlineColor]
-     *  @param {number} [lineWidth]
-     *  @param {CanvasRenderingContext2D} [context] */
-    drawPoly(pos, angle, points, color=WHITE, outlineColor=BLACK, lineWidth=.1, context=drawContext)
-    {
-        drawCanvas2D(pos, vec2(1), angle, 0, context=>
-        {
-            context.beginPath();
-            points.forEach(p=>context.lineTo(p.x, p.y));
-            context.closePath();
-            box2d.drawFillStroke(color, outlineColor, lineWidth, context);
-        }, 0, context);
-    }
-
-    /** draws a line
-     *  @param {Vector2} pos
-     *  @param {number} angle
-     *  @param {Vector2} posA
-     *  @param {Vector2} posB
-     *  @param {Color} [color]
-     *  @param {number} [lineWidth]
-     *  @param {CanvasRenderingContext2D} [context] */
-    drawLine(pos, angle, posA, posB, color=WHITE, lineWidth=.1, context=drawContext)
-    {
-        drawCanvas2D(pos, vec2(1), angle, 0, context=>
-        {
-            context.beginPath();
-            context.lineTo(posA.x, posA.y);
-            context.lineTo(posB.x, posB.y);
-            box2d.drawFillStroke(0, color, lineWidth, context);
-        }, 0, context);
-    }
-
-    /** performs a fill or stroke as a helper to the other draw functions
-     *  @param {Color} [color]
-     *  @param {Color} [outlineColor]
-     *  @param {number} [lineWidth]
-     *  @param {CanvasRenderingContext2D} [context] */
-    drawFillStroke(color=WHITE, outlineColor=BLACK, lineWidth=.1, context=drawContext)
-    {
-        if (color)
-        {
-            context.fillStyle = color.toString();
-            context.fill();
-        }
-        if (outlineColor && lineWidth)
-        {
-            context.lineWidth = lineWidth;
-            context.lineJoin = context.lineCap = 'round';
-            context.strokeStyle = outlineColor.toString();
-            context.stroke();
-        }
-    }
-
     ///////////////////////////////////////////////////////////////////////////////
     // helper functions
 
@@ -8676,6 +8779,7 @@ async function box2dInit()
     function setupDebugDraw()
     {
         // setup debug draw
+        const debugLineWidth = .1;
         const debugDraw = new box2d.instance.JSDraw();
         const box2dColor = (c)=> new Color(c.get_r(), c.get_g(), c.get_b());
         const box2dColorPointer = (c)=>
@@ -8693,33 +8797,33 @@ async function box2dInit()
             color = getDebugColor(color);
             point1 = box2d.vec2FromPointer(point1);
             point2 = box2d.vec2FromPointer(point2);
-            box2d.drawLine(vec2(), 0, point1, point2, color, undefined, overlayContext);
+            drawLine(point1, point2, debugLineWidth, color, vec2(), 0, false, false, overlayContext);
         };
         debugDraw.DrawPolygon = function(vertices, vertexCount, color)
         {
             color = getDebugColor(color);
             const points = getPointsList(vertices, vertexCount);
-            box2d.drawPoly(vec2(), 0, points, undefined, color, undefined, overlayContext);
+            drawPoly(points, CLEAR_WHITE, debugLineWidth, color, vec2(), 0, false, false, overlayContext);
         };
         debugDraw.DrawSolidPolygon = function(vertices, vertexCount, color)
         {
             color = getDebugColor(color);
             const points = getPointsList(vertices, vertexCount);
-            box2d.drawPoly(vec2(), 0, points, color, color, undefined, overlayContext);
+            drawPoly(points, color, 0, color, vec2(), 0, false, false, overlayContext);
         };
         debugDraw.DrawCircle = function(center, radius, color)
         {
             color = getDebugColor(color);
             center = box2d.vec2FromPointer(center);
-            box2d.drawCircle(center, radius, undefined, color, undefined, overlayContext);
+            drawCircle(center, radius, CLEAR_WHITE, debugLineWidth, color, false, false, overlayContext);
         };
         debugDraw.DrawSolidCircle = function(center, radius, axis, color)
         {
             color = getDebugColor(color);
             center = box2d.vec2FromPointer(center);
             axis = box2d.vec2FromPointer(axis).scale(radius);
-            box2d.drawCircle(center, radius, color, color, undefined, overlayContext);
-            box2d.drawLine(center, 0, vec2(), axis, color, undefined, overlayContext);
+            drawCircle(center, radius, color, debugLineWidth, color, false, false, overlayContext);
+            drawLine(vec2(), axis, debugLineWidth, color, center, 0, false, false, overlayContext);
         };
         debugDraw.DrawTransform = function(transform)
         {
@@ -8728,8 +8832,8 @@ async function box2dInit()
             const angle = -transform.get_q().GetAngle();
             const p1 = vec2(1,0), c1 = rgb(.75,0,0,.8);
             const p2 = vec2(0,1), c2 = rgb(0,.75,0,.8);
-            box2d.drawLine(pos, angle, vec2(), p1, c1, undefined, overlayContext);
-            box2d.drawLine(pos, angle, vec2(), p2, c2, undefined, overlayContext);
+            drawLine(vec2(), p1, debugLineWidth, c1, pos, angle, false, false, overlayContext);
+            drawLine(vec2(), p2, debugLineWidth, c2, pos, angle, false, false, overlayContext);
         }
             
         debugDraw.AppendFlags(box2d.instance.b2Draw.e_shapeBit);
@@ -8754,12 +8858,13 @@ async function box2dInit()
  *  @param {Vector2} pos - Screen space position
  *  @param {Vector2} size - Screen space size
  *  @param {TileInfo} startTile - Starting tile for the nine-slice pattern
- *  @param {number} [borderSize=1] - Width of the border sections
- *  @param {number} [extraSpace=.01] - Extra spacing adjustment
+ *  @param {number} [borderSize] - Width of the border sections
+ *  @param {number} [extraSpace] - Extra spacing adjustment
+ *  @param {number} [angle] - Angle to rotate by
  *  @memberof DrawUtilities */
-function drawNineSliceScreen(pos, size, startTile, borderSize=32, extraSpace=1)
+function drawNineSliceScreen(pos, size, startTile, borderSize=32, extraSpace=2, angle=0)
 {
-    drawNineSlice(pos, size, startTile, WHITE, borderSize, BLACK, extraSpace, false, true, overlayContext);
+    drawNineSlice(pos, size, startTile, WHITE, borderSize, BLACK, extraSpace, angle, false, true, overlayContext);
 }
 
 /** Draw a scalable nine-slice UI element in world space
@@ -8768,14 +8873,15 @@ function drawNineSliceScreen(pos, size, startTile, borderSize=32, extraSpace=1)
  *  @param {Vector2} size - World space size
  *  @param {TileInfo} startTile - Starting tile for the nine-slice pattern
  *  @param {Color} [color] - Color to modulate with
- *  @param {number} [borderSize=1] - Width of the border sections
+ *  @param {number} [borderSize] - Width of the border sections
  *  @param {Color} [additiveColor] - Additive color
- *  @param {number} [extraSpace=.01] - Extra spacing adjustment
+ *  @param {number} [extraSpace] - Extra spacing adjustment
+ *  @param {number} [angle] - Angle to rotate by
  *  @param {boolean} [useWebGL=glEnable] - Use WebGL for rendering
  *  @param {boolean} [screenSpace] - Use screen space coordinates
  *  @param {CanvasRenderingContext2D} [context] - Canvas context to use
  *  @memberof DrawUtilities */
-function drawNineSlice(pos, size, startTile, color, borderSize=1, additiveColor, extraSpace=.01, useWebGL=glEnable, screenSpace, context)
+function drawNineSlice(pos, size, startTile, color, borderSize=1, additiveColor, extraSpace=.05, angle=0, useWebGL=glEnable, screenSpace, context)
 {
     // setup nine slice tiles
     const centerTile = startTile.offset(startTile.size);
@@ -8783,26 +8889,27 @@ function drawNineSlice(pos, size, startTile, color, borderSize=1, additiveColor,
     const cornerSize = vec2(borderSize);
     const cornerOffset = size.scale(.5).subtract(cornerSize.scale(.5));
     const flip = screenSpace ? -1 : 1;
+    const rotateAngle = screenSpace ? -angle : angle;
 
     // center
-    drawTile(pos, centerSize, centerTile, color, 0, false, additiveColor, useWebGL, screenSpace, context);
-    for(let i=4; i--;)
+    drawTile(pos, centerSize, centerTile, color, angle, false, additiveColor, useWebGL, screenSpace, context);
+    for (let i=4; i--;)
     {
         // sides
         const horizontal = i%2;
         const sidePos = cornerOffset.multiply(vec2(horizontal?i==1?1:-1:0, horizontal?0:i?-1:1));
         const sideSize = vec2(horizontal ? borderSize : centerSize.x, horizontal ? centerSize.y : borderSize);
         const sideTile = centerTile.offset(startTile.size.multiply(vec2(i==1?1:i==3?-1:0,i==0?-flip:i==2?flip:0)))
-        drawTile(pos.add(sidePos), sideSize, sideTile, color, 0, false, additiveColor, useWebGL, screenSpace, context);
+        drawTile(pos.add(sidePos.rotate(rotateAngle)), sideSize, sideTile, color, angle, false, additiveColor, useWebGL, screenSpace, context);
     }
-    for(let i=4; i--;)
+    for (let i=4; i--;)
     {
         // corners
         const flipX = i>1;
         const flipY = i && i<3;
         const cornerPos = cornerOffset.multiply(vec2(flipX?-1:1, flipY?-1:1));
         const cornerTile = centerTile.offset(startTile.size.multiply(vec2(flipX?-1:1,flipY?flip:-flip)));
-        drawTile(pos.add(cornerPos), cornerSize, cornerTile, color, 0, false, additiveColor, useWebGL, screenSpace, context);
+        drawTile(pos.add(cornerPos.rotate(rotateAngle)), cornerSize, cornerTile, color, angle, false, additiveColor, useWebGL, screenSpace, context);
     }
 }
 
@@ -8811,12 +8918,13 @@ function drawNineSlice(pos, size, startTile, color, borderSize=1, additiveColor,
  *  @param {Vector2} pos - Screen space position
  *  @param {Vector2} size - Screen space size
  *  @param {TileInfo} startTile - Starting tile for the three-slice pattern
- *  @param {number} [borderSize=1] - Width of the border sections
- *  @param {number} [extraSpace=.01] - Extra spacing adjustment
+ *  @param {number} [borderSize] - Width of the border sections
+ *  @param {number} [extraSpace] - Extra spacing adjustment
+ *  @param {number} [angle] - Angle to rotate by
  *  @memberof DrawUtilities */
-function drawThreeSliceScreen(pos, size, startTile, borderSize=32, extraSpace=1)
+function drawThreeSliceScreen(pos, size, startTile, borderSize=32, extraSpace=2, angle=0)
 {
-    drawThreeSlice(pos, size, startTile, WHITE, borderSize, BLACK, extraSpace, false, true, overlayContext);
+    drawThreeSlice(pos, size, startTile, WHITE, borderSize, BLACK, extraSpace, angle, false, true, overlayContext);
 }
 
 /** Draw a scalable three-slice UI element in world space
@@ -8825,14 +8933,15 @@ function drawThreeSliceScreen(pos, size, startTile, borderSize=32, extraSpace=1)
  *  @param {Vector2} size - World space size
  *  @param {TileInfo} startTile - Starting tile for the three-slice pattern
  *  @param {Color} [color] - Color to modulate with
- *  @param {number} [borderSize=1] - Width of the border sections
+ *  @param {number} [borderSize] - Width of the border sections
  *  @param {Color} [additiveColor] - Additive color
- *  @param {number} [extraSpace=.01] - Extra spacing adjustment
+ *  @param {number} [extraSpace] - Extra spacing adjustment
+ *  @param {number} [angle] - Angle to rotate by
  *  @param {boolean} [useWebGL=glEnable] - Use WebGL for rendering
  *  @param {boolean} [screenSpace] - Use screen space coordinates
  *  @param {CanvasRenderingContext2D} [context] - Canvas context to use
  *  @memberof DrawUtilities */
-function drawThreeSlice(pos, size, startTile, color, borderSize=1, additiveColor, extraSpace=.01, useWebGL=glEnable, screenSpace, context)
+function drawThreeSlice(pos, size, startTile, color, borderSize=1, additiveColor, extraSpace=.05, angle=0, useWebGL=glEnable, screenSpace, context)
 {
     // setup three slice tiles
     const cornerTile = startTile.frame(0);
@@ -8842,25 +8951,26 @@ function drawThreeSlice(pos, size, startTile, color, borderSize=1, additiveColor
     const cornerSize = vec2(borderSize);
     const cornerOffset = size.scale(.5).subtract(cornerSize.scale(.5));
     const flip = screenSpace ? -1 : 1;
+    const rotateAngle = screenSpace ? -angle : angle;
 
     // center
-    drawTile(pos, centerSize, centerTile, color, 0, false, additiveColor, useWebGL, screenSpace, context);
-    for(let i=4; i--;)
+    drawTile(pos, centerSize, centerTile, color, angle, false, additiveColor, useWebGL, screenSpace, context);
+    for (let i=4; i--;)
     {
         // sides
-        const angle = i*PI/2;
+        const a = angle + i*PI/2;
         const horizontal = i%2;
         const sidePos = cornerOffset.multiply(vec2(horizontal?i==1?1:-1:0, horizontal?0:i?-flip:flip));
         const sideSize = vec2(horizontal ? centerSize.y : centerSize.x, borderSize);
-        drawTile(pos.add(sidePos), sideSize, sideTile, color, angle, false, additiveColor, useWebGL, screenSpace, context);
+        drawTile(pos.add(sidePos.rotate(rotateAngle)), sideSize, sideTile, color, a, false, additiveColor, useWebGL, screenSpace, context);
     }
-    for(let i=4; i--;)
+    for (let i=4; i--;)
     {
         // corners
-        const angle = i*PI/2;
+        const a = angle + i*PI/2;
         const flipX = !i || i>2;
         const flipY = i>1;
         const cornerPos = cornerOffset.multiply(vec2(flipX?-1:1, flipY?-flip:flip));
-        drawTile(pos.add(cornerPos), cornerSize, cornerTile, color, angle, false, additiveColor, useWebGL, screenSpace, context);
+        drawTile(pos.add(cornerPos.rotate(rotateAngle)), cornerSize, cornerTile, color, a, false, additiveColor, useWebGL, screenSpace, context);
     }
 }