littlejsengine 1.14.2 → 1.14.5

package/dist/littlejs.release.js

@@ -33,7 +33,7 @@ const engineName = 'LittleJS';
  *  @type {string}
  *  @default
  *  @memberof Engine */
-const engineVersion = '1.14.2';
+const engineVersion = '1.14.5';
 
 /** Frames per second to update
  *  @type {number}
@@ -249,8 +249,7 @@ async function engineInit(gameInit, gameUpdate, gameUpdatePost, gameRender, game
                 overlayContext.fillStyle = '#fff';
                 overlayContext.fillText(text, mainCanvas.width-2, 2);
             }
-            if (debug || showWatermark)
-                drawCount = 0;
+            drawCount = 0;
         }
         requestAnimationFrame(engineUpdate);
     }
@@ -284,6 +283,11 @@ async function engineInit(gameInit, gameUpdate, gameUpdatePost, gameRender, game
 
         // save canvas size
         mainCanvasSize = vec2(mainCanvas.width, mainCanvas.height);
+
+        // set default line join and cap
+        const lineJoin = 'round', lineCap = 'round';
+        mainContext.lineJoin = overlayContext.lineJoin = lineJoin;
+        mainContext.lineCap  = overlayContext.lineCap  = lineCap;
     }
 
     // wait for gameInit to load
@@ -1066,10 +1070,10 @@ function vec2(x=0, y) { return new Vector2(x, y === undefined ? x : y); }
  * @param {any} v
  * @return {boolean}
  * @memberof Utilities */
-function isVector2(v) { return v instanceof Vector2; }
+function isVector2(v) { return v instanceof Vector2 && v.isValid(); }
 
 // vector2 asserts
-function ASSERT_VECTOR2_VALID(v) { ASSERT(isVector2(v) && v.isValid(), 'Vector2 is invalid.', v); }
+function ASSERT_VECTOR2_VALID(v) { ASSERT(isVector2(v), 'Vector2 is invalid.', v); }
 function ASSERT_NUMBER_VALID(n) { ASSERT(isNumber(n), 'Number is invalid.', n); }
 function ASSERT_VECTOR2_NORMAL(v)
 {
@@ -1327,10 +1331,10 @@ function hsl(h, s, l, a) { return new Color().setHSLA(h, s, l, a); }
  * @param {any} c
  * @return {boolean}
  * @memberof Utilities */
-function isColor(c) { return c instanceof Color; }
+function isColor(c) { return c instanceof Color && c.isValid(); }
 
 // color asserts
-function ASSERT_COLOR_VALID(c) { ASSERT(isColor(c) && c.isValid(), 'Color is invalid.', c); }
+function ASSERT_COLOR_VALID(c) { ASSERT(isColor(c), 'Color is invalid.', c); }
 
 /**
  * Color object (red, green, blue, alpha) with some helpful functions
@@ -2263,11 +2267,11 @@ class EngineObject
     constructor(pos=vec2(), size=vec2(1), tileInfo, angle=0, color=new Color, renderOrder=0)
     {
         // check passed in params
-        ASSERT(isVector2(pos) && pos.isValid(), 'object pos should be a vec2');
-        ASSERT(isVector2(size) && size.isValid(), 'object size should be a vec2');
+        ASSERT(isVector2(pos), 'object pos should be a vec2');
+        ASSERT(isVector2(size), 'object size should be a vec2');
         ASSERT(!tileInfo || tileInfo instanceof TileInfo, 'object tileInfo should be a TileInfo or undefined');
         ASSERT(typeof angle === 'number' && isFinite(angle), 'object angle should be a number');
-        ASSERT(isColor(color) && color.isValid(), 'object color should be a valid rgba color');
+        ASSERT(isColor(color), 'object color should be a valid rgba color');
         ASSERT(typeof renderOrder === 'number', 'object renderOrder should be a number');
 
         /** @property {Vector2} - World space position of the object */
@@ -2761,7 +2765,9 @@ 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;
 
 ///////////////////////////////////////////////////////////////////////////////
@@ -2916,8 +2922,8 @@ class TextureInfo
 function drawTile(pos, size=new Vector2(1), tileInfo, color=WHITE,
     angle=0, mirror, additiveColor, useWebGL=glEnable, screenSpace, context)
 {
-    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');
     ASSERT(!context || !useWebGL, 'context only supported in canvas 2D mode');
@@ -2965,7 +2971,7 @@ function drawTile(pos, size=new Vector2(1), tileInfo, color=WHITE,
     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)=>
         {
@@ -3001,10 +3007,124 @@ function drawRect(pos, size, color, angle, 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
@@ -3012,10 +3132,10 @@ 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);
@@ -3035,12 +3155,16 @@ function drawLine(posA, posB, thickness=.1, color, pos=vec2(), angle=0, useWebGL
  *  @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)*size.x, Math.cos(a)*size.y));
+        points.push(vec2(Math.sin(a)*sizeX, Math.cos(a)*sizeY));
     }
     drawPoly(points, color, lineWidth, lineColor, pos, angle, useWebGL, screenSpace, context);
 }
