littlejsengine 1.11.2 → 1.11.5

package/src/engineDraw.js

@@ -48,7 +48,7 @@ let overlayContext;
 let mainCanvasSize = vec2();
 
 /** Array containing texture info for batch rendering system
- *  @type {Array}
+ *  @type {Array<TextureInfo>}
  *  @memberof Draw */
 let textureInfos = [];
 
@@ -87,11 +87,13 @@ function tile(pos=vec2(), size=tileSizeDefault, textureIndex=0, padding=0)
 
     // use pos as a tile index
     const textureInfo = textureInfos[textureIndex];
-    ASSERT(textureInfo, 'Texture not loaded');
+    ASSERT(!!textureInfo, 'Texture not loaded');
     const sizePadded = size.add(vec2(padding*2));
-    const cols = textureInfo.size.x / sizePadded.x |0;
     if (typeof pos === 'number')
-        pos = vec2(pos%cols, pos/cols|0);
+    {
+        const cols = textureInfo.size.x / sizePadded.x |0;
+        pos = cols>0 ? vec2(pos%cols, pos/cols|0) : vec2();
+    }
     pos = vec2(pos.x*sizePadded.x+padding, pos.y*sizePadded.y+padding);
 
     // return a tile info object
@@ -397,24 +399,6 @@ function drawCanvas2D(pos, size, angle, mirror, drawFunction, screenSpace, conte
     context.restore();
 }
 
-/** Enable normal or additive blend mode
- *  @param {Boolean} [additive]
- *  @param {Boolean} [useWebGL=glEnable]
- *  @param {CanvasRenderingContext2D|OffscreenCanvasRenderingContext2D} [context=mainContext]
- *  @memberof Draw */
-function setBlendMode(additive, useWebGL=glEnable, context)
-{
-    ASSERT(!context || !useWebGL, 'context only supported in canvas 2D mode');
-    if (useWebGL)
-        glAdditive = additive;
-    else
-    {
-        if (!context)
-            context = mainContext;
-        context.globalCompositeOperation = additive ? 'lighter' : 'source-over';
-    }
-}
-
 /** Draw text on main canvas in world space
  *  Automatically splits new lines into rows
  *  @param {String}  text
@@ -482,6 +466,38 @@ function drawTextScreen(text, pos, size=1, color=new Color, lineWidth=0, lineCol
     });
 }
 
+/** Enable normal or additive blend mode
+ *  @param {Boolean} [additive]
+ *  @param {Boolean} [useWebGL=glEnable]
+ *  @param {CanvasRenderingContext2D|OffscreenCanvasRenderingContext2D} [context=mainContext]
+ *  @memberof Draw */
+function setBlendMode(additive, useWebGL=glEnable, context)
+{
+    ASSERT(!context || !useWebGL, 'context only supported in canvas 2D mode');
+    if (useWebGL)
+        glAdditive = additive;
+    else
+    {
+        if (!context)
+            context = mainContext;
+        context.globalCompositeOperation = additive ? 'lighter' : 'source-over';
+    }
+}
+
+/** Combines all LittleJS canvases onto the main canvas and clears them
+ *  This is necessary for things like saving a screenshot
+ *  @memberof Draw */
+function combineCanvases()
+{
+    // combine canvases
+    glCopyToContext(mainContext, true);
+    mainContext.drawImage(overlayCanvas, 0, 0);
+
+    // clear canvases
+    glClearCanvas();
+    overlayCanvas.width |= 0;
+}
+
 ///////////////////////////////////////////////////////////////////////////////
 
 let engineFontImage;
@@ -493,7 +509,7 @@ let engineFontImage;
  * - You can also use fonts from the main tile sheet
  * @example
  * // use built in font
- * const font = new ImageFont;
+ * const font = new FontImage;
  * 
  * // draw text
  * font.drawTextScreen("LittleJS\nHello World!", vec2(200, 50));
