npm - littlejsengine - Versions diffs - 1.6.4 → 1.6.6 - Mend

littlejsengine 1.6.4 → 1.6.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (33) hide show

package/README.md +13 -9
package/build/littlejs.d.ts +92 -88
package/build/littlejs.esm.js +312 -251
package/build/littlejs.esm.min.js +1 -1
package/build/littlejs.js +270 -206
package/build/littlejs.min.js +1 -1
package/build/littlejs.release.js +271 -203
package/examples/breakout/index.html +3 -3
package/examples/breakoutTutorial/index.html +2 -2
package/examples/favicon.png +0 -0
package/examples/module/index.html +1 -1
package/examples/particles/index.html +1 -1
package/examples/platformer/index.html +6 -6
package/examples/puzzle/game.js +1 -1
package/examples/puzzle/index.html +2 -2
package/examples/starter/index.html +13 -13
package/examples/stress/index.html +1 -1
package/examples/typescript/index.html +1 -1
package/package.json +2 -2
package/src/engine.js +29 -30
package/src/engineAudio.js +42 -18
package/src/engineDebug.js +17 -22
package/src/engineDraw.js +24 -24
package/src/engineExport.js +42 -45
package/src/engineInput.js +32 -19
package/src/engineMedals.js +31 -8
package/src/engineObject.js +21 -21
package/src/engineParticles.js +3 -6
package/src/engineRelease.js +18 -19
package/src/engineSettings.js +4 -4
package/src/engineTileLayer.js +18 -14
package/src/engineUtilities.js +41 -32
package/src/engineWebGL.js +8 -8

package/examples/breakout/index.html CHANGED Viewed

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

package/examples/breakoutTutorial/index.html CHANGED Viewed

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

package/examples/favicon.png CHANGED Viewed

Binary file

package/examples/module/index.html CHANGED Viewed

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

package/examples/particles/index.html CHANGED Viewed

@@ -16,7 +16,7 @@ button
 </style>
 </head><body>
-<script src=../../build/littlejs.js?126></script>
+<script src=../../build/littlejs.js?166></script>
 <script>
 'use strict';

package/examples/platformer/index.html CHANGED Viewed

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

package/examples/puzzle/game.js CHANGED Viewed

@@ -6,7 +6,7 @@
 'use strict';
-cavasPixelated = 0; // do not use pixelated rendering
+canvasPixelated = 0; // do not use pixelated rendering
 const fallTime = .2;
 const cameraOffset = vec2(0,-.5);

package/examples/puzzle/index.html CHANGED Viewed

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

package/examples/starter/index.html CHANGED Viewed

@@ -7,21 +7,21 @@
 </head><body>
 <!-- LittleJS engine scripts -->
-<script src=../../src/engineDebug.js?126></script>
-<script src=../../src/engineUtilities.js?126></script>
-<script src=../../src/engineSettings.js?126></script>
-<script src=../../src/engineObject.js?126></script>
-<script src=../../src/engineDraw.js?126></script>
-<script src=../../src/engineInput.js?126></script>
-<script src=../../src/engineAudio.js?126></script>
-<script src=../../src/engineTileLayer.js?126></script>
-<script src=../../src/engineParticles.js?126></script>
-<script src=../../src/engineMedals.js?126></script>
-<script src=../../src/engineWebGL.js?126></script>
-<script src=../../src/engine.js?126></script>
+<script src=../../src/engineDebug.js?166></script>
+<script src=../../src/engineUtilities.js?166></script>
+<script src=../../src/engineSettings.js?166></script>
+<script src=../../src/engineObject.js?166></script>
+<script src=../../src/engineDraw.js?166></script>
+<script src=../../src/engineInput.js?166></script>
+<script src=../../src/engineAudio.js?166></script>
+<script src=../../src/engineTileLayer.js?166></script>
+<script src=../../src/engineParticles.js?166></script>
+<script src=../../src/engineMedals.js?166></script>
+<script src=../../src/engineWebGL.js?166></script>
+<script src=../../src/engine.js?166></script>
 <!-- You can also include all engine scripts like this... -->
 <!-- <script src=engine/engine.all.js></script> -->
 <!-- Add your game scripts here -->
-<script src=game.js?126></script>
+<script src=game.js?166></script>

package/examples/stress/index.html CHANGED Viewed

@@ -6,7 +6,7 @@
 <link rel=icon type=image/png href=../favicon.png>
 </head><body>
