littlejsengine 1.13.4 → 1.14.4

package/src/engineDraw.js

@@ -1,21 +1,21 @@
-/** 
+/**
  * LittleJS Drawing System
  * - Hybrid system with both Canvas2D and WebGL available
  * - Super fast tile sheet rendering with WebGL
  * - Can apply rotation, mirror, color and additive color
  * - Font rendering system with built in engine font
  * - Many useful utility functions
- * 
+ *
  * LittleJS uses a hybrid rendering solution with the best of both Canvas2D and WebGL.
  * There are 3 canvas/contexts available to draw to...
  * mainCanvas - 2D background canvas, non WebGL stuff like tile layers are drawn here.
  * glCanvas - Used by the accelerated WebGL batch rendering system.
  * overlayCanvas - Another 2D canvas that appears on top of the other 2 canvases.
- * 
+ *
  * The WebGL rendering system is very fast with some caveats...
  * - Switching blend modes (additive) or textures causes another draw call which is expensive in excess
  * - Group additive rendering together using renderOrder to mitigate this issue
- * 
+ *
  * The LittleJS rendering solution is intentionally simple, feel free to adjust it for your needs!
  * @namespace Draw
  */
@@ -62,7 +62,7 @@ let workCanvas;
  *  @memberof Draw */
 let workContext;
 
-/** The size of the main canvas (and other secondary canvases) 
+/** The size of the main canvas (and other secondary canvases)
  *  @type {Vector2}
  *  @memberof Draw */
 let mainCanvasSize = vec2();
@@ -72,12 +72,14 @@ let mainCanvasSize = vec2();
  *  @memberof Draw */
 let textureInfos = [];
 
-// Keep track of how many draw calls there were each frame for debugging
+/** Keeps track of how many draw calls there were each frame for debugging
+ *  @type {number}
+ *  @memberof Draw */
 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
@@ -91,15 +93,14 @@ let drawCount;
  * tile(5, 8)                    // a tile at index 5 using a tile size of 8
  * tile(1, 16, 3)                // a tile at index 1 of size 16 on texture 3
  * tile(vec2(4,8), vec2(30,10))  // a tile at index (4,8) with a size of (30,10)
- * @memberof Draw
- */
+ * @memberof Draw */
 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 = new Vector2(size, size);
@@ -108,24 +109,24 @@ function tile(pos=new Vector2, size=tileSizeDefault, textureIndex=0, padding=0)
     // create tile info object
     const tileInfo = new TileInfo(new Vector2, size, textureIndex, padding);
 
-    // use get the pos of the tile
+    // get the position of the tile
     const textureInfo = textureInfos[textureIndex];
     ASSERT(!!textureInfo, 'Texture not loaded');
     const sizePaddedX = size.x + padding*2;
     const sizePaddedY = size.y + padding*2;
-    if (typeof pos == 'number')
+    if (typeof pos === 'number')
     {
         const cols = textureInfo.size.x / sizePaddedX |0;
-        ASSERT(cols>0, 'Tile size is too big for texture');
+        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);
     }
     else
         tileInfo.pos.set(pos.x*sizePaddedX+padding, pos.y*sizePaddedY+padding);
-    return tileInfo; 
+    return tileInfo;
 }
 
-/** 
+/**
  * Tile Info - Stores info about how to draw a tile
  */
 class TileInfo
@@ -163,14 +164,14 @@ class TileInfo
     */
     frame(frame)
     {
-        ASSERT(typeof frame == 'number');
+        ASSERT(typeof frame === 'number');
         return this.offset(new Vector2(frame*(this.size.x+this.padding*2), 0));
     }
 
     /**
      * Set this tile to use a full image
      * @param {HTMLImageElement|OffscreenCanvas} image
-     * @param {WebGLTexture} [glTexture] - webgl texture
+     * @param {WebGLTexture} [glTexture] - WebGL texture
      * @return {TileInfo}
      */
     setFullImage(image, glTexture)