@@ -568,14 +584,14 @@ class FontImage
 }
 
 ///////////////////////////////////////////////////////////////////////////////
-// Fullscreen mode
+// Display functions
 
 /** Returns true if fullscreen mode is active
  *  @return {Boolean}
  *  @memberof Draw */
 function isFullscreen() { return !!document.fullscreenElement; }
 
-/** Toggle fullsceen mode
+/** Toggle fullscreen mode
  *  @memberof Draw */
 function toggleFullscreen()
 {
@@ -587,4 +603,13 @@ function toggleFullscreen()
     }
     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;
 }

package/src/engineExport.js

@@ -197,14 +197,16 @@ export {
 	drawEllipse,
 	drawCircle,
 	drawCanvas2D,
-	setBlendMode,
 	drawText,
 	drawTextOverlay,
 	drawTextScreen,
+	setBlendMode,
+	combineCanvases,
 	engineFontImage,
 	FontImage,
 	isFullscreen,
 	toggleFullscreen,
+	setCursor,
 	getCameraSize,
 
 	// WebGL
@@ -218,6 +220,7 @@ export {
 	glFlush,
 	glSetTexture,
 	glSetAntialias,
+	glClearCanvas,
 	glAntialias,
 	glShader, 
 	glActiveTexture, 

package/src/engineInput.js

@@ -341,7 +341,7 @@ function vibrateStop() { vibrate(0); }
 
 /** True if a touch device has been detected
  *  @memberof Input */
-const isTouchDevice = window.ontouchstart !== undefined;
+const isTouchDevice = !headlessMode && window.ontouchstart !== undefined;
 
 // touch gamepad internal variables
 let touchGamepadTimer = new Timer, touchGamepadButtons, touchGamepadStick;

package/src/engineObject.js

@@ -155,7 +155,7 @@ class EngineObject
         const oldPos = this.pos.copy();
         this.velocity.x *= this.damping;
         this.velocity.y *= this.damping;
-        if (this.mass) // dont apply gravity to static objects
+        if (this.mass) // don't apply gravity to static objects
             this.velocity.y += gravity * this.gravityScale;
         this.pos.x += this.velocity.x;
         this.pos.y += this.velocity.y;
@@ -164,7 +164,7 @@ class EngineObject
         // physics sanity checks
         ASSERT(this.angleDamping >= 0 && this.angleDamping <= 1);
         ASSERT(this.damping >= 0 && this.damping <= 1);
-        if (!enablePhysicsSolver || !this.mass) // dont do collision for static objects
+        if (!enablePhysicsSolver || !this.mass) // don't do collision for static objects
             return;
 
         const wasMovingDown = this.velocity.y < 0;
@@ -183,7 +183,7 @@ class EngineObject
             const epsilon = .001; // necessary to push slightly outside of the collision
             for (const o of engineObjectsCollide)
             {
-                // non solid objects don't collide with eachother
+                // non solid objects don't collide with each other
                 if (!this.isSolid && !o.isSolid || o.destroyed || o.parent || o == this)
                     continue;
 
@@ -243,7 +243,7 @@ class EngineObject
                         const elastic1 = o.velocity.y * (o.mass - this.mass) / (this.mass + o.mass)
                             + this.velocity.y * 2 * this.mass / (this.mass + o.mass);
 
-                        // lerp betwen elastic or inelastic based on elasticity
+                        // lerp between elastic or inelastic based on elasticity
                         this.velocity.y = lerp(elasticity, inelastic, elastic0);
                         o.velocity.y = lerp(elasticity, inelastic, elastic1);
                     }
@@ -263,7 +263,7 @@ class EngineObject
                         const elastic1 = o.velocity.x * (o.mass - this.mass) / (this.mass + o.mass)
                             + this.velocity.x * 2 * this.mass / (this.mass + o.mass);
 
-                        // lerp betwen elastic or inelastic based on elasticity
+                        // lerp between elastic or inelastic based on elasticity
                         this.velocity.x = lerp(elasticity, inelastic, elastic0);
                         o.velocity.x = lerp(elasticity, inelastic, elastic1);
                     }
@@ -329,7 +329,7 @@ class EngineObject
         if (this.destroyed)
             return;
         
-        // disconnect from parent and destroy chidren
+        // disconnect from parent and destroy children
         this.destroyed = 1;
         this.parent && this.parent.removeChild(this);
         for (const child of this.children)
@@ -354,7 +354,7 @@ class EngineObject
     
     /** Called to check if a tile collision should be resolved
      *  @param {Number}  tileData - the value of the tile at the position
-     *  @param {Vector2} pos      - tile where the collision occured
+     *  @param {Vector2} pos      - tile where the collision occurred
      *  @return {Boolean}         - true if the collision should be resolved */
     collideWithTile(tileData, pos)    { return tileData > 0; }
 
@@ -417,7 +417,7 @@ class EngineObject
         this.collideRaycast = collideRaycast;
     }
 