-<script src=../../build/littlejs.min.js?126></script>
+<script src=../../build/littlejs.min.js?166></script>
 <script>
 /*

package/examples/typescript/index.html CHANGED Viewed

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

package/package.json CHANGED Viewed

@@ -1,8 +1,8 @@
 {
   "name": "littlejsengine",
-  "version": "1.6.4",
+  "version": "1.6.6",
   "description": "LittleJS - Tiny and Fast HTML5 Game Engine",
-  "main": "engine/engine.all.module.js",
+  "main": "build/littlejs.esm.js",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/KilledByAPixel/LittleJS.git"

package/src/engine.js CHANGED Viewed

@@ -1,24 +1,20 @@
-/*
-    LittleJS - The Tiny JavaScript Game Engine That Can!
-    MIT License - Copyright 2021 Frank Force
-    Engine Features
-    - Object oriented system with base class engine object
-    - Base class object handles update, physics, collision, rendering, etc
-    - Engine helper classes and functions like Vector2, Color, and Timer
-    - Super fast rendering system for tile sheets
-    - Sound effects audio with zzfx and music with zzfxm
-    - Input processing system with gamepad and touchscreen support
-    - Tile layer rendering and collision system
-    - Particle effect system
-    - Medal system tracks and displays achievements
-    - Debug tools and debug rendering system
-    - Post processing effects
-    - Call engineInit() to start it up!
-*/
-/**
- * LittleJS Engine Globals
+/**
+ * LittleJS - The Tiny JavaScript Game Engine That Can!
+ * MIT License - Copyright 2021 Frank Force
+ *
+ * Engine Features
+ * - Object oriented system with base class engine object
+ * - Base class object handles update, physics, collision, rendering, etc
+ * - Engine helper classes and functions like Vector2, Color, and Timer
+ * - Super fast rendering system for tile sheets
+ * - Sound effects audio with zzfx and music with zzfxm
+ * - Input processing system with gamepad and touchscreen support
+ * - Tile layer rendering and collision system
+ * - Particle effect system
+ * - Medal system tracks and displays achievements
+ * - Debug tools and debug rendering system
+ * - Post processing effects
+ * - Call engineInit() to start it up!
  * @namespace Engine
  */
@@ -34,7 +30,7 @@ const engineName = 'LittleJS';
  *  @type {String}
  *  @default
  *  @memberof Engine */
