littlejsengine 1.8.1 → 1.8.4

package/build/littlejs.release.js

@@ -1181,6 +1181,7 @@ class EngineObject
         // set passed in params
         ASSERT(isVector2(pos) && isVector2(size)); // ensure pos and size are vec2s
         ASSERT(typeof tileInfo !== 'number' || !tileInfo); // prevent old style calls
+        ASSERT(!(renderOrder instanceof Color)); // prevent old style calls
         // to fix old calls, replace with tile(tileIndex, tileSize)
 
         /** @property {Vector2} - World space position of the object */
@@ -1702,16 +1703,18 @@ function worldToScreen(worldPos)
  *  @param {Color}   [additiveColor=Color(0,0,0,0)] - Additive color to be applied
  *  @param {Boolean} [useWebGL=glEnable]            - Use accelerated WebGL rendering
  *  @param {Boolean} [screenSpace=0]                - If true the pos and size are in screen space
+ *  @param {CanvasRenderingContext2D} [context]     - Canvas 2D context to draw to
  *  @memberof Draw */
 function drawTile(pos, size=vec2(1), tileInfo, color=new Color,
-    angle=0, mirror, additiveColor=new Color(0,0,0,0), useWebGL=glEnable, screenSpace)
+    angle=0, mirror, additiveColor=new Color(0,0,0,0), useWebGL=glEnable, screenSpace, context)
 {
+    ASSERT(!context || !useWebGL); // context only supported in canvas 2D mode
     ASSERT(typeof tileInfo !== 'number' || !tileInfo); // prevent old style calls
     // to fix old calls, replace with tile(tileIndex, tileSize)
 
     showWatermark && ++drawCount;
     const textureInfo = tileInfo && tileInfo.getTextureInfo();
-    if (glEnable && useWebGL)
+    if (useWebGL)
     {
         if (screenSpace)
         {
@@ -1762,7 +1765,7 @@ function drawTile(pos, size=vec2(1), tileInfo, color=new Color,
                 context.fillStyle = color;
                 context.fillRect(-.5, -.5, 1, 1);
             }
-        }, undefined, screenSpace);
+        }, screenSpace, context);
     }
 }
 
@@ -1773,28 +1776,36 @@ function drawTile(pos, size=vec2(1), tileInfo, color=new Color,
  *  @param {Number}  [angle=0]
  *  @param {Boolean} [useWebGL=glEnable]
  *  @param {Boolean} [screenSpace=0]
+ *  @param {CanvasRenderingContext2D} [context]
  *  @memberof Draw */
-function drawRect(pos, size, color, angle, useWebGL, screenSpace)
-{ drawTile(pos, size, undefined, color, angle, 0, undefined, useWebGL, screenSpace); }
+function drawRect(pos, size, color, angle, useWebGL, screenSpace, context)
+{ 
+    drawTile(pos, size, undefined, color, angle, 0, undefined, useWebGL, screenSpace, context); 
+}
 
 /** Draw colored polygon using passed in points
  *  @param {Array}   points - Array of Vector2 points
  *  @param {Color}   [color=Color()]
  *  @param {Boolean} [useWebGL=glEnable]
  *  @param {Boolean} [screenSpace=0]
+ *  @param {CanvasRenderingContext2D} [context]
  *  @memberof Draw */
-function drawPoly(points, color=new Color, useWebGL=glEnable, screenSpace)
+function drawPoly(points, color=new Color, useWebGL=glEnable, screenSpace, context)
 {
+    ASSERT(!context || !useWebGL); // context only supported in canvas 2D mode
+
     if (useWebGL)
         glDrawPoints(screenSpace ? points.map(screenToWorld) : points, color.rgbaInt());
     else
     {
         // draw using canvas
-        mainContext.fillStyle = color;
-        mainContext.beginPath();
+        if (!context)
+            context = mainContext;
+        context.fillStyle = color;
+        context.beginPath();
         for (const point of screenSpace ? points : points.map(worldToScreen))
-            mainContext.lineTo(point.x, point.y);
-        mainContext.fill();
+            context.lineTo(point.x, point.y);
+        context.fill();
     }
 }
 
@@ -1805,12 +1816,13 @@ function drawPoly(points, color=new Color, useWebGL=glEnable, screenSpace)
  *  @param {Color}   [color=Color()]
  *  @param {Boolean} [useWebGL=glEnable]
  *  @param {Boolean} [screenSpace=0]
+ *  @param {CanvasRenderingContext2D} [context]
  *  @memberof Draw */
-function drawLine(posA, posB, thickness=.1, color, useWebGL, screenSpace)
+function drawLine(posA, posB, thickness=.1, color, 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);
+    drawRect(posA.add(halfDelta), size, color, halfDelta.angle(), useWebGL, screenSpace, context);
 }
 
 /** Draw directly to a 2d canvas context in world space
@@ -1819,10 +1831,10 @@ function drawLine(posA, posB, thickness=.1, color, useWebGL, screenSpace)
  *  @param {Number}   angle
  *  @param {Boolean}  mirror
  *  @param {Function} drawFunction
- *  @param {CanvasRenderingContext2D} [context=mainContext]
  *  @param {Boolean} [screenSpace=0]
+ *  @param {CanvasRenderingContext2D} [context=mainContext]
  *  @memberof Draw */