-    /** Returns string containg info about this object for debugging
+    /** Returns string containing info about this object for debugging
      *  @return {String} */
     toString()
     {

package/src/engineParticles.js

@@ -12,7 +12,7 @@
  * let pos = vec2(2,3);
  * let particleEmitter = new ParticleEmitter
  * (
- *     pos, 0, 1, 0, 500, PI,      // pos, angle, emitSize, emitTime, emitRate, emiteCone
+ *     pos, 0, 1, 0, 500, PI,      // pos, angle, emitSize, emitTime, emitRate, emitCone
  *     tile(0, 16),                // tileInfo
  *     rgb(1,1,1),   rgb(0,0,0),   // colorStartA, colorStartB
  *     rgb(1,1,1,0), rgb(0,0,0,0), // colorEndA, colorEndB
@@ -47,7 +47,7 @@ class ParticleEmitter extends EngineObject
      *  @param {Number} [fadeRate]          - How quick to fade particles at start/end in percent of life
      *  @param {Number} [randomness]    - Apply extra randomness percent
      *  @param {Boolean} [collideTiles] - Do particles collide against tiles
-     *  @param {Boolean} [additive]     - Should particles use addtive blend
+     *  @param {Boolean} [additive]     - Should particles use additive blend
      *  @param {Boolean} [randomColorLinear] - Should color be randomized linearly or across each component
      *  @param {Number} [renderOrder] - Render order for particles (additive is above other stuff by default)
      *  @param {Boolean}  [localSpace] - Should it be in local space of emitter (world space is default)
@@ -132,11 +132,11 @@ class ParticleEmitter extends EngineObject
         this.randomness        = randomness;
         /** @property {Boolean} - Do particles collide against tiles */
         this.collideTiles      = collideTiles;
-        /** @property {Boolean} - Should particles use addtive blend */
+        /** @property {Boolean} - Should particles use additive blend */
         this.additive          = additive;
         /** @property {Boolean} - Should it be in local space of emitter */
         this.localSpace        = localSpace;
-        /** @property {Number} - If non zero the partile is drawn as a trail, stretched in the drection of velocity */
+        /** @property {Number} - If non zero the particle is drawn as a trail, stretched in the direction of velocity */
         this.trailScale        = 0;
         /** @property {Function}   - Callback when particle is destroyed */
         this.particleDestroyCallback = undefined;
@@ -185,7 +185,7 @@ class ParticleEmitter extends EngineObject
             angle += this.angle;
         }
 
-        // randomness scales each paremeter by a percentage
+        // randomness scales each parameter by a percentage
         const randomness = this.randomness;
         const randomizeScale = (v)=> v + v*rand(randomness, -randomness);
 
@@ -214,7 +214,7 @@ class ParticleEmitter extends EngineObject
         particle.renderOrder   = this.renderOrder;
         particle.mirror        = !!randInt(2);
 
-        // call particle create callaback
+        // call particle create callback
         this.particleCreateCallback && this.particleCreateCallback(particle);
 
         // return the newly created particle
@@ -283,7 +283,7 @@ class Particle extends EngineObject
     render()
     {
         // modulate size and color
-        const p = min((time - this.spawnTime) / this.lifeTime, 1);
+        const p = this.lifeTime > 0 ? min((time - this.spawnTime) / this.lifeTime, 1) : 1;
         const radius = this.sizeStart + p * this.sizeEndDelta;
         const size = vec2(radius);
         const fadeRate = this.fadeRate/2;

package/src/engineSettings.js

@@ -106,7 +106,7 @@ let tileFixBleedScale = 0;
  *  @memberof Settings */
 let enablePhysicsSolver = true;
 
-/** Default object mass for collision calcuations (how heavy objects are)
+/** Default object mass for collision calculations (how heavy objects are)
  *  @type {Number}
  *  @default
  *  @memberof Settings */
@@ -317,7 +317,7 @@ function setFontDefault(font) { fontDefault = font; }
  *  @memberof Settings */
 function setShowSplashScreen(show) { showSplashScreen = show; }
 
-/** Set to disalbe rendering, audio, and input for servers
+/** Set to disable rendering, audio, and input for servers
  *  @param {Boolean} headless
  *  @memberof Settings */
 function setHeadlessMode(headless) { headlessMode = headless; }
@@ -347,7 +347,7 @@ function setTileFixBleedScale(scale) { tileFixBleedScale = scale; }
  *  @memberof Settings */
 function setEnablePhysicsSolver(enable) { enablePhysicsSolver = enable; }
 
-/** Set default object mass for collison calcuations
+/** Set default object mass for collision calculations
  *  @param {Number} mass
  *  @memberof Settings */
 function setObjectDefaultMass(mass) { objectDefaultMass = mass; }
@@ -417,7 +417,7 @@ function setTouchGamepadEnable(enable) { touchGamepadEnable = enable; }
  *  @memberof Settings */
 function setTouchGamepadAnalog(analog) { touchGamepadAnalog = analog; }
 
-/** Set size of virutal gamepad for touch devices in pixels
+/** Set size of virtual gamepad for touch devices in pixels
  *  @param {Number} size
  *  @memberof Settings */
 function setTouchGamepadSize(size) { touchGamepadSize = size; }
@@ -444,7 +444,7 @@ function setSoundVolume(volume)
 {
     soundVolume = volume;
     if (soundEnable && !headlessMode && audioGainNode)
-        audioGainNode.gain.value = volume; // update gain immediatly
+        audioGainNode.gain.value = volume; // update gain immediately
 }
 
 /** Set default range where sound no longer plays

package/src/engineTileLayer.js

@@ -239,6 +239,10 @@ class TileLayer extends EngineObject
         
         // draw the entire cached level onto the canvas
         const pos = worldToScreen(this.pos.add(vec2(0,this.size.y*this.scale.y)));
+        
+        // fix canvas jitter in some browsers if position is not an integer
+        pos.x |= 0; pos.y |= 0;
+
         (this.isOverlay ? overlayContext : mainContext).drawImage
         (
             this.canvas, pos.x, pos.y,
@@ -301,7 +305,7 @@ class TileLayer extends EngineObject
 
     /** Draw the tile at a given position in the tile grid
      *  This can be used to clear out tiles when they are destroyed
-     *  Tiles can also be redrawn if isinde a redrawStart/End block
+     *  Tiles can also be redrawn if inside a redrawStart/End block
      *  @param {Vector2} layerPos 
      *  @param {Boolean} [clear] - should the old tile be cleared out
      */
@@ -326,7 +330,7 @@ class TileLayer extends EngineObject
         }
     }
 