-const engineVersion = '1.6.4';
+const engineVersion = '1.6.6';
 /** Frames per second to update objects
  *  @type {Number}
@@ -104,10 +100,11 @@ function engineInit(gameInit, gameUpdate, gameUpdatePost, gameRender, gameRender
         debug && (tileImage.onload=()=>ASSERT(1)); // tile sheet can not reloaded
         // setup html
-        const styleBody = 'margin:0;overflow:hidden;background:#000' + // fill the window
-            ';touch-action:none' + // prevent mobile pinch to resize
-            ';user-select:none' +  // prevent mobile hold to select
-            ';-webkit-user-select:none'; // compatibility for ios
+        const styleBody = 'margin:0;overflow:hidden;' + // fill the window
+            'background:#000;' +        // set background color
+            'touch-action:none;' +      // prevent mobile pinch to resize
+            'user-select:none;' +       // prevent mobile hold to select
+            '-webkit-user-select:none'; // compatibility for ios
         document.body.style = styleBody;
         document.body.appendChild(mainCanvas = document.createElement('canvas'));
         mainContext = mainCanvas.getContext('2d');
@@ -120,8 +117,10 @@ function engineInit(gameInit, gameUpdate, gameUpdatePost, gameRender, gameRender
         document.body.appendChild(overlayCanvas = document.createElement('canvas'));
         overlayContext = overlayCanvas.getContext('2d');
-        // set canvas style to fill the window
-        const styleCanvas = 'position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)';
+        // set canvas style
+        const styleCanvas = 'position:absolute;' +
+            'top:50%;left:50%;transform:translate(-50%,-50%);' + // center the canvas
+            (canvasPixelated?'image-rendering:pixelated':'');     // set pixelated rendering
         (glCanvas||mainCanvas).style = mainCanvas.style = overlayCanvas.style = styleCanvas;
         gameInit();
@@ -254,7 +253,7 @@ function enginePreRender()
     mainCanvasSize = vec2(mainCanvas.width, mainCanvas.height);
     // disable smoothing for pixel art
-    mainContext.imageSmoothingEnabled = !cavasPixelated;
+    mainContext.imageSmoothingEnabled = !canvasPixelated;
     // setup gl rendering if enabled
     glEnable && glPreRender();
@@ -268,7 +267,7 @@ function engineObjectsUpdate()
     engineObjectsCollide = engineObjects.filter(o=>o.collideSolidObjects);
     // recursive object update
-    const updateObject = (o)=>
+    function updateObject(o)
     {
         if (!o.destroyed)
         {

package/src/engineAudio.js CHANGED Viewed

@@ -1,19 +1,20 @@
 /**
  * LittleJS Audio System
- * <br> - <a href=https://killedbyapixel.github.io/ZzFX/>ZzFX Sound Effects</a>
- * <br> - <a href=https://keithclark.github.io/ZzFXM/>ZzFXM Music</a>
- * <br> - Caches sounds and music for fast playback
- * <br> - Can attenuate and apply stereo panning to sounds
- * <br> - Ability to play mp3, ogg, and wave files
- * <br> - Speech synthesis wrapper functions
+ * - <a href=https://killedbyapixel.github.io/ZzFX/>ZzFX Sound Effects</a> - Sound Effect Generator
+ * - <a href=https://keithclark.github.io/ZzFXM/>ZzFXM Music</a> - Music System
+ * - Caches sounds and music for fast playback
+ * - Can attenuate and apply stereo panning to sounds
+ * - Ability to play mp3, ogg, and wave files
+ * - Speech synthesis wrapper functions
+ * @namespace Audio
  */
 'use strict';
 /**
  * Sound Object - Stores a zzfx sound for later use and can be played positionally
- * <br>
- * <br><b><a href=https://killedbyapixel.github.io/ZzFX/>Create sounds using the ZzFX Sound Designer.</a></b>
+ *
+ * <a href=https://killedbyapixel.github.io/ZzFX/>Create sounds using the ZzFX Sound Designer.</a>
  * @example
  * // create a sound
  * const sound_example = new Sound([.5,.5]);
@@ -97,8 +98,8 @@ class Sound
 /**
  * Music Object - Stores a zzfx music track for later use
- * <br>
- * <br><b><a href=https://keithclark.github.io/ZzFXM/>Create music with the ZzFXM tracker.</a></b>
+ *
+ * <a href=https://keithclark.github.io/ZzFXM/>Create music with the ZzFXM tracker.</a>
  * @example
  * // create some music
  * const music_example = new Music(
@@ -208,14 +209,15 @@ function speak(text, language='', volume=1, rate=1, pitch=1)
 /** Stop all queued speech
  *  @memberof Audio */
-const speakStop = ()=> speechSynthesis && speechSynthesis.cancel();
+function speakStop() {speechSynthesis && speechSynthesis.cancel();}
 /** Get frequency of a note on a musical scale
  *  @param {Number} semitoneOffset - How many semitones away from the root note
  *  @param {Number} [rootNoteFrequency=220] - Frequency at semitone offset 0
  *  @return {Number} - The frequency of the note
  *  @memberof Audio */
-const getNoteFrequency = (semitoneOffset, rootFrequency=220)=> rootFrequency * 2**(semitoneOffset/12);
+function getNoteFrequency(semitoneOffset, rootFrequency=220)
+{ return rootFrequency * 2**(semitoneOffset/12); }
 ///////////////////////////////////////////////////////////////////////////////
@@ -273,12 +275,12 @@ function playSamples(sampleChannels, volume=1, rate=1, pan=0, loop=0)
 // ZzFXMicro - Zuper Zmall Zound Zynth - v1.2.0 by Frank Force
 /** Generate and play a ZzFX sound
- *  <br>
- *  <br><b><a href=https://killedbyapixel.github.io/ZzFX/>Create sounds using the ZzFX Sound Designer.</a></b>
+ *
+ *  <a href=https://killedbyapixel.github.io/ZzFX/>Create sounds using the ZzFX Sound Designer.</a>
  *  @param {Array} zzfxSound - Array of ZzFX parameters, ex. [.5,.5]
- *  @return {Array} - Array of audio samples
+ *  @return {AudioBufferSourceNode} - The audio node of the sound played
  *  @memberof Audio */