-function drawCanvas2D(pos, size, angle, mirror, drawFunction, context = mainContext, screenSpace)
+function drawCanvas2D(pos, size, angle, mirror, drawFunction, screenSpace, context=mainContext)
 {
     if (!screenSpace)
     {
@@ -1841,13 +1853,19 @@ function drawCanvas2D(pos, size, angle, mirror, drawFunction, context = mainCont
 /** Enable normal or additive blend mode
  *  @param {Boolean} [additive=0]
  *  @param {Boolean} [useWebGL=glEnable]
+ *  @param {CanvasRenderingContext2D} [context=mainContext]
  *  @memberof Draw */
-function setBlendMode(additive, useWebGL=glEnable)
+function setBlendMode(additive, useWebGL=glEnable, context)
 {
-    if (glEnable && useWebGL)
-        glSetBlendMode(additive);
+    ASSERT(!context || !useWebGL); // context only supported in canvas 2D mode
+    if (useWebGL)
+        glAdditive = additive;
     else
-        mainContext.globalCompositeOperation = additive ? 'lighter' : 'source-over';
+    {
+        if (!context)
+            context = mainContext;
+        context.globalCompositeOperation = additive ? 'lighter' : 'source-over';
+    }
 }
 
 /** Draw text on overlay canvas in world space
@@ -2499,7 +2517,8 @@ class Sound
         if (zzfxSound)
         {
             // generate zzfx sound now for fast playback
-            this.randomness = zzfxSound[1] || (zzfxSound[1] = 0);
+            this.randomness = zzfxSound[1] || 0;
+            zzfxSound[1] = 0; // generate without randomness
             this.sampleChannels = [zzfxG(...zzfxSound)];
             this.sampleRate = zzfxR;
         }
@@ -4005,21 +4024,20 @@ function glInit()
         '#version 300 es\n' +         // specify GLSL ES version
         'precision highp float;'+     // use highp for better accuracy
         'uniform mat4 m;'+            // transform matrix
-        'in vec2 p,t;'+               // position, uv
-        'in vec4 c,a;'+               // color, additiveColor
+        'in vec4 p,c,a;'+             // position, uv, color, additiveColor
         'out vec4 v,d,e;'+            // return uv, color, additiveColor
         'void main(){'+               // shader entry point
-        'gl_Position=m*vec4(p,1,1);'+ // transform position
-        'v=vec4(t,p);d=c;e=a;'+       // pass stuff to fragment shader
+        'gl_Position=m*vec4(p.xy,1,1);'+ // transform position
+        'v=p;d=c;e=a;'+               // pass stuff to fragment shader
         '}'                           // end of shader
         ,
         '#version 300 es\n' +         // specify GLSL ES version
         'precision highp float;'+     // use highp for better accuracy
-        'in vec4 v,d,e;'+             // uv, color, additiveColor
+        'in vec4 v,d,e;'+             // position, uv, color, additiveColor
         'uniform sampler2D s;'+       // texture
         'out vec4 c;'+                // out color
         'void main(){'+               // shader entry point
-        'c=texture(s,v.xy)*d+e;'+     // modulate texture by color plus additive
+        'c=texture(s,v.zw)*d+e;'+     // modulate texture by color plus additive
         '}'                           // end of shader
     );
 
@@ -4044,7 +4062,7 @@ function glPreRender()
     glContext.bindTexture(gl_TEXTURE_2D, glActiveTexture = textureInfos[0].glTexture);
     glContext.bindBuffer(gl_ARRAY_BUFFER, glArrayBuffer);
     glContext.bufferData(gl_ARRAY_BUFFER, gl_VERTEX_BUFFER_SIZE, gl_DYNAMIC_DRAW);
-    glSetBlendMode();
+    glAdditive = 0;
     
     // set vertex attributes
     let offset = 0;
@@ -4055,33 +4073,25 @@ function glPreRender()
         glContext.vertexAttribPointer(location, size, type, normalize, gl_VERTEX_BYTE_STRIDE, offset);
         offset += size*typeSize;
     }
-    initVertexAttribArray('p', gl_FLOAT, 4, 2);            // position
-    initVertexAttribArray('t', gl_FLOAT, 4, 2);            // texture coords
+    initVertexAttribArray('p', gl_FLOAT, 4, 4);            // position & texture coords
     initVertexAttribArray('c', gl_UNSIGNED_BYTE, 1, 4, 1); // color
     initVertexAttribArray('a', gl_UNSIGNED_BYTE, 1, 4, 1); // additiveColor
 
     // build the transform matrix
     const sx = 2 * cameraScale / mainCanvas.width;
     const sy = 2 * cameraScale / mainCanvas.height;
+    const cx = -1 - sx*cameraPos.x;
+    const cy = -1 - sy*cameraPos.y;
     glContext.uniformMatrix4fv(glContext.getUniformLocation(glShader, 'm'), 0,
         new Float32Array([
-            sx, 0, 0, 0,
-            0, sy, 0, 0,
-            1, 1, -1, 1,
-            -1-sx*cameraPos.x, -1-sy*cameraPos.y, 0, 0
+            sx,  0,  0,  0,
+             0, sy,  0,  0,
+             1,  1, -1,  1,
+            cx, cy,  0,  0
         ])
     );
 }
 
-/** Set the WebGl blend mode, normally you should call setBlendMode instead
- *  @param {Boolean} [additive=0]
- *  @memberof WebGL */
-function glSetBlendMode(additive=0)
-{
-    // setup blending
-    glAdditive = additive;
-}
-
 /** Set the WebGl texture, called automatically if using multiple textures
  *  - This may also flush the gl buffer resulting in more draw calls and worse performance
  *  @param {WebGLTexture} texture
@@ -4317,8 +4327,11 @@ function glRenderPostProcess()
         glFlush(); // clear out the buffer
         mainContext.drawImage(glCanvas, 0, 0); // copy to the main canvas
     }
-    else // set viewport
+    else
+    {
+        // set the viewport
         glContext.viewport(0, 0, glCanvas.width = mainCanvas.width, glCanvas.height = mainCanvas.height);
+    }
 
     if (glPostIncludeOverlay)
     {
@@ -4422,7 +4435,7 @@ const engineName = 'LittleJS';
  *  @type {String}
  *  @default
  *  @memberof Engine */
-const engineVersion = '1.8.1';
+const engineVersion = '1.8.4';
 
 /** Frames per second to update objects
  *  @type {Number}
@@ -4483,7 +4496,7 @@ let frameTimeLastMS = 0, frameTimeBufferMS = 0, averageFPS = 0;
  *  @param {Function} gameUpdatePost  - Called after physics and objects are updated, setup camera and prepare for render
  *  @param {Function} gameRender      - Called before objects are rendered, draw any background effects that appear behind objects
  *  @param {Function} gameRenderPost  - Called after objects are rendered, draw effects or hud that appear above all objects
- *  @param {String} [imageSources='tiles.png'] - Image to load
+ *  @param {Array} [imageSources=['tiles.png']] - Image to load
  *  @memberof Engine */
 function engineInit(gameInit, gameUpdate, gameUpdatePost, gameRender, gameRenderPost, imageSources=['tiles.png'])
 {

package/examples/breakout/gameObjects.js

@@ -134,7 +134,7 @@ class Ball extends EngineObject
         this.velocity = this.velocity.normalize(speed);
 
         // scale bounce sound pitch by speed
-        sound_bounce.play(this.pos, 1, speed);
+        sound_bounce.play(this.pos, 1, speed*2);
 
         if (o == paddle)
         {

package/examples/breakout/index.html

@@ -6,6 +6,6 @@
 <link rel=icon type=image/png href=../favicon.png>
 </head><body>
 
-<script src=../../build/littlejs.js?181></script>
-<script src=gameObjects.js?181></script>
-<script src=game.js?181></script>
+<script src=../../build/littlejs.js?183></script>
+<script src=gameObjects.js?183></script>
+<script src=game.js?183></script>

package/examples/breakoutTutorial/README.md

@@ -9,6 +9,8 @@ You can get the [LittleJS code using GitHub](https://github.com/KilledByAPixel/L
 
 In this tutorial we will make a breakout style game with a player controllable paddle, a ball that bounces, and bricks that break when hit. This is a great introduction to LittleJS and takes only around 30 minutes to complete.
 
+[The tutorial is also available on YouTube!](https://youtu.be/tSwDx-NWTXE?si=bkjMa8-7AN2Wg5MO)
+
 ## [You can play the result of this tutorial here.](https://killedbyapixel.github.io/LittleJS/examples/breakoutTutorial/)
 
 ![LittleJS Screenshot](images/9.png)
@@ -237,7 +239,7 @@ this.color = new Color(0,0,0,0); // make object invisible
 
 ## Debug Display
 
-This is a good time to try opening up the debug info by pressing ~. This feature will allow for a selection of debug overlays while also showing all game objects with more info displayed for the object closest to the mouse. It can be really useful when trying to diagnose bugs and understand what is going on.
+This is a good time to try opening up the debug info by pressing escape. This feature will allow for a selection of debug overlays while also showing all game objects with more info displayed for the object closest to the mouse. It can be really useful when trying to diagnose bugs and understand what is going on.
 
 ![LittleJS Screenshot](images/7.png)
 

package/examples/breakoutTutorial/index.html

@@ -6,5 +6,5 @@
 <link rel=icon type=image/png href=../favicon.png>
 </head><body>
 
-<script src=../../build/littlejs.js?181></script>
-<script src=game.js?181></script>
+<script src=../../build/littlejs.js?183></script>
+<script src=game.js?183></script>

package/examples/electron/index.html

@@ -7,7 +7,7 @@
 </head><body>
 
 <!-- LittleJS Engine -->
-<script src=../../build/littlejs.js?181></script>
+<script src=../../build/littlejs.js?183></script>
 
 <!-- Add your game scripts here -->
-<script src=game.js?181></script>
+<script src=game.js?183></script>

package/examples/js13k/index.html

@@ -1,18 +1,18 @@
 <head><title>LittleJS JS13K Project</title></head><body>
 
 <!-- LittleJS Engine -->
-<script src=../../src/engineDebug.js?181></script>
-<script src=../../src/engineUtilities.js?181></script>
-<script src=../../src/engineSettings.js?181></script>
-<script src=../../src/engineObject.js?181></script>
-<script src=../../src/engineDraw.js?181></script>
-<script src=../../src/engineInput.js?181></script>
-<script src=../../src/engineAudio.js?181></script>
-<script src=../../src/engineTileLayer.js?181></script>
-<script src=../../src/engineParticles.js?181></script>
-<script src=../../src/engineMedals.js?181></script>
-<script src=../../src/engineWebGL.js?181></script>
-<script src=../../src/engine.js?181></script>
+<script src=../../src/engineDebug.js?183></script>
+<script src=../../src/engineUtilities.js?183></script>
+<script src=../../src/engineSettings.js?183></script>
+<script src=../../src/engineObject.js?183></script>
+<script src=../../src/engineDraw.js?183></script>
+<script src=../../src/engineInput.js?183></script>
+<script src=../../src/engineAudio.js?183></script>
+<script src=../../src/engineTileLayer.js?183></script>
+<script src=../../src/engineParticles.js?183></script>
+<script src=../../src/engineMedals.js?183></script>
+<script src=../../src/engineWebGL.js?183></script>
+<script src=../../src/engine.js?183></script>
 
 <!-- Add your game scripts here -->
-<script src=game.js?181></script>
+<script src=game.js?183></script>

package/examples/module/game.js

@@ -8,7 +8,7 @@
 
 // import module
 import * as LittleJS from '../../build/littlejs.esm.js';
-const {Vector2, Color, Timer, vec2} = LittleJS;
+const {Vector2, Color, Timer, vec2, tile} = LittleJS;
 
 // sound effects
 const sound_click = new LittleJS.Sound([1,.5]);

package/examples/module/index.html

@@ -7,4 +7,4 @@
 </head><body>
 
 <!-- Add your game scripts here -->
-<script src=game.js?181 type=module></script>
+<script src=game.js?183 type=module></script>

package/examples/particles/index.html

@@ -10,7 +10,7 @@ button { margin:1px; }
 </style>
 </head><body>
 
-<script src=../../build/littlejs.js?181></script>
+<script src=../../build/littlejs.js?183></script>
 <script>
 
 'use strict';

package/examples/platformer/index.html

@@ -6,9 +6,9 @@
 <link rel=icon type=image/png href=../favicon.png>
 </head><body>
 
-<script src=../../build/littlejs.js?181></script>
-<script src=gameObjects.js?181></script>
-<script src=gamePlayer.js?181></script>
-<script src=gameEffects.js?181></script>
-<script src=gameLevel.js?181></script>
-<script src=game.js?181></script> 
+<script src=../../build/littlejs.js?183></script>
+<script src=gameObjects.js?183></script>
+<script src=gamePlayer.js?183></script>
+<script src=gameEffects.js?183></script>
+<script src=gameLevel.js?183></script>
+<script src=game.js?183></script> 

package/examples/puzzle/index.html

@@ -6,5 +6,5 @@
 <link rel=icon type=image/png href=../favicon.png>
 </head><body>
 
-<script src=../../build/littlejs.js?181></script>
-<script src=game.js?181></script>
+<script src=../../build/littlejs.js?183></script>
+<script src=game.js?183></script>

package/examples/starter/index.html

@@ -7,18 +7,18 @@
 </head><body>
 
 <!-- LittleJS Engine -->
-<script src=../../src/engineDebug.js?181></script>
-<script src=../../src/engineUtilities.js?181></script>
-<script src=../../src/engineSettings.js?181></script>
-<script src=../../src/engineObject.js?181></script>
-<script src=../../src/engineDraw.js?181></script>
-<script src=../../src/engineInput.js?181></script>
-<script src=../../src/engineAudio.js?181></script>
-<script src=../../src/engineTileLayer.js?181></script>
-<script src=../../src/engineParticles.js?181></script>
-<script src=../../src/engineMedals.js?181></script>
-<script src=../../src/engineWebGL.js?181></script>
-<script src=../../src/engine.js?181></script>
+<script src=../../src/engineDebug.js?183></script>
+<script src=../../src/engineUtilities.js?183></script>
+<script src=../../src/engineSettings.js?183></script>
+<script src=../../src/engineObject.js?183></script>
+<script src=../../src/engineDraw.js?183></script>
+<script src=../../src/engineInput.js?183></script>
+<script src=../../src/engineAudio.js?183></script>
+<script src=../../src/engineTileLayer.js?183></script>
+<script src=../../src/engineParticles.js?183></script>
+<script src=../../src/engineMedals.js?183></script>
+<script src=../../src/engineWebGL.js?183></script>
+<script src=../../src/engine.js?183></script>
 
 <!-- Add your game scripts here -->
-<script src=game.js?181></script>
+<script src=game.js?183></script>

package/examples/stress/index.html

@@ -6,7 +6,8 @@
 <link rel=icon type=image/png href=../favicon.png>
 </head><body>
 
-<script src=../../build/littlejs.min.js?181></script>
+<!-- LittleJS Engine -->
+<script src=../../build/littlejs.min.js?183></script>
 <script>
 
 /*
@@ -27,8 +28,7 @@ class TestObject extends EngineObject
 {
     constructor(pos)
     {
-        super(pos, vec2(1), 0, vec2(16), 0, spriteColor);
-
+        super(pos, vec2(1), tile(0), 0, spriteColor);
         this.additiveColor = spriteAdditiveColor;
         this.setCollision();
     }

package/examples/typescript/game.ts

@@ -8,7 +8,7 @@
 
 // import module
 import * as LittleJS from '../../build/littlejs.esm.js';
-const {Vector2, Color, Timer, vec2} = LittleJS;
+const {Vector2, Color, Timer, vec2, tile} = LittleJS;
 
 // sound effects
 const sound_click = new LittleJS.Sound([1,.5]);

package/examples/typescript/index.html

@@ -7,4 +7,4 @@
 </head><body>
 
 <!-- Add your game scripts here -->
-<script src=game.js?181 type=module></script>
+<script src=game.js?183 type=module></script>

package/package.json

@@ -1,8 +1,9 @@
 {
   "name": "littlejsengine",
-  "version": "1.8.1",
+  "version": "1.8.4",
   "description": "LittleJS - Tiny and Fast HTML5 Game Engine",
   "main": "build/littlejs.esm.js",
+  "types": "build/littlejs.esm.js",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/KilledByAPixel/LittleJS.git"

package/src/engine.js

@@ -30,7 +30,7 @@ const engineName = 'LittleJS';
  *  @type {String}
  *  @default
  *  @memberof Engine */
-const engineVersion = '1.8.1';
+const engineVersion = '1.8.4';
 
 /** Frames per second to update objects
  *  @type {Number}
@@ -91,7 +91,7 @@ let frameTimeLastMS = 0, frameTimeBufferMS = 0, averageFPS = 0;
  *  @param {Function} gameUpdatePost  - Called after physics and objects are updated, setup camera and prepare for render
  *  @param {Function} gameRender      - Called before objects are rendered, draw any background effects that appear behind objects
  *  @param {Function} gameRenderPost  - Called after objects are rendered, draw effects or hud that appear above all objects
- *  @param {String} [imageSources='tiles.png'] - Image to load
+ *  @param {Array} [imageSources=['tiles.png']] - Image to load
  *  @memberof Engine */
 function engineInit(gameInit, gameUpdate, gameUpdatePost, gameRender, gameRenderPost, imageSources=['tiles.png'])
 {

package/src/engineAudio.js

@@ -45,7 +45,8 @@ class Sound
         if (zzfxSound)
         {
             // generate zzfx sound now for fast playback
-            this.randomness = zzfxSound[1] || (zzfxSound[1] = 0);
+            this.randomness = zzfxSound[1] || 0;
+            zzfxSound[1] = 0; // generate without randomness
             this.sampleChannels = [zzfxG(...zzfxSound)];
             this.sampleRate = zzfxR;
         }

package/src/engineDraw.js

@@ -188,16 +188,18 @@ function worldToScreen(worldPos)
  *  @param {Color}   [additiveColor=Color(0,0,0,0)] - Additive color to be applied
  *  @param {Boolean} [useWebGL=glEnable]            - Use accelerated WebGL rendering
  *  @param {Boolean} [screenSpace=0]                - If true the pos and size are in screen space
+ *  @param {CanvasRenderingContext2D} [context]     - Canvas 2D context to draw to
  *  @memberof Draw */
 function drawTile(pos, size=vec2(1), tileInfo, color=new Color,
-    angle=0, mirror, additiveColor=new Color(0,0,0,0), useWebGL=glEnable, screenSpace)
+    angle=0, mirror, additiveColor=new Color(0,0,0,0), useWebGL=glEnable, screenSpace, context)
 {
+    ASSERT(!context || !useWebGL); // context only supported in canvas 2D mode
     ASSERT(typeof tileInfo !== 'number' || !tileInfo); // prevent old style calls
     // to fix old calls, replace with tile(tileIndex, tileSize)
 
     showWatermark && ++drawCount;
     const textureInfo = tileInfo && tileInfo.getTextureInfo();
-    if (glEnable && useWebGL)
+    if (useWebGL)
     {
         if (screenSpace)
         {
@@ -248,7 +250,7 @@ function drawTile(pos, size=vec2(1), tileInfo, color=new Color,
                 context.fillStyle = color;
                 context.fillRect(-.5, -.5, 1, 1);
             }
-        }, undefined, screenSpace);
+        }, screenSpace, context);
     }
 }
 
@@ -259,28 +261,36 @@ function drawTile(pos, size=vec2(1), tileInfo, color=new Color,
  *  @param {Number}  [angle=0]
  *  @param {Boolean} [useWebGL=glEnable]
  *  @param {Boolean} [screenSpace=0]
+ *  @param {CanvasRenderingContext2D} [context]
  *  @memberof Draw */
-function drawRect(pos, size, color, angle, useWebGL, screenSpace)
-{ drawTile(pos, size, undefined, color, angle, 0, undefined, useWebGL, screenSpace); }
+function drawRect(pos, size, color, angle, useWebGL, screenSpace, context)
+{ 
+    drawTile(pos, size, undefined, color, angle, 0, undefined, useWebGL, screenSpace, context); 
+}
 
 /** Draw colored polygon using passed in points
  *  @param {Array}   points - Array of Vector2 points
  *  @param {Color}   [color=Color()]
  *  @param {Boolean} [useWebGL=glEnable]
  *  @param {Boolean} [screenSpace=0]
+ *  @param {CanvasRenderingContext2D} [context]
  *  @memberof Draw */
-function drawPoly(points, color=new Color, useWebGL=glEnable, screenSpace)
+function drawPoly(points, color=new Color, useWebGL=glEnable, screenSpace, context)
 {
+    ASSERT(!context || !useWebGL); // context only supported in canvas 2D mode
+
     if (useWebGL)
         glDrawPoints(screenSpace ? points.map(screenToWorld) : points, color.rgbaInt());
     else
     {
         // draw using canvas
-        mainContext.fillStyle = color;
-        mainContext.beginPath();
+        if (!context)
+            context = mainContext;
+        context.fillStyle = color;
+        context.beginPath();
         for (const point of screenSpace ? points : points.map(worldToScreen))
-            mainContext.lineTo(point.x, point.y);
-        mainContext.fill();
+            context.lineTo(point.x, point.y);
+        context.fill();
     }
 }
 
@@ -291,12 +301,13 @@ function drawPoly(points, color=new Color, useWebGL=glEnable, screenSpace)
  *  @param {Color}   [color=Color()]
  *  @param {Boolean} [useWebGL=glEnable]
  *  @param {Boolean} [screenSpace=0]
+ *  @param {CanvasRenderingContext2D} [context]
  *  @memberof Draw */
-function drawLine(posA, posB, thickness=.1, color, useWebGL, screenSpace)
+function drawLine(posA, posB, thickness=.1, color, 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);
+    drawRect(posA.add(halfDelta), size, color, halfDelta.angle(), useWebGL, screenSpace, context);
 }
 
 /** Draw directly to a 2d canvas context in world space
@@ -305,10 +316,10 @@ function drawLine(posA, posB, thickness=.1, color, useWebGL, screenSpace)
  *  @param {Number}   angle
  *  @param {Boolean}  mirror
  *  @param {Function} drawFunction
- *  @param {CanvasRenderingContext2D} [context=mainContext]
  *  @param {Boolean} [screenSpace=0]
+ *  @param {CanvasRenderingContext2D} [context=mainContext]
  *  @memberof Draw */
-function drawCanvas2D(pos, size, angle, mirror, drawFunction, context = mainContext, screenSpace)
+function drawCanvas2D(pos, size, angle, mirror, drawFunction, screenSpace, context=mainContext)
 {
     if (!screenSpace)
     {
@@ -327,13 +338,19 @@ function drawCanvas2D(pos, size, angle, mirror, drawFunction, context = mainCont
 /** Enable normal or additive blend mode
  *  @param {Boolean} [additive=0]
  *  @param {Boolean} [useWebGL=glEnable]
+ *  @param {CanvasRenderingContext2D} [context=mainContext]
  *  @memberof Draw */
-function setBlendMode(additive, useWebGL=glEnable)
+function setBlendMode(additive, useWebGL=glEnable, context)
 {
-    if (glEnable && useWebGL)
-        glSetBlendMode(additive);
+    ASSERT(!context || !useWebGL); // context only supported in canvas 2D mode
+    if (useWebGL)
+        glAdditive = additive;
     else
-        mainContext.globalCompositeOperation = additive ? 'lighter' : 'source-over';
+    {
+        if (!context)
+            context = mainContext;
+        context.globalCompositeOperation = additive ? 'lighter' : 'source-over';
+    }
 }
 
 /** Draw text on overlay canvas in world space