-    /** Draw directly to the 2D canvas in world space (bipass webgl)
+    /** Draw directly to the 2D canvas in world space (bypass webgl)
      *  @param {Vector2}  pos
      *  @param {Vector2}  size
      *  @param {Number}   angle

package/src/engineUtilities.js

@@ -16,7 +16,7 @@
  *  @memberof Utilities */
 const PI = Math.PI;
 
-/** Returns absoulte value of value passed in
+/** Returns absolute value of value passed in
  *  @param {Number} value
  *  @return {Number}
  *  @memberof Utilities */
@@ -49,7 +49,7 @@ function sign(value) { return Math.sign(value); }
  *  @memberof Utilities */
 function mod(dividend, divisor=1) { return ((dividend % divisor) + divisor) % divisor; }
 
-/** Clamps the value beween max and min
+/** Clamps the value between max and min
  *  @param {Number} value
  *  @param {Number} [min]
  *  @param {Number} [max]
@@ -485,7 +485,7 @@ class Vector2
         return new Vector2(this.x*c - this.y*s, this.x*s + this.y*c);
     }
 
-    /** Set the integer direction of this vector, corrosponding to multiples of 90 degree rotation (0-3)
+    /** Set the integer direction of this vector, corresponding to multiples of 90 degree rotation (0-3)
      * @param {Number} [direction]
      * @param {Number} [length] */
     setDirection(direction, length=1)