@@ -188,7 +189,7 @@ class TextureInfo
     /**
      * Create a TextureInfo, called automatically by the engine
      * @param {HTMLImageElement|OffscreenCanvas} image
-     * @param {WebGLTexture} [glTexture] - webgl texture 
+     * @param {WebGLTexture} [glTexture] - WebGL texture
      */
     constructor(image, glTexture)
     {
@@ -198,7 +199,7 @@ class TextureInfo
         this.size = vec2(image.width, image.height);
         /** @property {Vector2} - inverse of the size, cached for rendering */
         this.sizeInverse = vec2(1/image.width, 1/image.height);
-        /** @property {WebGLTexture} - webgl texture */
+        /** @property {WebGLTexture} - WebGL texture */
         this.glTexture = glTexture;
     }
 
@@ -214,28 +215,25 @@ class TextureInfo
 // Drawing functions
 
 /** Draw textured tile centered in world space, with color applied if using WebGL
- *  @param {Vector2} pos                        - Center of the tile in world space
- *  @param {Vector2} [size=(1,1)]               - Size of the tile in world space
- *  @param {TileInfo}[tileInfo]                 - Tile info to use, untextured if undefined
- *  @param {Color}   [color=(1,1,1,1)]          - Color to modulate with
- *  @param {number}  [angle]                    - Angle to rotate by
- *  @param {boolean} [mirror]                   - If true image is flipped along the Y axis
- *  @param {Color}   [additiveColor]            - Additive color to be applied if any
- *  @param {boolean} [useWebGL=glEnable]        - Use accelerated WebGL rendering
- *  @param {boolean} [screenSpace=false]        - If true the pos and size are in screen space
+ *  @param {Vector2}  pos                 - Center of the tile in world space
+ *  @param {Vector2}  [size=(1,1)]        - Size of the tile in world space
+ *  @param {TileInfo} [tileInfo]          - Tile info to use, untextured if undefined
+ *  @param {Color}    [color=(1,1,1,1)]   - Color to modulate with
+ *  @param {number}   [angle]             - Angle to rotate by
+ *  @param {boolean}  [mirror]            - Is image flipped along the Y axis?
+ *  @param {Color}    [additiveColor]     - Additive color to be applied if any
+ *  @param {boolean}  [useWebGL=glEnable] - Use accelerated WebGL rendering?
+ *  @param {boolean}  [screenSpace=false] - Are the pos and size are in screen space?
  *  @param {CanvasRenderingContext2D|OffscreenCanvasRenderingContext2D} [context] - Canvas 2D context to draw to
  *  @memberof Draw */
