littlejsengine 1.12.6 → 1.13.4

package/src/engineDraw.js

@@ -42,6 +42,26 @@ let overlayCanvas;
  *  @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 */
+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 */
@@ -61,10 +81,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
@@ -73,31 +93,36 @@ let drawCount;
  * tile(vec2(4,8), vec2(30,10))  // a tile at index (4,8) with a size of (30,10)
  * @memberof Draw
  */
-function tile(pos=vec2(), size=tileSizeDefault, textureIndex=0, padding=0)
+function tile(pos=new Vector2, size=tileSizeDefault, textureIndex=0, padding=0)
 {
     if (headlessMode)
         return new TileInfo;
 
     // if size is a number, make it a vector
-    if (typeof size === 'number')
+    if (typeof size == 'number')
     {
         ASSERT(size > 0);
-        size = vec2(size);
+        size = new Vector2(size, size);
     }
 
-    // use pos as a tile index
+    // create tile info object
+    const tileInfo = new TileInfo(new Vector2, size, textureIndex, padding);
+
+    // use get the pos of the tile
     const textureInfo = textureInfos[textureIndex];
     ASSERT(!!textureInfo, 'Texture not loaded');
-    const sizePadded = size.add(vec2(padding*2));
-    if (typeof pos === 'number')
+    const sizePaddedX = size.x + padding*2;
+    const sizePaddedY = size.y + padding*2;
+    if (typeof pos == 'number')
     {
-        const cols = textureInfo.size.x / sizePadded.x |0;
-        pos = cols>0 ? vec2(pos%cols, pos/cols|0) : vec2();
+        const cols = textureInfo.size.x / sizePaddedX |0;
+        ASSERT(cols>0, 'Tile size is too big for texture');
+        const posX = pos % cols, posY = (pos / cols) |0;
+        tileInfo.pos.set(posX*sizePaddedX+padding, posY*sizePaddedY+padding);
     }
-    pos = vec2(pos.x*sizePadded.x+padding, pos.y*sizePadded.y+padding);
-
-    // return a tile info object
-    return new TileInfo(pos, size, textureIndex, padding); 
+    else
+        tileInfo.pos.set(pos.x*sizePaddedX+padding, pos.y*sizePaddedY+padding);
+    return tileInfo; 
 }
 
 /** 
@@ -121,6 +146,8 @@ class TileInfo
         this.textureIndex = textureIndex;
         /** @property {number} - How many pixels padding around tiles */
         this.padding = padding;
+        /** @property {TextureInfo} - The texture info for this tile */
+        this.textureInfo = textureInfos[this.textureIndex];
     }
 
     /** Returns a copy of this tile offset by a vector
@@ -137,14 +164,22 @@ class TileInfo
     frame(frame)
     {
         ASSERT(typeof frame == 'number');
-        return this.offset(vec2(frame*(this.size.x+this.padding*2), 0));
+        return this.offset(new Vector2(frame*(this.size.x+this.padding*2), 0));
     }
 
-    /** Returns the texture info for this tile
-    *  @return {TextureInfo}
-    */
-    getTextureInfo()
-    { return textureInfos[this.textureIndex]; }
+    /**
+     * Set this tile to use a full image
+     * @param {HTMLImageElement|OffscreenCanvas} image
+     * @param {WebGLTexture} [glTexture] - webgl texture
+     * @return {TileInfo}
+     */
+    setFullImage(image, glTexture)
+    {
+        this.pos = new Vector2;
+        this.size = new Vector2(image.width, image.height);
+        this.textureInfo = new TextureInfo(image, glTexture);
+        return this;
+    }
 }
 
 /** Texture Info - Stores info about each texture */
@@ -152,9 +187,10 @@ class TextureInfo
 {
     /**
      * Create a TextureInfo, called automatically by the engine
-     * @param {HTMLImageElement} image
+     * @param {HTMLImageElement|OffscreenCanvas} image
+     * @param {WebGLTexture} [glTexture] - webgl texture 
      */
-    constructor(image)
+    constructor(image, glTexture)
     {
         /** @property {HTMLImageElement} - image source */
         this.image = image;
@@ -163,42 +199,19 @@ class TextureInfo
         /** @property {Vector2} - inverse of the size, cached for rendering */
         this.sizeInverse = vec2(1/image.width, 1/image.height);
         /** @property {WebGLTexture} - webgl texture */
-        this.glTexture = glEnable && glCreateTexture(image);
+        this.glTexture = glTexture;
     }
-}
-
-///////////////////////////////////////////////////////////////////////////////
-
-/** Convert from screen to world space coordinates
- *  @param {Vector2} screenPos
- *  @return {Vector2}
- *  @memberof Draw */
-function screenToWorld(screenPos)
-{
-    return new Vector2
-    (
-        (screenPos.x - mainCanvasSize.x/2 + .5) /  cameraScale + cameraPos.x,
-        (screenPos.y - mainCanvasSize.y/2 + .5) / -cameraScale + cameraPos.y
-    );
-}
 