@@ -496,7 +496,7 @@ class Vector2
             direction%2 ? 0 : direction ? -length : length);
     }
 
-    /** Returns the integer direction of this vector, corrosponding to multiples of 90 degree rotation (0-3)
+    /** Returns the integer direction of this vector, corresponding to multiples of 90 degree rotation (0-3)
      * @return {Number} */
     direction()
     { return abs(this.x) > abs(this.y) ? this.x < 0 ? 3 : 1 : this.y < 0 ? 2 : 0; }
@@ -881,7 +881,7 @@ const MAGENTA = rgb(1,0,1);
  * a.set(3);             // sets the timer to 3 seconds
  *
  * let b = new Timer(1); // creates a timer with 1 second left
- * b.unset();            // unsets the timer
+ * b.unset();            // unset the timer
  */
 class Timer
 {

package/src/engineWebGL.js

@@ -22,7 +22,7 @@ let glCanvas;
  *  @memberof WebGL */
 let glContext;
 
-/** Shoule webgl be setup with antialiasing, must be set before calling engineInit
+/** Should webgl be setup with anti-aliasing? must be set before calling engineInit
  *  @type {Boolean}
  *  @memberof WebGL */
 let glAntialias = true;
@@ -30,9 +30,15 @@ let glAntialias = true;
 // WebGL internal variables not exposed to documentation
 let glShader, glActiveTexture, glArrayBuffer, glGeometryBuffer, glPositionData, glColorData, glInstanceCount, glAdditive, glBatchAdditive;
 
+// WebGL internal constants 
+const gl_MAX_INSTANCES = 1e4;
+const gl_INDICES_PER_INSTANCE = 11;
+const gl_INSTANCE_BYTE_STRIDE = gl_INDICES_PER_INSTANCE * 4;
+const gl_INSTANCE_BUFFER_SIZE = gl_MAX_INSTANCES * gl_INSTANCE_BYTE_STRIDE;
+
 ///////////////////////////////////////////////////////////////////////////////
 
-// Initalize WebGL, called automatically by the engine
+// Initialize WebGL, called automatically by the engine
 function glInit()
 {
     if (!glEnable || headlessMode) return;
@@ -82,8 +88,8 @@ function glInit()
 
     // create the geometry buffer, triangle strip square
     const geometry = new Float32Array([glInstanceCount=0,0,1,0,0,1,1,1]);
-    glContext.bindBuffer(gl_ARRAY_BUFFER, glGeometryBuffer);
-    glContext.bufferData(gl_ARRAY_BUFFER, geometry, gl_STATIC_DRAW);
+    glContext.bindBuffer(glContext.ARRAY_BUFFER, glGeometryBuffer);
+    glContext.bufferData(glContext.ARRAY_BUFFER, geometry, glContext.STATIC_DRAW);
 }
 
 // Setup render each frame, called automatically by engine
@@ -91,15 +97,12 @@ function glPreRender()
 {
     if (!glEnable || headlessMode) return;
 
-    // clear and set to same size as main canvas
-    glContext.viewport(0, 0, glCanvas.width=mainCanvas.width, glCanvas.height=mainCanvas.height);
-    glContext.clear(gl_COLOR_BUFFER_BIT);
-
-    // set up the shader
+    // set up the shader and canvas
+    glClearCanvas();
     glContext.useProgram(glShader);
-    glContext.activeTexture(gl_TEXTURE0);
+    glContext.activeTexture(glContext.TEXTURE0);
     if (textureInfos[0])
-        glContext.bindTexture(gl_TEXTURE_2D, glActiveTexture = textureInfos[0].glTexture);
+        glContext.bindTexture(glContext.TEXTURE_2D, glActiveTexture = textureInfos[0].glTexture);
 
     // set vertex attributes
     let offset = glAdditive = glBatchAdditive = 0;
@@ -114,15 +117,15 @@ function glPreRender()
         glContext.vertexAttribDivisor(location, divisor);
         offset += size*typeSize;
     }
-    glContext.bindBuffer(gl_ARRAY_BUFFER, glGeometryBuffer);
-    initVertexAttribArray('g', gl_FLOAT, 0, 2); // geometry
-    glContext.bindBuffer(gl_ARRAY_BUFFER, glArrayBuffer);
-    glContext.bufferData(gl_ARRAY_BUFFER, gl_INSTANCE_BUFFER_SIZE, gl_DYNAMIC_DRAW);
-    initVertexAttribArray('p', gl_FLOAT, 4, 4); // position & size
-    initVertexAttribArray('u', gl_FLOAT, 4, 4); // texture coords
-    initVertexAttribArray('c', gl_UNSIGNED_BYTE, 1, 4); // color
-    initVertexAttribArray('a', gl_UNSIGNED_BYTE, 1, 4); // additiveColor
-    initVertexAttribArray('r', gl_FLOAT, 4, 1); // rotation
+    glContext.bindBuffer(glContext.ARRAY_BUFFER, glGeometryBuffer);
+    initVertexAttribArray('g', glContext.FLOAT, 0, 2); // geometry
+    glContext.bindBuffer(glContext.ARRAY_BUFFER, glArrayBuffer);
+    glContext.bufferData(glContext.ARRAY_BUFFER, gl_INSTANCE_BUFFER_SIZE, glContext.DYNAMIC_DRAW);
+    initVertexAttribArray('p', glContext.FLOAT, 4, 4); // position & size
+    initVertexAttribArray('u', glContext.FLOAT, 4, 4); // texture coords
+    initVertexAttribArray('c', glContext.UNSIGNED_BYTE, 1, 4); // color
+    initVertexAttribArray('a', glContext.UNSIGNED_BYTE, 1, 4); // additiveColor
+    initVertexAttribArray('r', glContext.FLOAT, 4, 1); // rotation
 
     // build the transform matrix
     const s = vec2(2*cameraScale).divide(mainCanvasSize);
@@ -137,6 +140,15 @@ function glPreRender()
     );
 }
 