@@ -3058,7 +3182,7 @@ function drawRegularPoly(pos, size=vec2(1), sides=3, color=WHITE, lineWidth=0, l
  *  @memberof Draw */
 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');
@@ -3099,7 +3223,7 @@ function drawPoly(points, color=WHITE, lineWidth=0, lineColor=BLACK, pos=vec2(),
 
 /** 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]
@@ -3110,8 +3234,8 @@ function drawPoly(points, color=WHITE, lineWidth=0, lineColor=BLACK, pos=vec2(),
  *  @memberof Draw */
 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');
@@ -3129,7 +3253,7 @@ function drawEllipse(pos, size=vec2(1), color=WHITE, angle=0, lineWidth=0, lineC
         {
             context.fillStyle = color.toString();
             context.beginPath();
-            context.ellipse(0, 0, size.x, size.y, 0, 0, 9);
+            context.ellipse(0, 0, size.x/2, size.y/2, 0, 0, 9);
             context.fill();
             if (lineWidth)
             {
@@ -3143,7 +3267,7 @@ function drawEllipse(pos, size=vec2(1), color=WHITE, angle=0, lineWidth=0, lineC
 
 /** 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)]
@@ -3151,8 +3275,11 @@ function drawEllipse(pos, size=vec2(1), color=WHITE, angle=0, lineWidth=0, lineC
  *  @param {boolean} [screenSpace]
  *  @param {CanvasRenderingContext2D|OffscreenCanvasRenderingContext2D} [context]
  *  @memberof Draw */
-function drawCircle(pos, radius=1, color=WHITE, lineWidth=0, lineColor=BLACK, useWebGL=glEnable, screenSpace=false, context)
-{ 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
@@ -3238,7 +3365,6 @@ function drawTextScreen(text, pos, size=1, color=WHITE, lineWidth=0, lineColor=B
     context.textAlign = textAlign;
     context.font = size + 'px '+ font;
     context.textBaseline = 'middle';
-    context.lineJoin = 'round';
 
     const lines = (text+'').split('\n');
     let posY = pos.y;
@@ -3438,7 +3564,7 @@ let engineFontImage;
  * const font = new FontImage;
  *
  * // draw text
- * font.drawTextScreen("LittleJS\nHello World!", vec2(200, 50));
+ * font.drawTextScreen('LittleJS\nHello World!', vec2(200, 50));
  */
 class FontImage
 {
@@ -4761,7 +4887,6 @@ function zzfxG
  * - Caches arrays of tiles to off screen canvas for fast rendering
  * - Unlimited numbers of layers, allocates canvases as needed
  * - Tile layers can be drawn to using their context with canvas2d
- * - Drawn directly to the main canvas without using WebGL
  * - Tile layers can also have collision with EngineObjects
  * @namespace TileCollision
  */
@@ -5963,7 +6088,7 @@ let glAntialias = true;
 let glShader, glPolyShader, glPolyMode, glAdditive, glBatchAdditive, glActiveTexture, glArrayBuffer, glGeometryBuffer, glPositionData, glColorData, glBatchCount;
 
 // WebGL internal constants
-const gl_ARRAY_BUFFER_SIZE = 4e5;
+const gl_ARRAY_BUFFER_SIZE = 5e5;
 const gl_INDICES_PER_INSTANCE = 11;
 const gl_INSTANCE_BYTE_STRIDE = gl_INDICES_PER_INSTANCE * 4;
 const gl_MAX_INSTANCES = gl_ARRAY_BUFFER_SIZE / gl_INSTANCE_BYTE_STRIDE | 0;
@@ -6057,9 +6182,9 @@ function glInit()
     glContext.bufferData(glContext.ARRAY_BUFFER, geometry, glContext.STATIC_DRAW);
 }
 
-function glSetInstancedMode(force=false)
+function glSetInstancedMode()
 {
-    if (!glPolyMode && !force)
+    if (!glPolyMode)
         return;
     
     // setup instanced mode
@@ -6140,7 +6265,7 @@ function glPreRender()
         1,          1,        1, 0,
         p.x,        p.y,      0, 1];
 
-    // set the same matrix for both shaders
+    // set the same transform matrix for both shaders
     const initUniform = (program, uniform, value) =>
     {
         glContext.useProgram(program);
@@ -6158,9 +6283,12 @@ function glPreRender()
         glContext.bindTexture(glContext.TEXTURE_2D, glActiveTexture);
     }
 
-    // start in instanced rendering mode with additive blending off
-    glAdditive = glBatchAdditive = glPolyMode = false;
-    glSetInstancedMode(true);
+    // start with additive blending off
+    glAdditive = glBatchAdditive = false;
+
+    // force it to enter instanced mode
+    glPolyMode = true;
+    glSetInstancedMode();
 }
 
 /** Clear the canvas and setup the viewport
@@ -6170,7 +6298,9 @@ 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);
+    glCanvas.width = drawCanvas.width;
+    glCanvas.height = drawCanvas.height;
+    glContext.viewport(0, 0, glCanvas.width, glCanvas.height);
     glContext.clear(glContext.COLOR_BUFFER_BIT);
 }
 
@@ -6305,15 +6435,17 @@ function glFlush()
         const destBlend = glBatchAdditive ? glContext.ONE : glContext.ONE_MINUS_SRC_ALPHA;
         glContext.blendFuncSeparate(glContext.SRC_ALPHA, destBlend, glContext.ONE, destBlend);
         glContext.enable(glContext.BLEND);
-        glContext.bufferSubData(glContext.ARRAY_BUFFER, 0, glPositionData);
+        
+        const byteLength = glBatchCount * 
+            (glPolyMode ? gl_INDICES_PER_POLY_VERTEX : gl_INDICES_PER_INSTANCE);
+        glContext.bufferSubData(glContext.ARRAY_BUFFER, 0, glPositionData, 0, byteLength);
         
         // draw the batch
         if (glPolyMode)
             glContext.drawArrays(glContext.TRIANGLE_STRIP, 0, glBatchCount);
         else
             glContext.drawArraysInstanced(glContext.TRIANGLE_STRIP, 0, 4, glBatchCount);
-        if (debug || showWatermark)
-            drawCount += glBatchCount;
+        drawCount += glBatchCount;
         glBatchCount = 0;
     }
     glBatchAdditive = glAdditive;
@@ -6377,7 +6509,7 @@ function glDraw(x, y, sizeX, sizeY, angle=0, uv0X=0, uv0Y=0, uv1X=1, uv1Y=1, rgb
 }
 
 /** Transform and add a polygon to the gl draw list
- *  @param {Array} points - Array of Vector2 points
+ *  @param {Array<Vector2>} points - Array of Vector2 points
  *  @param {number} rgba - Color of the polygon as a 32-bit integer
  *  @param {number} x
  *  @param {number} y
@@ -6403,7 +6535,7 @@ function glDrawPointsTransform(points, rgba, x, y, sx, sy, angle, tristrip=true)
 }
 
 /** Transform and add a polygon to the gl draw list
- *  @param {Array} points - Array of Vector2 points
+ *  @param {Array<Vector2>} points - Array of Vector2 points
  *  @param {number} rgba - Color of the polygon as a 32-bit integer
  *  @param {number} lineWidth - Width of the outline
  *  @param {number} x
@@ -6411,61 +6543,73 @@ function glDrawPointsTransform(points, rgba, x, y, sx, sy, angle, tristrip=true)
  *  @param {number} sx
  *  @param {number} sy
  *  @param {number} angle
+ *  @param {boolean} [wrap] - Should the outline connect the first and last points
  *  @memberof WebGL */
-function glDrawOutlineTransform(points, rgba, lineWidth, x, y, sx, sy, angle)
+function glDrawOutlineTransform(points, rgba, lineWidth, x, y, sx, sy, angle, wrap=true)
 {
-    const outlinePoints = glMakeOutline(points, lineWidth);
+    const outlinePoints = glMakeOutline(points, lineWidth, wrap);
     glDrawPointsTransform(outlinePoints, rgba, x, y, sx, sy, angle, false);
 }
 
-/** Add a polygon to the gl draw list
- *  @param {Array} points - Array of Vector2 points in triangle strip order
- *  @param {number} rgba - Color of the polygon as a 32-bit integer
+/** Add a list of points to the gl draw list
+ *  @param {Array<Vector2>} points - Array of Vector2 points in tri strip order
+ *  @param {number} rgba - Color as a 32-bit integer
  *  @memberof WebGL */
 function glDrawPoints(points, rgba)
 {
     if (!glEnable || points.length < 3)
         return; // needs at least 3 points to have area
     
-    // add 2 degenerate verts if batching with existing polys to separate them
-    const needsBridge = glPolyMode && glBatchCount > 0;
-    const bridgeVerts = needsBridge ? 2 : 0;
-    const vertCount = points.length + bridgeVerts;
-    
     // flush if there is not enough room or if different blend mode
-    if (!glPolyMode || glBatchCount+vertCount >= gl_MAX_POLY_VERTEXES || glBatchAdditive !== glAdditive)
+    const vertCount = points.length + 2;
+    if (glBatchCount+vertCount >= gl_MAX_POLY_VERTEXES || glBatchAdditive !== glAdditive)
         glFlush();
     glSetPolyMode();
   
+    // setup triangle strip with degenerate verts at start and end
     let offset = glBatchCount * gl_INDICES_PER_POLY_VERTEX;
-    
-    // add degenerate bridge if needed (repeat last vertex of previous poly, then first of new poly)
-    if (needsBridge)
-    {
-        // repeat last vertex from previous batch (it's at offset - 3)
-        const prevOffset = offset - 3;
-        glPositionData[offset++] = glPositionData[prevOffset];
-        glPositionData[offset++] = glPositionData[prevOffset + 1];
-        glColorData[offset++] = glColorData[prevOffset + 2];
-        
-        // repeat first vertex of new poly
-        glPositionData[offset++] = points[0].x;
-        glPositionData[offset++] = points[0].y;
+    for(let i = vertCount; i--;)
+    {
+        const j = clamp(i-1, 0, vertCount-3);
+        const point = points[j];
+        glPositionData[offset++] = point.x;
+        glPositionData[offset++] = point.y;
         glColorData[offset++] = rgba;
     }
+    glBatchCount += vertCount;
+}
+
+/** Add a list of colored points to the gl draw list
+ *  @param {Array<Vector2>} points - Array of Vector2 points in tri strip order
+ *  @param {Array<number>} pointColors - Array of 32-bit integer colors
+ *  @memberof WebGL */
+function glDrawColoredPoints(points, pointColors)
+{
+    if (!glEnable || points.length < 3)
+        return; // needs at least 3 points to have area
     
-    // write vertices - they're already in triangle strip order
-    for (const point of points)
+    // flush if there is not enough room or if different blend mode
+    const vertCount = points.length + 2;
+    if (glBatchCount+vertCount >= gl_MAX_POLY_VERTEXES || glBatchAdditive !== glAdditive)
+        glFlush();
+    glSetPolyMode();
+  
+    // setup triangle strip with degenerate verts at start and end
+    let offset = glBatchCount * gl_INDICES_PER_POLY_VERTEX;
+    for(let i = vertCount; i--;)
     {
+        const j = clamp(i-1, 0, vertCount-3);
+        const point = points[j];
+        const color = pointColors[j];
         glPositionData[offset++] = point.x;
         glPositionData[offset++] = point.y;
-        glColorData[offset++] = rgba;
+        glColorData[offset++] = color;
     }
     glBatchCount += vertCount;
 }
 
 // WebGL internal function to convert polygon to outline triangle strip
-function glMakeOutline(points, width)
+function glMakeOutline(points, width, wrap=true)
 {
     if (points.length < 2)
         return [];
@@ -6474,12 +6618,13 @@ function glMakeOutline(points, width)
     const strip = [];
     const n = points.length;
     const e = 1e-6;
+    const miterLimit = width*100;
     for (let i = 0; i < n; i++)
     {
         // for each vertex, calculate normal based on adjacent edges
-        const prev = points[(i - 1 + n) % n];
+        const prev = points[wrap ? (i - 1 + n) % n : max(i - 1, 0)];
         const curr = points[i];
-        const next = points[(i + 1) % n];
+        const next = points[wrap ? (i + 1) % n : min(i + 1, n - 1)];
         
         // direction from previous to current
         const dx1 = curr.x - prev.x;
@@ -6518,8 +6663,8 @@ function glMakeOutline(points, width)
             const dot = nx1 * nx + ny1 * ny;
             if (dot > e)
             {
-                // scale normal by miter length
-                const miterLength = 1 / dot;
+                // scale normal by miter length, clamped to miterLimit
+                const miterLength = min(1 / dot, miterLimit);
                 nx *= miterLength;
                 ny *= miterLength;
             }
@@ -6531,7 +6676,7 @@ function glMakeOutline(points, width)
         strip.push(inner);
         strip.push(outer);
     }
-    if (strip.length > 1)
+    if (strip.length > 1 && wrap)
     {
         // close the loop
         strip.push(strip[0]);
@@ -6566,10 +6711,8 @@ function glPolyStrip(points)
     if (signedArea(points) < 0)
         points = points.reverse();
 
-    // tolerance constants
-    const e = 1e-10;
-
     // check if point is inside triangle
+    const e = 1e-9;
     const pointInTriangle = (p, a, b, c)=>
     {
         const c1 = cross(a, b, p);
@@ -9305,7 +9448,7 @@ class Box2dPlugin
             case box2d.instance.b2Shape.e_circle:
             {
                 const radius = shape.get_m_radius();
-                drawCircle(pos, radius, color, lineWidth, lineColor);
+                drawCircle(pos, radius*2, color, lineWidth, lineColor);
                 break;
             }
             case box2d.instance.b2Shape.e_edge:
@@ -9456,14 +9599,14 @@ async function box2dInit()
         {
             color = getDebugColor(color);
             center = box2d.vec2FromPointer(center);
-            drawCircle(center, radius, CLEAR_WHITE, debugLineWidth, color, false, false, overlayContext);
+            drawCircle(center, radius*2, 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);
-            drawCircle(center, radius, color, debugLineWidth, color, false, false, overlayContext);
+            drawCircle(center, radius*2, color, debugLineWidth, color, false, false, overlayContext);
             drawLine(vec2(), axis, debugLineWidth, color, center, 0, false, false, overlayContext);
         };
         debugDraw.DrawTransform = function(transform)

package/examples/box2d/game.js

@@ -136,8 +136,8 @@ function gameUpdatePost()
 ///////////////////////////////////////////////////////////////////////////////
 function gameRender()
 {
-    // draw a grey square in the background without using WebGL
-    LJS.drawRect(vec2(20,8), vec2(100), hsl(0,0,.8), 0, false);
+    // draw a grey square in the background
+    LJS.drawRect(vec2(20,8), vec2(100), hsl(0,0,.8));
 
     if (Scenes.scene == 5)
     {
@@ -168,8 +168,8 @@ function gameRenderPost()
 
     // draw to overlay canvas for hud rendering
     const pos = vec2(LJS.mainCanvasSize.x/2, 50);
-    drawText('LittleJS Box2D Demo', 80, 80);
-    drawText(Scenes.sceneName, 60, 100);
+    drawText('LittleJS Box2D Demo', 65, 70);
+    drawText(Scenes.sceneName, 50, 100);
     if (Scenes.scene == 0)
     {
         drawText('Mouse Left = Grab');

package/examples/breakoutTutorial/README.md

@@ -336,7 +336,7 @@ Then increment it in the Brick.collideWithObject function.
 And change that drawTextScreen code we had commented out in gameRenderPost to display the score. We can adjust the position and size of the text to fit at the top of the screen.
 
 ```javascript
-LJS.drawTextScreen("Score " + score, vec2(LJS.mainCanvasSize.x/2, 70), 50); // show score
+LJS.drawTextScreen('Score ' + score, vec2(LJS.mainCanvasSize.x/2, 70), 50); // show score
 ```
 
 ![LittleJS Screenshot](images/9.png)

package/examples/breakoutTutorial/game.js

@@ -183,7 +183,7 @@ function gameRender()
 ///////////////////////////////////////////////////////////////////////////////
 function gameRenderPost()
 {
-    LJS.drawTextScreen("Score " + score, vec2(LJS.mainCanvasSize.x/2, 70), 50); // show score
+    LJS.drawTextScreen('Score ' + score, vec2(LJS.mainCanvasSize.x/2, 70), 50); // show score
 }
 
 ///////////////////////////////////////////////////////////////////////////////

package/examples/electron/build.js

@@ -105,7 +105,7 @@ function htmlBuildStep(filename)
     buffer += '<meta charset=utf-8>';
     buffer += '</head>';
     buffer += '<body>';
-    buffer += '<script src="index.js"></script>';
+    buffer += `<script src='index.js'></script>`;
 
     // output html file
     fs.writeFileSync(`${BUILD_FOLDER}/index.html`, buffer, {flag: 'w+'});

package/examples/empty/game.js

@@ -1,6 +1,6 @@
 /*
     Little JS Hello World Demo
-    - Just prints "Hello World!"
+    - Just prints 'Hello World!'
     - A good starting point for new projects
 */