-/** Convert from world to screen space coordinates
- *  @param {Vector2} worldPos
- *  @return {Vector2}
- *  @memberof Draw */
-function worldToScreen(worldPos)
-{
-    return new Vector2
-    (
-        (worldPos.x - cameraPos.x) *  cameraScale + mainCanvasSize.x/2 - .5,
-        (worldPos.y - cameraPos.y) * -cameraScale + mainCanvasSize.y/2 - .5
-    );
+    createWebGLTexture()
+    {
+        ASSERT(!this.glTexture);
+        if (glEnable)
+            this.glTexture = glCreateTexture(this.image);
+    }
 }
 
-/** 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
@@ -212,16 +225,19 @@ function getCameraSize() { return mainCanvasSize.scale(1/cameraScale); }
  *  @param {boolean} [screenSpace=false]        - If true the pos and size are in screen space
  *  @param {CanvasRenderingContext2D|OffscreenCanvasRenderingContext2D} [context] - Canvas 2D context to draw to
  *  @memberof Draw */
-function drawTile(pos, size=vec2(1), tileInfo, color=new Color,
+function drawTile(pos, size=new Vector2(1), tileInfo, color=new Color,
     angle=0, mirror, additiveColor, useWebGL=glEnable, screenSpace, context)
 {
     ASSERT(!context || !useWebGL, 'context only supported in canvas 2D mode'); 
-    ASSERT(typeof tileInfo !== 'number' || !tileInfo, 
-        'this is an old style calls, to fix replace it with tile(tileIndex, tileSize)');
-    ASSERT(isVector2(pos) && isVector2(size));
-    ASSERT(isColor(color) && (!additiveColor || isColor(additiveColor)));
+    ASSERT(isVector2(pos) && pos.isValid(), 'drawTile pos should be a vec2');
+    ASSERT(isVector2(size) && size.isValid(), 'drawTile size should be a vec2');
+    ASSERT(isColor(color) && (!additiveColor || isColor(additiveColor)), 'drawTile color is invalid');
+    ASSERT(isNumber(angle), 'drawTile angle should be a number');
 
-    const textureInfo = tileInfo && tileInfo.getTextureInfo();
+    if (color.a <= 0 && (!additiveColor || additiveColor.a <= 0) || !size.x || !size.y)
+        return; // completely invisible, skip render
+
+    const textureInfo = tileInfo && tileInfo.textureInfo;
     if (useWebGL)
     {
         if (screenSpace)
@@ -265,24 +281,21 @@ function drawTile(pos, size=vec2(1), tileInfo, color=new Color,
     {
         // normal canvas 2D rendering method (slower)
         showWatermark && ++drawCount;
-        size = vec2(size.x, -size.y); // fix upside down sprites
+        size = new Vector2(size.x, -size.y); // fix upside down sprites
         drawCanvas2D(pos, size, angle, mirror, (context)=>
         {
             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);
@@ -295,7 +308,7 @@ function drawTile(pos, size=vec2(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)
@@ -308,73 +321,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 {CanvasRenderingContext2D} [context=mainContext]
+ *  @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=mainContext)
+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 {CanvasRenderingContext2D} [context=mainContext]
+ *  @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=mainContext)
+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)
+    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=>
     {
-        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)
-    {
-        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
@@ -383,22 +413,23 @@ 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} [context=mainContext]
+ *  @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=mainContext)
-{ 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
  *  @param {Vector2}  size
  *  @param {number}   angle
- *  @param {boolean}  mirror
- *  @param {Function} drawFunction
+ *  @param {boolean}  [mirror]
+ *  @param {Function} [drawFunction]
  *  @param {boolean} [screenSpace=false]
- *  @param {CanvasRenderingContext2D|OffscreenCanvasRenderingContext2D} [context=mainContext]
+ *  @param {CanvasRenderingContext2D|OffscreenCanvasRenderingContext2D} [context=drawContext]
  *  @memberof Draw */
-function drawCanvas2D(pos, size, angle, mirror, drawFunction, screenSpace, context=mainContext)
+function drawCanvas2D(pos, size, angle=0, mirror=false, drawFunction, screenSpace=false, context=drawContext)
 {
     if (!screenSpace)
     {
@@ -408,12 +439,15 @@ function drawCanvas2D(pos, size, angle, mirror, drawFunction, screenSpace, conte
     }
     context.save();
     context.translate(pos.x+.5, pos.y+.5);
-    context.rotate(angle);
+    context.rotate(angle-cameraAngle);
     context.scale(mirror ? -size.x : size.x, -size.y);
     drawFunction(context);
     context.restore();
 }
 
+///////////////////////////////////////////////////////////////////////////////
+// Text Drawing Functions
+
 /** Draw text on main canvas in world space
  *  Automatically splits new lines into rows
  *  @param {string}  text
@@ -425,9 +459,9 @@ function drawCanvas2D(pos, size, angle, mirror, drawFunction, screenSpace, conte
  *  @param {CanvasTextAlign}  [textAlign='center']
  *  @param {string}  [font=fontDefault]
  *  @param {number}  [maxWidth]
- *  @param {CanvasRenderingContext2D|OffscreenCanvasRenderingContext2D} [context=mainContext]
+ *  @param {CanvasRenderingContext2D|OffscreenCanvasRenderingContext2D} [context=drawContext]
  *  @memberof Draw */
-function drawText(text, pos, size=1, color, lineWidth=0, lineColor, textAlign, font, maxWidth, context=mainContext)
+function drawText(text, pos, size=1, color, lineWidth=0, lineColor, textAlign, font, maxWidth, context=drawContext)
 {
     drawTextScreen(text, worldToScreen(pos), size*cameraScale, color, lineWidth*cameraScale, lineColor, textAlign, font, maxWidth, context);
 }
@@ -462,7 +496,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();
@@ -473,32 +507,77 @@ function drawTextScreen(text, pos, size=1, color=new Color, lineWidth=0, lineCol
     context.lineJoin = 'round';
 
     const lines = (text+'').split('\n');
-    pos = pos.copy();
-    pos.y -= (lines.length-1) * size/2; // center text vertically
+    let posY = pos.y;
+    posY -= (lines.length-1) * size/2; // center text vertically
     lines.forEach(line=>
     {
-        lineWidth && context.strokeText(line, pos.x, pos.y, maxWidth);
-        context.fillText(line, pos.x, pos.y, maxWidth);
-        pos.y += size;
+        lineWidth && context.strokeText(line, pos.x, posY, maxWidth);
+        context.fillText(line, pos.x, posY, maxWidth);
+        posY += size;
     });
 }
 
-/** Enable normal or additive blend mode
- *  @param {boolean} [additive]
- *  @param {boolean} [useWebGL=glEnable]
- *  @param {CanvasRenderingContext2D|OffscreenCanvasRenderingContext2D} [context=mainContext]
+///////////////////////////////////////////////////////////////////////////////
+// Drawing utilities
+
+/** Convert from screen to world space coordinates
+ *  @param {Vector2} screenPos
+ *  @return {Vector2}
  *  @memberof Draw */
-function setBlendMode(additive, useWebGL=glEnable, context)
+function screenToWorld(screenPos)
 {
-    ASSERT(!context || !useWebGL, 'context only supported in canvas 2D mode');
-    if (useWebGL)
-        glAdditive = additive;
-    else
+    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)
     {
-        if (!context)
-            context = mainContext;
-        context.globalCompositeOperation = additive ? 'lighter' : 'source-over';
+        // 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 {CanvasRenderingContext2D|OffscreenCanvasRenderingContext2D} [context]
+ *  @memberof Draw */
+function setBlendMode(additive=false, context)
+{
+    glAdditive = additive;
+    context ||= drawContext;
+    context.globalCompositeOperation = additive ? 'lighter' : 'source-over';
 }
 
 /** Combines all LittleJS canvases onto the main canvas and clears them
@@ -507,7 +586,7 @@ function setBlendMode(additive, useWebGL=glEnable, context)
 function combineCanvases()
 {
     // combine canvases
-    glCopyToContext(mainContext, true);
+    glCopyToContext(mainContext);
     mainContext.drawImage(overlayCanvas, 0, 0);
 
     // clear canvases
@@ -515,6 +594,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;
@@ -582,7 +757,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);
@@ -601,35 +776,4 @@ 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;
 }