+/** Clear the canvas and setup the viewport
+ *  @memberof WebGL */
+function glClearCanvas()
+{
+    // clear and set to same size as main canvas
+    glContext.viewport(0, 0, glCanvas.width=mainCanvas.width, glCanvas.height=mainCanvas.height);
+    glContext.clear(glContext.COLOR_BUFFER_BIT);
+}
+
 /** 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
@@ -148,7 +160,7 @@ function glSetTexture(texture)
         return;
 
     glFlush();
-    glContext.bindTexture(gl_TEXTURE_2D, glActiveTexture = texture);
+    glContext.bindTexture(glContext.TEXTURE_2D, glActiveTexture = texture);
 }
 
 /** Compile WebGL shader of the given type, will throw errors if in debug mode
@@ -164,7 +176,7 @@ function glCompileShader(source, type)
     glContext.compileShader(shader);
 
     // check for errors
-    if (debug && !glContext.getShaderParameter(shader, gl_COMPILE_STATUS))
+    if (debug && !glContext.getShaderParameter(shader, glContext.COMPILE_STATUS))
         throw glContext.getShaderInfoLog(shader);
     return shader;
 }
@@ -178,12 +190,12 @@ function glCreateProgram(vsSource, fsSource)
 {
     // build the program
     const program = glContext.createProgram();
-    glContext.attachShader(program, glCompileShader(vsSource, gl_VERTEX_SHADER));
-    glContext.attachShader(program, glCompileShader(fsSource, gl_FRAGMENT_SHADER));
+    glContext.attachShader(program, glCompileShader(vsSource, glContext.VERTEX_SHADER));
+    glContext.attachShader(program, glCompileShader(fsSource, glContext.FRAGMENT_SHADER));
     glContext.linkProgram(program);
 
     // check for errors
-    if (debug && !glContext.getProgramParameter(program, gl_LINK_STATUS))
+    if (debug && !glContext.getProgramParameter(program, glContext.LINK_STATUS))
         throw glContext.getProgramInfoLog(program);
     return program;
 }
@@ -196,20 +208,20 @@ function glCreateTexture(image)
 {
     // build the texture
     const texture = glContext.createTexture();
-    glContext.bindTexture(gl_TEXTURE_2D, texture);
+    glContext.bindTexture(glContext.TEXTURE_2D, texture);
     if (image && image.width)
-        glContext.texImage2D(gl_TEXTURE_2D, 0, gl_RGBA, gl_RGBA, gl_UNSIGNED_BYTE, image);
+        glContext.texImage2D(glContext.TEXTURE_2D, 0, glContext.RGBA, glContext.RGBA, glContext.UNSIGNED_BYTE, image);
     else
     {
         // create a white texture
         const whitePixel = new Uint8Array([255, 255, 255, 255]);
-        glContext.texImage2D(gl_TEXTURE_2D, 0, gl_RGBA, 1, 1, 0, gl_RGBA, gl_UNSIGNED_BYTE, whitePixel);
+        glContext.texImage2D(glContext.TEXTURE_2D, 0, glContext.RGBA, 1, 1, 0, glContext.RGBA, glContext.UNSIGNED_BYTE, whitePixel);
     }
 
     // use point filtering for pixelated rendering
-    const filter = tilesPixelated ? gl_NEAREST : gl_LINEAR;
-    glContext.texParameteri(gl_TEXTURE_2D, gl_TEXTURE_MIN_FILTER, filter);
-    glContext.texParameteri(gl_TEXTURE_2D, gl_TEXTURE_MAG_FILTER, filter);
+    const filter = tilesPixelated ? glContext.NEAREST : glContext.LINEAR;
+    glContext.texParameteri(glContext.TEXTURE_2D, glContext.TEXTURE_MIN_FILTER, filter);
+    glContext.texParameteri(glContext.TEXTURE_2D, glContext.TEXTURE_MAG_FILTER, filter);
     return texture;
 }
 
@@ -219,20 +231,20 @@ function glFlush()
 {
     if (!glInstanceCount) return;
 
-    const destBlend = glBatchAdditive ? gl_ONE : gl_ONE_MINUS_SRC_ALPHA;
-    glContext.blendFuncSeparate(gl_SRC_ALPHA, destBlend, gl_ONE, destBlend);
-    glContext.enable(gl_BLEND);
+    const destBlend = glBatchAdditive ? glContext.ONE : glContext.ONE_MINUS_SRC_ALPHA;
+    glContext.blendFuncSeparate(glContext.SRC_ALPHA, destBlend, glContext.ONE, destBlend);
+    glContext.enable(glContext.BLEND);
 
     // draw all the sprites in the batch and reset the buffer
-    glContext.bufferSubData(gl_ARRAY_BUFFER, 0, glPositionData);
-    glContext.drawArraysInstanced(gl_TRIANGLE_STRIP, 0, 4, glInstanceCount);
+    glContext.bufferSubData(glContext.ARRAY_BUFFER, 0, glPositionData);
+    glContext.drawArraysInstanced(glContext.TRIANGLE_STRIP, 0, 4, glInstanceCount);
     if (showWatermark)
         drawCount += glInstanceCount;
     glInstanceCount = 0;
     glBatchAdditive = glAdditive;
 }
 
-/** Draw any sprites still in the buffer, copy to main canvas and clear
+/** Draw any sprites still in the buffer and copy to main canvas
  *  @param {CanvasRenderingContext2D|OffscreenCanvasRenderingContext2D} context
  *  @param {Boolean} [forceDraw]
  *  @memberof WebGL */