-const zzfx = (...zzfxSound) => playSamples([zzfxG(...zzfxSound)]);
+function zzfx(...zzfxSound) { return playSamples([zzfxG(...zzfxSound)]); }
 /** Sample rate used for all ZzFX sounds
  *  @default 44100
@@ -286,7 +288,29 @@ const zzfx = (...zzfxSound) => playSamples([zzfxG(...zzfxSound)]);
 const zzfxR = 44100;
 /** Generate samples for a ZzFX sound
- *  @memberof Audio */
+ *  @param {Number}  [volume=1] - Volume scale (percent)
+ *  @param {Number}  [randomness=.05] - How much to randomize frequency (percent Hz)
+ *  @param {Number}  [frequency=220] - Frequency of sound (Hz)
+ *  @param {Number}  [attack=0] - Attack time, how fast sound starts (seconds)
+ *  @param {Number}  [sustain=0] - Sustain time, how long sound holds (seconds)
+ *  @param {Number}  [release=.1] - Release time, how fast sound fades out (seconds)
+ *  @param {Number}  [shape=0] - Shape of the sound wave
+ *  @param {Number}  [shapeCurve=1] - Squarenes of wave (0=square, 1=normal, 2=pointy)
+ *  @param {Number}  [slide=0] - How much to slide frequency (kHz/s)
+ *  @param {Number}  [deltaSlide=0] - How much to change slide (kHz/s/s)
+ *  @param {Number}  [pitchJump=0] - Frequency of pitch jump (Hz)
+ *  @param {Number}  [pitchJumpTime=0] - Time of pitch jump (seconds)
+ *  @param {Number}  [repeatTime=0] - Resets some parameters periodically (seconds)
+ *  @param {Number}  [noise=0] - How much random noise to add (percent)
+ *  @param {Number}  [modulation=0] - Frequency of modulation wave, negative flips phase (Hz)
+ *  @param {Number}  [bitCrush=0] - Resamples at a lower frequency in (samples*100)
+ *  @param {Number}  [delay=0] - Overlap sound with itself for reverb and flanger effects (seconds)
+ *  @param {Number}  [sustainVolume=1] - Volume level for sustain (percent)
+ *  @param {Number}  [decay=0] - Decay time, how long to reach sustain after attack (seconds)
+ *  @param {Number}  [tremolo=0] - Trembling effect, rate controlled by repeat time (precent)
+ *  @return {Array} - Array of audio samples
+ *  @memberof Audio
+ */
 function zzfxG
 (
     // parameters
@@ -376,7 +400,7 @@ function zzfxG
  *  @param {Array} patterns - Array of pattern data
  *  @param {Array} sequence - Array of pattern indexes
  *  @param {Number} [BPM=125] - Playback speed of the song in BPM
- *  @returns {Array} - Left and right channel sample data
+ *  @return {Array} - Left and right channel sample data
  *  @memberof Audio */
 function zzfxM(instruments, patterns, sequence, BPM = 125)
 {

package/src/engineDebug.js CHANGED Viewed

@@ -1,15 +1,10 @@
-/*
-    LittleJS - Debug Build
-    MIT License - Copyright 2021 Frank Force
-*/
 /**
  * LittleJS Debug System
- * <br> - Press ~ to show debug overlay with mouse pick
- * <br> - Number keys toggle debug functions
- * <br> - +/- apply time scale
- * <br> - Debug primitive rendering
- * <br> - Save a 2d canvas as an image
+ * - Press ~ to show debug overlay with mouse pick
+ * - Number keys toggle debug functions
+ * - +/- apply time scale
+ * - Debug primitive rendering
+ * - Save a 2d canvas as an image
  * @namespace Debug
  */
@@ -62,7 +57,7 @@ debugParticles = 0, debugGamepads = 0, debugMedals = 0, debugTakeScreenshot, dow
  *  @param {Boolean} assertion
  *  @param {Object}  output
  *  @memberof Debug */
-const ASSERT = enableAsserts ? (...assert)=> console.assert(...assert) : ()=>{};
+function ASSERT(...assert) { enableAsserts && console.assert(...assert); }
 /** Draw a debug rectangle in world space
  *  @param {Vector2} pos
@@ -72,7 +67,7 @@ const ASSERT = enableAsserts ? (...assert)=> console.assert(...assert) : ()=>{};
  *  @param {Number}  [angle=0]
  *  @param {Boolean} [fill=false]
  *  @memberof Debug */
-const debugRect = (pos, size=vec2(), color='#fff', time=0, angle=0, fill=false)=>
+function debugRect(pos, size=vec2(), color='#fff', time=0, angle=0, fill=false)
 {
     ASSERT(typeof color == 'string'); // pass in regular html strings as colors
     debugPrimitives.push({pos, size:vec2(size), color, time:new Timer(time), angle, fill});
@@ -85,7 +80,7 @@ const debugRect = (pos, size=vec2(), color='#fff', time=0, angle=0, fill=false)=
  *  @param {Number}  [time=0]
  *  @param {Boolean} [fill=false]
  *  @memberof Debug */
-const debugCircle = (pos, radius=0, color='#fff', time=0, fill=false)=>
+function debugCircle(pos, radius=0, color='#fff', time=0, fill=false)
 {
     ASSERT(typeof color == 'string'); // pass in regular html strings as colors
     debugPrimitives.push({pos, size:radius, color, time:new Timer(time), angle:0, fill});
@@ -97,7 +92,7 @@ const debugCircle = (pos, radius=0, color='#fff', time=0, fill=false)=>
  *  @param {Number}  [time=0]
  *  @param {Number}  [angle=0]
  *  @memberof Debug */
-const debugPoint = (pos, color, time, angle)=> debugRect(pos, 0, color, time, angle);
+function debugPoint(pos, color, time, angle) {debugRect(pos, 0, color, time, angle);}
 /** Draw a debug line in world space
  *  @param {Vector2} posA
@@ -106,7 +101,7 @@ const debugPoint = (pos, color, time, angle)=> debugRect(pos, 0, color, time, an
  *  @param {Number}  [thickness=.1]
  *  @param {Number}  [time=0]
  *  @memberof Debug */
-const debugLine = (posA, posB, color, thickness=.1, time)=>
+function debugLine(posA, posB, color, thickness=.1, time)
 {
     const halfDelta = vec2((posB.x - posA.x)/2, (posB.y - posA.y)/2);
     const size = vec2(thickness, halfDelta.length()*2);
@@ -120,7 +115,7 @@ const debugLine = (posA, posB, color, thickness=.1, time)=>
  *  @param {Vector2} sizeB
  *  @param {String}  [color='#fff']
  *  @memberof Debug */
-const debugAABB = (pA, sA, pB, sB, color)=>
+function debugAABB(pA, sA, pB, sB, color)
 {
     const minPos = vec2(min(pA.x - sA.x/2, pB.x - sB.x/2), min(pA.y - sA.y/2, pB.y - sB.y/2));
     const maxPos = vec2(max(pA.x + sA.x/2, pB.x + sB.x/2), max(pA.y + sA.y/2, pB.y + sB.y/2));
@@ -136,7 +131,7 @@ const debugAABB = (pA, sA, pB, sB, color)=>
  *  @param {Number}  [angle=0]
  *  @param {String}  [font='monospace']
  *  @memberof Debug */
-const debugText = (text, pos, size=1, color='#fff', time=0, angle=0, font='monospace')=>
+function debugText(text, pos, size=1, color='#fff', time=0, angle=0, font='monospace')
 {
     ASSERT(typeof color == 'string'); // pass in regular html strings as colors
     debugPrimitives.push({text, pos, size, color, time:new Timer(time), angle, font});
@@ -144,13 +139,13 @@ const debugText = (text, pos, size=1, color='#fff', time=0, angle=0, font='monos
 /** Clear all debug primitives in the list
  *  @memberof Debug */
-const debugClear = ()=> debugPrimitives = [];
+function debugClear() { debugPrimitives = []; }
 /** Save a canvas to disk
  *  @param {HTMLCanvasElement} canvas
  *  @param {String}            [filename]
  *  @memberof Debug */
-const debugSaveCanvas = (canvas, filename = engineName + '.png') =>
+function debugSaveCanvas(canvas, filename = engineName + '.png')
 {
     downloadLink.download = 'screenshot.png';
     downloadLink.href = canvas.toDataURL('image/png').replace('image/png','image/octet-stream');
@@ -160,14 +155,14 @@ const debugSaveCanvas = (canvas, filename = engineName + '.png') =>
 ///////////////////////////////////////////////////////////////////////////////
 // Engine debug function (called automatically)
-const debugInit = ()=>
+function debugInit()
 {
     // create link for saving screenshots
     document.body.appendChild(downloadLink = document.createElement('a'));
     downloadLink.style.display = 'none';
 }
-const debugUpdate = ()=>
+function debugUpdate()
 {
     if (!debug)
         return;
@@ -195,7 +190,7 @@ const debugUpdate = ()=>
     }
 }
-const debugRender = ()=>
+function debugRender()
 {
     glCopyToContext(mainContext);

package/src/engineDraw.js CHANGED Viewed

@@ -1,22 +1,22 @@
 /**
  * LittleJS Drawing System
- * <br> - Hybrid with both Canvas2D and WebGL available
- * <br> - Super fast tile sheet rendering with WebGL
- * <br> - Can apply rotation, mirror, color and additive color
- * <br> - Many useful utility functions
- * <br>
- * <br>LittleJS uses a hybrid rendering solution with the best of both Canvas2D and WebGL.
- * <br>There are 3 canvas/contexts available to draw to...
- * <br> - mainCanvas - 2D background canvas, non WebGL stuff like tile layers are drawn here.
- * <br> - glCanvas - Used by the accelerated WebGL batch rendering system.
- * <br> - overlayCanvas - Another 2D canvas that appears on top of the other 2 canvases.
- * <br>
- * <br>The WebGL rendering system is very fast with some caveats...
- * <br> - The default setup supports only 1 tile sheet, to support more call glCreateTexture and glSetTexture
- * <br> - Switching blend modes (additive) or textures causes another draw call which is expensive in excess
- * <br> - Group additive rendering together using renderOrder to mitigate this issue
- * <br>
- * <br>The LittleJS rendering solution is intentionally simple, feel free to adjust it for your needs!
+ * - Hybrid with both Canvas2D and WebGL available
+ * - Super fast tile sheet rendering with WebGL
+ * - Can apply rotation, mirror, color and additive color
+ * - 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...
+ * - The default setup supports only 1 tile sheet, to support more call glCreateTexture and glSetTexture
+ * - 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
  */
@@ -60,7 +60,7 @@ let tileImageSize, tileImageFixBleed, drawCount;
  *  @param {Vector2} screenPos
  *  @return {Vector2}
  *  @memberof Draw */
-const screenToWorld = (screenPos)=>
+function screenToWorld(screenPos)
 {
     ASSERT(mainCanvasSize.x && mainCanvasSize.y, 'mainCanvasSize is invalid');
     return screenPos.add(vec2(.5)).subtract(mainCanvasSize.scale(.5)).multiply(vec2(1/cameraScale,-1/cameraScale)).add(cameraPos);
@@ -71,7 +71,7 @@ const screenToWorld = (screenPos)=>
  *  @param {Vector2} worldPos
  *  @return {Vector2}
  *  @memberof Draw */
-const worldToScreen = (worldPos)=>
+function worldToScreen(worldPos)
 {
     ASSERT(mainCanvasSize.x && mainCanvasSize.y, 'mainCanvasSize is invalid');
     return worldPos.subtract(cameraPos).multiply(vec2(cameraScale,-cameraScale)).add(mainCanvasSize.scale(.5)).subtract(vec2(.5));
@@ -280,9 +280,9 @@ let engineFontImage;
 /**
  * Font Image Object - Draw text on a 2D canvas by using characters in an image
- * <br> - 96 characters (from space to tilde) are stored in an image
- * <br> - Uses a default 8x8 font if none is supplied
- * <br> - You can also use fonts from the main tile sheet
+ * - 96 characters (from space to tilde) are stored in an image
+ * - Uses a default 8x8 font if none is supplied
+ * - You can also use fonts from the main tile sheet
  * @example
  * // use built in font
  * const font = new ImageFont;
@@ -322,7 +322,7 @@ class FontImage
     {
         const context = this.context;
         context.save();
-        context.imageSmoothingEnabled = !cavasPixelated;
+        context.imageSmoothingEnabled = !canvasPixelated;
         const size = this.tileSize;
         const drawSize = size.add(this.paddingSize).scale(scale);
@@ -368,7 +368,7 @@ class FontImage
 /** Returns true if fullscreen mode is active
  *  @return {Boolean}
  *  @memberof Draw */
-const isFullscreen = ()=> document.fullscreenElement;
+function isFullscreen() { return document.fullscreenElement; }
 /** Toggle fullsceen mode
  *  @memberof Draw */