-function drawTile(pos, size=new Vector2(1), tileInfo, color=new Color,
+function drawTile(pos, size=new Vector2(1), tileInfo, color=WHITE,
     angle=0, mirror, additiveColor, useWebGL=glEnable, screenSpace, context)
 {
-    ASSERT(!context || !useWebGL, 'context only supported in canvas 2D mode'); 
-    ASSERT(isVector2(pos) && pos.isValid(), 'drawTile pos should be a vec2');
-    ASSERT(isVector2(size) && size.isValid(), 'drawTile size should be a vec2');
+    ASSERT(isVector2(pos), 'drawTile pos should be a vec2');
+    ASSERT(isVector2(size), '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');
-
-    if (color.a <= 0 && (!additiveColor || additiveColor.a <= 0) || !size.x || !size.y)
-        return; // completely invisible, skip render
+    ASSERT(!context || !useWebGL, 'context only supported in canvas 2D mode');
 
     const textureInfo = tileInfo && tileInfo.textureInfo;
     if (useWebGL)
@@ -259,28 +257,28 @@ function drawTile(pos, size=new Vector2(1), tileInfo, color=new Color,
             {
                 const tileImageFixBleedX = sizeInverse.x*tileFixBleedScale;
                 const tileImageFixBleedY = sizeInverse.y*tileFixBleedScale;
-                glDraw(pos.x, pos.y, mirror ? -size.x : size.x, size.y, angle, 
-                    x + tileImageFixBleedX,     y + tileImageFixBleedY, 
-                    x - tileImageFixBleedX + w, y - tileImageFixBleedY + h, 
-                    color.rgbaInt(), additiveColor && additiveColor.rgbaInt()); 
+                glDraw(pos.x, pos.y, mirror ? -size.x : size.x, size.y, angle,
+                    x + tileImageFixBleedX,     y + tileImageFixBleedY,
+                    x - tileImageFixBleedX + w, y - tileImageFixBleedY + h,
+                    color.rgbaInt(), additiveColor && additiveColor.rgbaInt());
             }
             else
             {
-                glDraw(pos.x, pos.y, mirror ? -size.x : size.x, size.y, angle, 
-                    x, y, x + w, y + h, 
-                    color.rgbaInt(), additiveColor && additiveColor.rgbaInt()); 
+                glDraw(pos.x, pos.y, mirror ? -size.x : size.x, size.y, angle,
+                    x, y, x + w, y + h,
+                    color.rgbaInt(), additiveColor && additiveColor.rgbaInt());
             }
         }
         else
         {
             // if no tile info, force untextured
-            glDraw(pos.x, pos.y, size.x, size.y, angle, 0, 0, 0, 0, 0, color.rgbaInt()); 
+            glDraw(pos.x, pos.y, size.x, size.y, angle, 0, 0, 0, 0, 0, color.rgbaInt());
         }
     }
     else
     {
         // normal canvas 2D rendering method (slower)
-        showWatermark && ++drawCount;
+        ++drawCount;
         size = new Vector2(size.x, -size.y); // fix upside down sprites
         drawCanvas2D(pos, size, angle, mirror, (context)=>
         {
@@ -312,14 +310,128 @@ function drawTile(pos, size=new Vector2(1), tileInfo, color=new Color,
  *  @param {CanvasRenderingContext2D|OffscreenCanvasRenderingContext2D} [context]
  *  @memberof Draw */
 function drawRect(pos, size, color, angle, useWebGL, screenSpace, context)
-{ 
-    drawTile(pos, size, undefined, color, angle, false, undefined, useWebGL, screenSpace, context); 
+{
+    drawTile(pos, size, undefined, color, angle, false, undefined, useWebGL, screenSpace, context);
+}
+
+/** Draw a rect centered on pos with a gradient from top to bottom
+ *  @param {Vector2} pos
+ *  @param {Vector2} [size=(1,1)]
+ *  @param {Color}   [colorTop=(1,1,1,1)]
+ *  @param {Color}   [colorBottom=(0,0,0,1)]
+ *  @param {number}  [angle]
+ *  @param {boolean} [useWebGL=glEnable]
+ *  @param {boolean} [screenSpace]
+ *  @param {CanvasRenderingContext2D|OffscreenCanvasRenderingContext2D} [context]
+ *  @memberof Draw */
+function drawRectGradient(pos, size, colorTop=WHITE, colorBottom=BLACK, angle=0, useWebGL=glEnable, screenSpace=false, context)
+{
+    ASSERT(isVector2(pos), 'drawRectGradient pos should be a vec2');
+    ASSERT(isVector2(size), 'drawRectGradient size should be a vec2');
+    ASSERT(isColor(colorTop) && isColor(colorBottom), 'drawRectGradient color is invalid');
+    ASSERT(isNumber(angle), 'drawRectGradient angle should be a number');
+    ASSERT(!context || !useWebGL, 'context only supported in canvas 2D mode');
+    if (useWebGL)
+    {
+        if (screenSpace)
+        {
+            // convert to world space
+            pos = screenToWorld(pos);
+            size = size.scale(1/cameraScale);
+        }
+        // build 4 corner points for the rectangle
+        const points = [], colors = [];
+        const halfSizeX = size.x/2, halfSizeY = size.y/2;
+        const colorTopInt = colorTop.rgbaInt();
+        const colorBottomInt = colorBottom.rgbaInt();
+        const c = Math.cos(-angle), s = Math.sin(-angle);
+        for (let i=4; i--;)
+        {
+            const x = i & 1 ? halfSizeX : -halfSizeX;
+            const y = i & 2 ? halfSizeY : -halfSizeY;
+            const rx = x * c - y * s;
+            const ry = x * s + y * c;
+            const color = i & 2 ? colorTopInt : colorBottomInt;
+            points.push(vec2(pos.x + rx, pos.y + ry));
+            colors.push(color);
+        }
+        glDrawColoredPoints(points, colors);
+    }
+    else
+    {
+        // normal canvas 2D rendering method (slower)
+        ++drawCount;
+        size = new Vector2(size.x, -size.y); // fix upside down sprites
+        drawCanvas2D(pos, size, angle, false, (context)=>
+        {
+            // if no tile info, use untextured rect
+            const gradient = context.createLinearGradient(0, -.5, 0, .5);
+            gradient.addColorStop(0, colorTop.toString());
+            gradient.addColorStop(1, colorBottom.toString());
+            context.fillStyle = gradient;
+            context.fillRect(-.5, -.5, 1, 1);
+        }, screenSpace, context);
+    }
+}
+
+/** Draw connected lines between a series of points
+ *  @param {Array<Vector2>} points
+ *  @param {number}  [width]
+ *  @param {Color}   [color=(1,1,1,1)]
+ *  @param {boolean} [wrap] - Should the last point connect to the first?
+ *  @param {Vector2} [pos=(0,0)] - Offset to apply
+ *  @param {number}  [angle] - Angle to rotate by
+ *  @param {boolean} [useWebGL=glEnable]
+ *  @param {boolean} [screenSpace]
+ *  @param {CanvasRenderingContext2D|OffscreenCanvasRenderingContext2D} [context]
+ *  @memberof Draw */
+function drawLineList(points, width=.1, color, wrap=false, pos=vec2(), angle=0, useWebGL=glEnable, screenSpace, context)
+{
+    ASSERT(Array.isArray(points), 'drawLineList points should be an array');
+    ASSERT(isNumber(width), 'drawLineList width should be a number');
+    ASSERT(isColor(color), 'drawLineList color is invalid');
+    ASSERT(isVector2(pos), 'drawLineList pos should be a vec2');
+    ASSERT(isNumber(angle), 'drawLineList angle should be a number');
+    ASSERT(!context || !useWebGL, 'context only supported in canvas 2D mode');
+    if (useWebGL)
+    {
+        let scale = 1;
+        if (screenSpace)
+        {
+            // convert to world space
+            pos = screenToWorld(pos);
+            scale = 1/cameraScale;
+        }
+        glDrawOutlineTransform(points, color.rgbaInt(), width, pos.x, pos.y, scale, scale, angle, wrap);
+    }
+    else
+    {
+        // normal canvas 2D rendering method (slower)
+        ++drawCount;
+        drawCanvas2D(pos, vec2(1), angle, false, (context)=>
+        {
+            context.strokeStyle = color.toString();
+            context.lineWidth = width;
+            context.beginPath();
+            for (let i=0; i<points.length; ++i)
+            {
+                const point = points[i];
+                if (i)
+                    context.lineTo(point.x, point.y);
+                else
+                    context.moveTo(point.x, point.y);
+            }
+            if (wrap)
+                context.closePath();
+            context.stroke();
+        }, screenSpace, context);
+    }
 }
 
 /** Draw colored line between two points
  *  @param {Vector2} posA
  *  @param {Vector2} posB
- *  @param {number}  [thickness]
+ *  @param {number}  [width]
  *  @param {Color}   [color=(1,1,1,1)]
  *  @param {Vector2} [pos=(0,0)] - Offset to apply
  *  @param {number}  [angle] - Angle to rotate by
@@ -327,15 +439,43 @@ function drawRect(pos, size, color, angle, useWebGL, screenSpace, context)
  *  @param {boolean} [screenSpace]
  *  @param {CanvasRenderingContext2D|OffscreenCanvasRenderingContext2D} [context]
  *  @memberof Draw */
-function drawLine(posA, posB, thickness=.1, color, pos=vec2(), angle=0, useWebGL, screenSpace, context)
+function drawLine(posA, posB, width=.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);
+    const size = vec2(width, halfDelta.length()*2);
     pos = pos.add(posA.add(halfDelta));
     angle += halfDelta.angle();
     drawRect(pos, size, color, angle, useWebGL, screenSpace, context);
 }
 
+/** Draw colored regular polygon using passed in number of sides
+ *  @param {Vector2} pos
+ *  @param {Vector2} [size=(1,1)]
+ *  @param {number}  [sides]
+ *  @param {Color}   [color=(1,1,1,1)]
+ *  @param {number}  [angle]
+ *  @param {number}  [lineWidth]
+ *  @param {Color}   [lineColor=(0,0,0,1)]
+ *  @param {boolean} [useWebGL=glEnable]
+ *  @param {boolean} [screenSpace]
+ *  @param {CanvasRenderingContext2D|OffscreenCanvasRenderingContext2D} [context]
+ *  @memberof Draw */
+function drawRegularPoly(pos, size=vec2(1), sides=3, color=WHITE, lineWidth=0, lineColor=BLACK, angle=0, useWebGL=glEnable, screenSpace=false, context)
+{
+    ASSERT(isVector2(size), 'drawRegularPoly size should be a vec2');
+    ASSERT(isNumber(sides), 'drawRegularPoly sides should be a number');
+
+    // build regular polygon points
+    const points = [];
+    const sizeX = size.x/2, sizeY = size.y/2;
+    for (let i=sides; i--;)
+    {
+        const a = (i/sides)*PI*2;
+        points.push(vec2(Math.sin(a)*sizeX, Math.cos(a)*sizeY));
+    }
+    drawPoly(points, color, lineWidth, lineColor, pos, angle, useWebGL, screenSpace, context);
+}
+
 /** Draw colored polygon using passed in points
  *  @param {Array<Vector2>} points - Array of Vector2 points
  *  @param {Color}   [color=(1,1,1,1)]
@@ -343,82 +483,110 @@ function drawLine(posA, posB, thickness=.1, color, pos=vec2(), angle=0, useWebGL
  *  @param {Color}   [lineColor=(0,0,0,1)]
  *  @param {Vector2} [pos=(0,0)] - Offset to apply
  *  @param {number}  [angle] - Angle to rotate by
- *  @param {boolean} [useWebGL] - Webgl not supported
+ *  @param {boolean} [useWebGL=glEnable]
  *  @param {boolean} [screenSpace]
- *  @param {CanvasRenderingContext2D|OffscreenCanvasRenderingContext2D} [context=drawContext]
+ *  @param {CanvasRenderingContext2D|OffscreenCanvasRenderingContext2D} [context]
  *  @memberof Draw */
-function drawPoly(points, color=new Color, lineWidth=0, lineColor=BLACK, pos=vec2(), angle=0, useWebGL=false, screenSpace=false, context=drawContext)
+function drawPoly(points, color=WHITE, lineWidth=0, lineColor=BLACK, pos=vec2(), angle=0, useWebGL=glEnable, screenSpace=false, context=undefined)
 {
-    ASSERT(isVector2(pos) && pos.isValid(), 'drawPoly pos should be a vec2');
+    ASSERT(isVector2(pos), '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=>
+    ASSERT(!context || !useWebGL, 'context only supported in canvas 2D mode');
+    if (useWebGL)
     {
-        context.beginPath();
-        for (const point of points)
-            context.lineTo(point.x, point.y);
-        context.closePath();
-        context.fillStyle = color.toString();
-        context.fill();
-        if (lineWidth)
+        let scale = 1;
+        if (screenSpace)
         {
-            context.strokeStyle = lineColor.toString();
-            context.lineWidth = lineWidth;
-            context.stroke();
+            // convert to world space
+            pos = screenToWorld(pos);
+            scale = 1/cameraScale;
         }
-    }, screenSpace, context);
+        glDrawPointsTransform(points, color.rgbaInt(), pos.x, pos.y, scale, scale, angle);
+        if (lineWidth > 0)
+            glDrawOutlineTransform(points, lineColor.rgbaInt(), lineWidth, pos.x, pos.y, scale, scale, angle);
+    }
+    else
+    {
+        drawCanvas2D(pos, vec2(1), angle, false, context=>
+        {
+            context.fillStyle = color.toString();
+            context.beginPath();
+            for (const point of points)
+                context.lineTo(point.x, point.y);
+            context.closePath();
+            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 {Vector2} [size=(1,1)]
+ *  @param {Vector2} [size=(1,1)] - Width and height diameter
  *  @param {Color}   [color=(1,1,1,1)]
  *  @param {number}  [angle]
  *  @param {number}  [lineWidth]
  *  @param {Color}   [lineColor=(0,0,0,1)]
- *  @param {boolean} [useWebGL] - Webgl not supported
+ *  @param {boolean} [useWebGL=glEnable]
  *  @param {boolean} [screenSpace]
- *  @param {CanvasRenderingContext2D|OffscreenCanvasRenderingContext2D} [context=drawContext]
+ *  @param {CanvasRenderingContext2D|OffscreenCanvasRenderingContext2D} [context]
  *  @memberof Draw */
-function drawEllipse(pos, size=vec2(1), color=new Color, angle=0, lineWidth=0, lineColor=BLACK, useWebGL=false, screenSpace=false, context=drawContext)
+function drawEllipse(pos, size=vec2(1), color=WHITE, angle=0, lineWidth=0, lineColor=BLACK, useWebGL=glEnable, screenSpace=false, context)
 {
-    ASSERT(isVector2(pos) && pos.isValid(), 'drawEllipse pos should be a vec2');
-    ASSERT(isVector2(size) && size.isValid(), 'drawEllipse size should be a vec2');
+    ASSERT(isVector2(pos), 'drawEllipse pos should be a vec2');
+    ASSERT(isVector2(size), '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=>
+    ASSERT(lineWidth >= 0 && lineWidth < size.x && lineWidth < size.y, 'drawEllipse invalid lineWidth');
+    ASSERT(!context || !useWebGL, 'context only supported in canvas 2D mode');
+    if (useWebGL)
     {
-        context.beginPath();
-        context.ellipse(0, 0, size.y, size.x, 0, 0, 9);
-        context.fillStyle = color.toString();
-        context.fill();
-        if (lineWidth)
+        // draw as a regular polygon
+        const sides = glCircleSides;
+        drawRegularPoly(pos, size, sides, color, lineWidth, lineColor, angle, useWebGL, screenSpace, context);
+    }
+    else
+    {
+        drawCanvas2D(pos, vec2(1), angle, false, context=>
         {
-            context.strokeStyle = lineColor.toString();
-            context.lineWidth = lineWidth;
-            context.stroke();   
-        }
-    }, screenSpace, context);
+            context.fillStyle = color.toString();
+            context.beginPath();
+            context.ellipse(0, 0, size.x/2, size.y/2, 0, 0, 9);
+            context.fill();
+            if (lineWidth)
+            {
+                context.strokeStyle = lineColor.toString();
+                context.lineWidth = lineWidth;
+                context.stroke();
+            }
+        }, screenSpace, context);
+    }
 }
 
 /** Draw colored circle using passed in point
  *  @param {Vector2} pos
- *  @param {number}  [radius=1]
+ *  @param {number}  [size=1] - Diameter
  *  @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]
+ *  @param {boolean} [useWebGL=glEnable]
+ *  @param {boolean} [screenSpace]
+ *  @param {CanvasRenderingContext2D|OffscreenCanvasRenderingContext2D} [context]
  *  @memberof Draw */
-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); }
+function drawCircle(pos, size=1, color=WHITE, lineWidth=0, lineColor=BLACK, useWebGL=glEnable, screenSpace=false, context)
+{
+    ASSERT(isNumber(size), 'drawCircle size should be a number');
+    drawEllipse(pos, vec2(size), color, 0, lineWidth, lineColor, useWebGL, screenSpace, context);
+}
 
 /** Draw directly to a 2d canvas context in world space
  *  @param {Vector2}  pos
@@ -426,7 +594,7 @@ function drawCircle(pos, radius=1, color=new Color, lineWidth=0, lineColor=BLACK
  *  @param {number}   angle
  *  @param {boolean}  [mirror]
  *  @param {Function} [drawFunction]
- *  @param {boolean} [screenSpace=false]
+ *  @param {boolean}  [screenSpace=false]
  *  @param {CanvasRenderingContext2D|OffscreenCanvasRenderingContext2D} [context=drawContext]
  *  @memberof Draw */
 function drawCanvas2D(pos, size, angle=0, mirror=false, drawFunction, screenSpace=false, context=drawContext)
@@ -496,7 +664,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=BLACK, textAlign='center', font=fontDefault, maxWidth=undefined, context=overlayContext)
+function drawTextScreen(text, pos, size=1, color=WHITE, lineWidth=0, lineColor=BLACK, textAlign='center', font=fontDefault, maxWidth, context=overlayContext)
 {
     context.fillStyle = color.toString();
     context.strokeStyle = lineColor.toString();
@@ -504,7 +672,6 @@ function drawTextScreen(text, pos, size=1, color=new Color, lineWidth=0, lineCol
     context.textAlign = textAlign;
     context.font = size + 'px '+ font;
     context.textBaseline = 'middle';
-    context.lineJoin = 'round';
 
     const lines = (text+'').split('\n');
     let posY = pos.y;
@@ -528,7 +695,7 @@ function screenToWorld(screenPos)
 {
     let cameraPosRelativeX = (screenPos.x - mainCanvasSize.x/2 + .5) /  cameraScale;
     let cameraPosRelativeY = (screenPos.y - mainCanvasSize.y/2 + .5) / -cameraScale;
-    if (cameraAngle) 
+    if (cameraAngle)
     {
         // apply camera rotation
         const cos = Math.cos(-cameraAngle), sin = Math.sin(-cameraAngle);
@@ -621,7 +788,7 @@ function drawImageColor(context, image, sx, sy, sWidth, sHeight, dx, dy, dWidth,
     {
         // 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.drawImage(image, sx+sx2, sy+sy2, sWidth2, sHeight2, dx, dy, dWidth, dHeight);
         context.globalAlpha = 1;
     }
     else
@@ -642,7 +809,7 @@ function drawImageColor(context, image, sx, sy, sWidth, sHeight, dx, dy, dWidth,
             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); 
+            context.drawImage(workCanvas, sx2, sy2, sWidth2, sHeight2, dx, dy, dWidth, dHeight);
         }
         else
         {
@@ -655,7 +822,7 @@ function drawImageColor(context, image, sx, sy, sWidth, sHeight, dx, dy, dWidth,
             }
             workContext.putImageData(imageData, 0, 0);
             context.globalAlpha = color.a;
-            context.drawImage(workCanvas, sx2, sy2, sWidth2, sHeight2, dx, dy, dWidth, dHeight); 
+            context.drawImage(workCanvas, sx2, sy2, sWidth2, sHeight2, dx, dy, dWidth, dHeight);
             context.globalAlpha = 1;
         }
     }
@@ -682,7 +849,7 @@ function toggleFullscreen()
 }
 
 /** Set the cursor style
- *  @param {string}  cursorStyle - CSS cursor style (auto, none, crosshair, etc)
+ *  @param {string}  [cursorStyle] - CSS cursor style (auto, none, crosshair, etc)
  *  @memberof Draw */
 function setCursor(cursorStyle = 'auto')
 {
@@ -694,7 +861,7 @@ function setCursor(cursorStyle = 'auto')
 
 let engineFontImage;
 
-/** 
+/**
  * Font Image Object - Draw text on a 2D canvas by using characters in an image
  * - 96 characters (from space to tilde) are stored in an image
  * - Uses a default 8x8 font if none is supplied
@@ -702,9 +869,9 @@ let engineFontImage;
  * @example
  * // use built in font
  * const font = new FontImage;
- * 
+ *
  * // draw text
- * font.drawTextScreen("LittleJS\nHello World!", vec2(200, 50));
+ * font.drawTextScreen('LittleJS\nHello World!', vec2(200, 50));
  */
 class FontImage
 {
@@ -712,7 +879,6 @@ class FontImage
      *  @param {HTMLImageElement} [image]    - Image for the font, if undefined default font is used
      *  @param {Vector2} [tileSize=(8,8)]    - Size of the font source tiles
      *  @param {Vector2} [paddingSize=(0,1)] - How much extra space to add between characters
-     *  @param {CanvasRenderingContext2D|OffscreenCanvasRenderingContext2D} [context=overlayContext] - context to draw to
      */
     constructor(image, tileSize=vec2(8), paddingSize=vec2(0,1), context=overlayContext)
     {
@@ -726,7 +892,6 @@ class FontImage
         this.image = image || engineFontImage;
         this.tileSize = tileSize;
         this.paddingSize = paddingSize;
-        this.context = context;
     }
 
     /** Draw text in world space using the image font
@@ -734,23 +899,32 @@ class FontImage
      *  @param {Vector2} pos
      *  @param {number}  [scale=.25]
      *  @param {boolean} [center]
+     *  @param {CanvasRenderingContext2D|OffscreenCanvasRenderingContext2D}[context=drawContext] 
      */
-    drawText(text, pos, scale=1, center)
+    drawText(text, pos, scale=1, center, context=drawContext)
     {
-        this.drawTextScreen(text, worldToScreen(pos).floor(), scale*cameraScale|0, center);
+        this.drawTextScreen(text, worldToScreen(pos).floor(), scale*cameraScale|0, center, context);
     }
 
-    /** Draw text in screen space using the image font
+    /** Draw text on overlay canvas in world space using the image font
+     *  @param {string}  text
+     *  @param {Vector2} pos
+     *  @param {number}  [scale]
+     *  @param {boolean} [center]
+     */
+    drawTextOverlay(text, pos, scale=4, center)
+    { this.drawText(text, pos, scale, center, overlayContext); }
+
+    /** Draw text on overlay canvas in screen space using the image font
      *  @param {string}  text
      *  @param {Vector2} pos
      *  @param {number}  [scale]
      *  @param {boolean} [center]
+     *  @param {CanvasRenderingContext2D|OffscreenCanvasRenderingContext2D} [context=drawContext]
      */
-    drawTextScreen(text, pos, scale=4, center)
+    drawTextScreen(text, pos, scale=4, center, context=overlayContext)
     {
-        const context = this.context;
         context.save();
-
         const size = this.tileSize;
         const drawSize = size.add(this.paddingSize).scale(scale);
         const cols = this.image.width / this.tileSize.x |0;
@@ -769,11 +943,10 @@ class FontImage
                 const x = tile % cols;
                 const y = tile / cols |0;
                 const drawPos = pos.add(vec2(j,i).multiply(drawSize));
-                context.drawImage(this.image, x * size.x, y * size.y, size.x, size.y, 
+                context.drawImage(this.image, x * size.x, y * size.y, size.x, size.y,
                     drawPos.x - centerOffset, drawPos.y, size.x * scale, size.y * scale);
             }
         });
-
         context.restore();
     }
 }