@@ -247,7 +259,7 @@ function glCopyToContext(context, forceDraw=false)
         context.drawImage(glCanvas, 0, 0);
 }
 
-/** Set antialiasing for webgl canvas
+/** Set anti-aliasing for webgl canvas
  *  @param {Boolean} [antialias]
  *  @memberof WebGL */
 function glSetAntialias(antialias=true)
@@ -277,7 +289,7 @@ function glDraw(x, y, sizeX, sizeY, angle, uv0X, uv0Y, uv1X, uv1Y, rgba, rgbaAdd
     if (glInstanceCount >= gl_MAX_INSTANCES || glBatchAdditive != glAdditive)
         glFlush();
 
-    let offset = glInstanceCount * gl_INDICIES_PER_INSTANCE;
+    let offset = glInstanceCount++ * gl_INDICES_PER_INSTANCE;
     glPositionData[offset++] = x;
     glPositionData[offset++] = y;
     glPositionData[offset++] = sizeX;
@@ -289,38 +301,4 @@ function glDraw(x, y, sizeX, sizeY, angle, uv0X, uv0Y, uv1X, uv1Y, rgba, rgbaAdd
     glColorData[offset++] = rgba;
     glColorData[offset++] = rgbaAdditive;
     glPositionData[offset++] = angle;
-    glInstanceCount++;
-}
-
-///////////////////////////////////////////////////////////////////////////////
-// store gl constants as integers so their name doesn't use space in minifed
-const
-gl_ONE = 1,
-gl_TRIANGLE_STRIP = 5,
-gl_SRC_ALPHA = 770,
-gl_ONE_MINUS_SRC_ALPHA = 771,
-gl_BLEND = 3042,
-gl_TEXTURE_2D = 3553,
-gl_UNSIGNED_BYTE = 5121,
-gl_FLOAT = 5126,
-gl_RGBA = 6408,
-gl_NEAREST = 9728,
-gl_LINEAR = 9729,
-gl_TEXTURE_MAG_FILTER = 10240,
-gl_TEXTURE_MIN_FILTER = 10241,
-gl_COLOR_BUFFER_BIT = 16384,
-gl_TEXTURE0 = 33984,
-gl_ARRAY_BUFFER = 34962,
-gl_STATIC_DRAW = 35044,
-gl_DYNAMIC_DRAW = 35048,
-gl_FRAGMENT_SHADER = 35632,
-gl_VERTEX_SHADER = 35633,
-gl_COMPILE_STATUS = 35713,
-gl_LINK_STATUS = 35714,
-gl_UNPACK_FLIP_Y_WEBGL = 37440,
-
-// constants for batch rendering
-gl_INDICIES_PER_INSTANCE = 11,
-gl_MAX_INSTANCES = 1e4,
-gl_INSTANCE_BYTE_STRIDE = gl_INDICIES_PER_INSTANCE * 4, // 11 * 4
-gl_INSTANCE_BUFFER_SIZE = gl_MAX_INSTANCES * gl_INSTANCE_BYTE_STRIDE;
+}