littlejsengine 1.3.0 → 1.3.8

package/README.md

@@ -4,7 +4,7 @@
 
 LittleJS is a super lightweight JavaScript game engine with a fast hybrid rendering system. It provides everything necessary to make amazing games, including rendering, physics, particles, sound effects, music, input handling, and debug tools. LittleJS is designed to be extremely small yet powerful enough for a variety of applications, from game jams to commercial releases. The code is very well documented with a variety of examples to get you started. Choo-Choo! 🚂
 
-## [LittleJS Documentation](https://killedbyapixel.github.io/LittleJS/docs) - [LittleJS Trailer](https://youtu.be/chuBzGjv7Ms) - [LittleJS Trello](https://trello.com/b/E9zf1Xak/littlejs)
+## [LittleJS Documentation](https://killedbyapixel.github.io/LittleJS/docs) - [LittleJS Trailer](https://youtu.be/chuBzGjv7Ms) - [LittleJS Discord](https://discord.gg/zb7hcGkyZe)
 
 ![LittleJS Screenshot](examples/screenshot.jpg)
 
@@ -29,7 +29,8 @@ LittleJS is a super lightweight JavaScript game engine with a fast hybrid render
 - Debug tools and debug rendering system
 - [Full documentation](https://killedbyapixel.github.io/LittleJS/docs) automatically generated from the source code block tags with [JSDoc](https://github.com/jsdoc/jsdoc)
 - Build system automatically combines everything, minifies, and removes unused code
-- For size coding competitions like [js13kGames](https://js13kgames.com/), starter project builds to a 7KB zip with [Roadroller](https://github.com/lifthrasiir/roadroller)
+- For size coding competitions like [js13kGames](https://js13kgames.com/), starter project builds to a 7KB zip file
+- (https://github.com/lifthrasiir/roadroller)
 - Easily build a Windows executable with [Electron](https://www.electronjs.org/) for distribution on platforms like Steam
 - Open Source with the [MIT license](https://github.com/KilledByAPixel/LittleJS/blob/main/LICENSE) so it can be used for anything you want
 
@@ -41,11 +42,13 @@ To easily include LittleJS in your game, you can use one of the 3 pre-built js f
 - [engine.all.release.js](https://github.com/KilledByAPixel/LittleJS/blob/main/engine/engine.all.release.js) - The engine optimized for release builds
 - [engine.all.min.js](https://github.com/KilledByAPixel/LittleJS/blob/main/engine/engine.all.min.js) - The engine in release mode and minified
 
-The hello world example includes a batch file [build.bat](https://github.com/KilledByAPixel/LittleJS/blob/main/build.bat) that compresses everything into a tiny zip file using Google Closure, UglifyJS, Roadroller, and ECT. You must run buildSetup.bat to install the necessary npm dependencies.
+The hello world example includes a batch file [build.bat](https://github.com/KilledByAPixel/LittleJS/blob/main/build.bat) that compresses everything into a tiny zip file using Google Closure, UglifyJS, Roadroller, and ECT. You must run [buildSetup.bat](https://github.com/KilledByAPixel/LittleJS/blob/main/buildSetup.bat) to install the necessary npm dependencies.
 
 ## Games Made With LittleJS
 
-- [Space Huggers](https://github.com/KilledByAPixel/SpaceHuggers) - A more developed version of the platformer example
+- [Space Huggers](https://www.newgrounds.com/portal/view/819609) - Run and gun platformer with procedural levels
+- [Space Huggers - JS13k Edition](https://github.com/KilledByAPixel/SpaceHuggers) - Original js13k game with source code
+- [Isletopia](https://store.steampowered.com/app/1861260/Isletopia) - Relaxing strategy game of greenifying barren islands
 - Send me your games!
 
 ![LittleJS Logo](favicon.png)

package/build.bat

@@ -49,7 +49,7 @@ if %ERRORLEVEL% NEQ 0 (
     exit /b %ERRORLEVEL%
 )
 
-rem roadroaller compresses the code better then zip
+rem roadroller compresses the code better then zip
 copy %BUILD_FILENAME% roadroller_%BUILD_FILENAME%
 call npx roadroller roadroller_%BUILD_FILENAME% -o roadroller_%BUILD_FILENAME%
 if %ERRORLEVEL% NEQ 0 (

package/buildSetup.bat

@@ -4,4 +4,7 @@ call npm install google-closure-compiler
 call npm install uglify-js
 call npm install roadroller
 call npm install ect-bin
-call npm install typescript
+call npm install typescript
+
+echo Finishd installing LittleJS build dependencies.
+pause

package/engine/engine.all.js

@@ -30,7 +30,7 @@ const enableAsserts = 1;
  *  @memberof Debug */
 const debugPointSize = .5;
 
-/** True if watermark with FPS should be down
+/** True if watermark with FPS should be down, false in release builds
  *  @default
  *  @memberof Debug */
 let showWatermark = 1;
@@ -650,7 +650,7 @@ class Vector2
     /** Returns a new vector in same direction as this one with the length passed in
      * @param {Number} [length=1]
      * @return {Vector2} */
-    normalize(length=1) { const l = this.length(); return l ? this.scale(length/l) : new Vector2(length); }
+    normalize(length=1) { const l = this.length(); return l ? this.scale(length/l) : new Vector2(0, length); }
 
     /** Returns a new vector clamped to length passed in
      * @param {Number} [length=1]
@@ -695,7 +695,7 @@ class Vector2
 
     /** Returns the area this vector covers as a rectangle
      * @return {Number} */
-    area() { return this.x * this.y; }
+    area() { return abs(this.x * this.y); }
 
     /** Returns a new vector that is p percent between this and the vector passed in
      * @param {Vector2} vector
@@ -804,6 +804,34 @@ class Color
         return this;
     }
 
+    /** Returns this color expressed in hsla format
+     * @return {Array} */
+    getHSLA()
+    {
+        const r = this.r;
+        const g = this.g;
+        const b = this.b;
+        const a = this.a;
+        const max = Math.max(r, g, b);
+        const min = Math.min(r, g, b);
+        const l = (max + min) / 2;
+        
+        let h = 0, s = 0;
+        if (max != min)
+        {
+            let d = max - min;
+            s = l > .5 ? d / (2 - max - min) : d / (max + min);
+            if (r == max)
+                h = (g - b) / d + (g < b ? 6 : 0);
+            else if (g == max)
+                h = (b - r) / d + 2;
+            else if (b == max)
+                h =  (r - g) / d + 4;
+        }
+
+        return [h / 6, s, l, a];
+    }
+
     /** Returns a new color that has each component randomly adjusted
      * @param {Number} [amount=.05]
      * @param {Number} [alphaAmount=0]
@@ -835,14 +863,6 @@ class Color
         return (this.r*255|0) + (this.g*255<<8) + (this.b*255<<16) + (this.a*255<<24); 
     }
 
-    /** Returns this color expressed as a hex code
-     * @return {String} */
-    hex()
-    {
-        const toHex = (c)=> ((c=c*255|0)<16 ? '0' : '') + c.toString(16);
-        return '#' + toHex(this.r) + toHex(this.g) + toHex(this.b);
-    }
-
     /** Set this color from a hex code
      * @param {String} hex - html hex code
      * @return {Color} */
@@ -856,6 +876,14 @@ class Color
         ASSERT(this.r>=0 && this.r<=1 && this.g>=0 && this.g<=1 && this.b>=0 && this.b<=1);
         return this;
     }
+
+    /** Returns this color expressed as a hex code
+     * @return {String} */
+    getHex()
+    {
+        const toHex = (c)=> ((c=c*255|0)<16 ? '0' : '') + c.toString(16);
+        return '#' + toHex(this.r) + toHex(this.g) + toHex(this.b);
+    }
 }
 
 ///////////////////////////////////////////////////////////////////////////////
@@ -904,7 +932,7 @@ class Timer
     
     /** Returns this timer expressed as a string
      * @return {String} */
-    toString() { return this.unset() ? 'unset' : Math.abs(this.get()) + ' seconds ' + (this.get()<0 ? 'before' : 'after' ); }
+    toString() { if (debug) { return this.unset() ? 'unset' : Math.abs(this.get()) + ' seconds ' + (this.get()<0 ? 'before' : 'after' ); } }
 }
 /**
  * LittleJS Engine Settings
@@ -922,7 +950,8 @@ class Timer
  *  @memberof Settings */
 let canvasMaxSize = vec2(1920, 1200);
 
-/** Fixed size of the canvas, if enabled cavnvas size never changes
+/** Fixed size of the canvas, if enabled canvas size never changes
+ * - you may also need to set mainCanvasSize if using screen space coords in startup
  *  @type {Vector2} 
  *  @default
  *  @memberof Settings */
@@ -961,6 +990,11 @@ let tileFixBleedScale = .3;
  *  @memberof Settings */
 let objectDefaultSize = vec2(1);
 
+/** Enable physics solver for collisions between objects
+ *  @default
+ *  @memberof Settings */
+let enablePhysicsSolver = 1;
+
 /** Default object mass for collison calcuations (how heavy objects are)
  *  @default
  *  @memberof Settings */
@@ -1159,7 +1193,7 @@ class EngineObject
     /** Create an engine object and adds it to the list of objects
      *  @param {Vector2} [position=new Vector2()]    - World space position of the object
      *  @param {Vector2} [size=objectDefaultSize]    - World space size of the object
-     *  @param {Number}  [tileIndex=-1]              - Tile to use to render object, untextured if -1
+     *  @param {Number}  [tileIndex=-1]              - Tile to use to render object (-1 is untextured)
      *  @param {Vector2} [tileSize=tileSizeDefault]  - Size of tile in source pixels
      *  @param {Number}  [angle=0]                   - Angle the object is rotated by
      *  @param {Color}   [color]                     - Color to apply to tile when rendered
@@ -1176,7 +1210,7 @@ class EngineObject
         this.size = size;
         /** @property {Vector2} - Size of object used for drawing, uses size if not set */
         this.drawSize;
-        /** @property {Number}  - Tile to use to render object, untextured if -1 */
+        /** @property {Number}  - Tile to use to render object (-1 is untextured) */
         this.tileIndex = tileIndex;
         /** @property {Vector2} - Size of tile in source pixels */
         this.tileSize = tileSize;
@@ -1188,7 +1222,7 @@ class EngineObject
         this.additiveColor;
 
         // set object defaults
-        /** @property {Number} [mass=objectDefaultMass]                 - How heavy the object is */
+        /** @property {Number} [mass=objectDefaultMass]                 - How heavy the object is, static if 0 */
         this.mass         = objectDefaultMass;
         /** @property {Number} [damping=objectDefaultDamping]           - How much to slow down velocity each frame (0-1) */
         this.damping      = objectDefaultDamping;
@@ -1242,7 +1276,7 @@ class EngineObject
         ASSERT(this.angleDamping >= 0 && this.angleDamping <= 1);
         ASSERT(this.damping >= 0 && this.damping <= 1);
 
-        if (!this.mass) // do not update collision for fixed objects
+        if (!enablePhysicsSolver || !this.mass) // do not update collision for fixed objects
             return;
 
         const wasMovingDown = this.velocity.y < 0;
@@ -1252,7 +1286,7 @@ class EngineObject
             const groundSpeed = this.groundObject.velocity ? this.groundObject.velocity.x : 0;
             this.velocity.x = groundSpeed + (this.velocity.x - groundSpeed) * this.friction;
             this.groundObject = 0;
-            //debugPhysics && debugPoint(this.pos.subtract(vec2(0,this.size.y/2)), '#0f0');
+            //debugOverlay && debugPhysics && debugPoint(this.pos.subtract(vec2(0,this.size.y/2)), '#0f0');
         }
 
         if (this.collideSolidObjects)
@@ -1284,7 +1318,7 @@ class EngineObject
                     if (o.mass) // push away if not fixed
                         o.velocity = o.velocity.subtract(velocity);
                         
-                    debugPhysics && debugAABB(this.pos, this.size, o.pos, o.size, '#f00');
+                    debugOverlay && debugPhysics && debugAABB(this.pos, this.size, o.pos, o.size, '#f00');
                     continue;
                 }
 
@@ -1347,7 +1381,7 @@ class EngineObject
                     else // bounce if other object is fixed
                         this.velocity.x *= -this.elasticity;
                 }
-                debugPhysics && debugAABB(this.pos, this.size, o.pos, o.size, '#f0f');
+                debugOverlay && debugPhysics && debugAABB(this.pos, this.size, o.pos, o.size, '#f0f');
             }
         }
         if (this.collideTiles)
@@ -1480,18 +1514,21 @@ class EngineObject
 
     toString()
     {
-        let text = 'type = ' + this.constructor.name;
-        if (this.pos.x || this.pos.y)
-            text += '\npos = ' + this.pos;
-        if (this.velocity.x || this.velocity.y)
-            text += '\nvelocity = ' + this.velocity;
-        if (this.size.x || this.size.y)
-            text += '\nsize = ' + this.size;
-        if (this.angle)
-            text += '\nangle = ' + this.angle.toFixed(3);
-        if (this.color)
-            text += '\ncolor = ' + this.color;
-        return text;
+        if (debug)
+        {
+            let text = 'type = ' + this.constructor.name;
+            if (this.pos.x || this.pos.y)
+                text += '\npos = ' + this.pos;
+            if (this.velocity.x || this.velocity.y)
+                text += '\nvelocity = ' + this.velocity;
+            if (this.size.x || this.size.y)
+                text += '\nsize = ' + this.size;
+            if (this.angle)
+                text += '\nangle = ' + this.angle.toFixed(3);
+            if (this.color)
+                text += '\ncolor = ' + this.color;
+            return text;
+        }
     }
 }
 /** 
@@ -1549,18 +1586,26 @@ let overlayContext;
 let mainCanvasSize = vec2();
 
 /** Convert from screen to world space coordinates
+ *  - if calling outside of render, you may need to manually set mainCanvasSize
  *  @param {Vector2} screenPos
  *  @return {Vector2}
  *  @memberof Draw */
 const screenToWorld = (screenPos)=>
-    screenPos.add(vec2(.5)).subtract(mainCanvasSize.scale(.5)).multiply(vec2(1/cameraScale,-1/cameraScale)).add(cameraPos);
+{
+    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);
+}
 
 /** Convert from world to screen space coordinates
+ *  - if calling outside of render, you may need to manually set mainCanvasSize
  *  @param {Vector2} worldPos
  *  @return {Vector2}
  *  @memberof Draw */
 const worldToScreen = (worldPos)=>
-    worldPos.subtract(cameraPos).multiply(vec2(cameraScale,-cameraScale)).add(mainCanvasSize.scale(.5)).subtract(vec2(.5));
+{
+    ASSERT(mainCanvasSize.x && mainCanvasSize.y, 'mainCanvasSize is invalid');
+    return worldPos.subtract(cameraPos).multiply(vec2(cameraScale,-cameraScale)).add(mainCanvasSize.scale(.5)).subtract(vec2(.5));
+}
 
 /** Draw textured tile centered in world space, with color applied if using WebGL
  *  @param {Vector2} pos                                - Center of the tile in world space
@@ -1661,7 +1706,7 @@ function drawTileScreenSpace(pos, size=vec2(1), tileIndex, tileSize, color, angl
  *  @memberof Draw */
 function drawRectScreenSpace(pos, size, color, angle, useWebGL)
 {
-    drawTileSrceenSpace(pos, size, -1, tileSizeDefault, color, angle, 0, 0, useWebGL);
+    drawTileScreenSpace(pos, size, -1, tileSizeDefault, color, angle, 0, 0, useWebGL);
 }
 
 /** Draw colored line between two points
@@ -1724,14 +1769,15 @@ function setBlendMode(additive, useWebGL=glEnable)
 function drawTextScreen(text, pos, size=1, color=new Color, lineWidth=0, lineColor=new Color(0,0,0), textAlign='center', font=fontDefault)
 {
     overlayContext.fillStyle = color;
-    overlayContext.lineWidth = lineWidth *= cameraScale;
+    overlayContext.lineWidth = lineWidth;
     overlayContext.strokeStyle = lineColor;
     overlayContext.textAlign = textAlign;
     overlayContext.font = size + 'px '+ font;
     overlayContext.textBaseline = 'middle';
+    overlayContext.lineJoin = 'round';
 
     pos = pos.copy();
-    text.split('\n').forEach(line=>
+    (text+'').split('\n').forEach(line=>
     {
         lineWidth && overlayContext.strokeText(line, pos.x, pos.y);
         overlayContext.fillText(line, pos.x, pos.y);
@@ -1751,7 +1797,7 @@ function drawTextScreen(text, pos, size=1, color=new Color, lineWidth=0, lineCol
  *  @memberof Draw */
 function drawText(text, pos, size=1, color, lineWidth, lineColor, textAlign, font)
 {
-    drawTextScreen(text, worldToScreen(pos), size*cameraScale, color, lineWidth, lineColor, textAlign, font);
+    drawTextScreen(text, worldToScreen(pos), size*cameraScale, color, lineWidth*cameraScale, lineColor, textAlign, font);
 }
 
 ///////////////////////////////////////////////////////////////////////////////
@@ -1945,6 +1991,10 @@ let mouseWheel = 0;
  *  @memberof Input */
 let isUsingGamepad = 0;
 
+/** Prevents input continuing to the default browser handling (false by default)
+ *  @memberof Input */
+let preventDefaultInput = 0;
+
 /** Returns true if gamepad button is down
  *  @param {Number} button
  *  @param {Number} [gamepad=0]
@@ -2008,7 +2058,7 @@ onkeydown = (e)=>
 {
     if (debug && e.target != document.body) return;
     e.repeat || (inputData[isUsingGamepad = 0][remapKeyCode(e.keyCode)] = 3);
-    debug || e.preventDefault();
+    preventDefaultInput && e.preventDefault();
 }
 onkeyup = (e)=>
 {
@@ -2033,7 +2083,7 @@ const mouseToScreen = (mousePos)=>
         return vec2(); // fix bug that can occur if user clicks before page loads
 
     const rect = mainCanvas.getBoundingClientRect();
-    return mainCanvasSize.multiply(
+    return vec2(mainCanvas.width, mainCanvas.height).multiply(
         vec2(percent(mousePos.x, rect.left, rect.right), percent(mousePos.y, rect.top, rect.bottom)));
 }
 
@@ -2572,8 +2622,7 @@ function zzfxG
 )
 {
     // init parameters
-    let PI2 = PI*2, sign = v => v>0?1:-1,
-        startSlide = slide *= 500 * PI2 / zzfxR / zzfxR, b=[],
+    let PI2 = PI*2, startSlide = slide *= 500 * PI2 / zzfxR / zzfxR, b=[],
         startFrequency = frequency *= (1 + randomness*rand(-1,1)) * PI2 / zzfxR,
         t=0, tm=0, i=0, j=1, r=0, c=0, s=0, f, length;
         
@@ -2597,15 +2646,15 @@ function zzfxG
         {
             s = shape? shape>1? shape>2? shape>3?         // wave shape
                 Math.sin((t%PI2)**3) :                    // 4 noise
-                Math.max(Math.min(Math.tan(t),1),-1):     // 3 tan
+                max(min(Math.tan(t),1),-1):               // 3 tan
                 1-(2*t/PI2%2+2)%2:                        // 2 saw
-                1-4*abs(Math.round(t/PI2)-t/PI2):    // 1 triangle
+                1-4*abs(Math.round(t/PI2)-t/PI2):         // 1 triangle
                 Math.sin(t);                              // 0 sin
                 
             s = (repeatTime ?
                     1 - tremolo + tremolo*Math.sin(PI2*i/repeatTime) // tremolo
                     : 1) *
-                sign(s)*(abs(s)**shapeCurve) *       // curve 0=square, 2=pointy
+                sign(s)*(abs(s)**shapeCurve) *            // curve 0=square, 2=pointy
                 volume * soundVolume * (                  // envelope
                 i < attack ? i/attack :                   // attack
                 i < attack + decay ?                      // decay
@@ -2666,7 +2715,6 @@ function zzfxM(instruments, patterns, sequence, BPM = 125)
   let notFirstBeat;
   let stop;
   let instrument;
-  let pitch;
   let attenuation;
   let outSampleOffset;
   let isSequenceEnd;
@@ -2685,7 +2733,7 @@ function zzfxM(instruments, patterns, sequence, BPM = 125)
   for (; hasMore; channelIndex++) {
 
     // reset current values
-    sampleBuffer = [hasMore = notFirstBeat = pitch = outSampleOffset = 0];
+    sampleBuffer = [hasMore = notFirstBeat = outSampleOffset = 0];
 
     // for each pattern in sequence
     sequence.forEach((patternIndex, sequenceIndex) => {
@@ -3210,7 +3258,7 @@ class ParticleEmitter extends EngineObject
         // particle settings
         /** @property {Number} - How long particles live */
         this.particleTime      = particleTime;
-        /** @property {Number} -  How big are particles at start */
+        /** @property {Number} - How big are particles at start */
         this.sizeStart         = sizeStart;
         /** @property {Number} - How big are particles at end */
         this.sizeEnd           = sizeEnd;
@@ -3573,7 +3621,7 @@ class Newgrounds
         cipher && (this.cryptoJS = CryptoJS());
 
         // get session id from url search params
-        const url = new URL(window.location.href);
+        const url = new URL(location.href);
         this.session_id = url.searchParams.get('ngio_session_id') || 0;
 
         if (this.session_id == 0)
@@ -3926,7 +3974,7 @@ function glFlush()
  *  @memberof WebGL */
 function glCopyToContext(context, forceDraw)
 {
-    if (!glEnable || !glBatchCount) return;
+    if ((!glEnable || !glBatchCount) && !forceDraw) return;
     
     glFlush();
     
@@ -4056,7 +4104,7 @@ gl_VERTEX_BYTE_STRIDE = (4 * 2) * 2 + (4) * 2; // vec2 * 2 + (char * 4) * 2
 const engineName = 'LittleJS';
 
 /** Version of engine */
-const engineVersion = '1.3.0';
+const engineVersion = '1.3.8';
 
 /** Frames per second to update objects
  *  @default */
@@ -4147,6 +4195,33 @@ function engineInit(gameInit, gameUpdate, gameUpdatePost, gameRender, gameRender
         timeReal += frameTimeDeltaMS / 1e3;
         frameTimeBufferMS = min(frameTimeBufferMS + !paused * frameTimeDeltaMS, 50); // clamp incase of slow framerate
 
+        if (canvasFixedSize.x)
+        {
+            // clear set fixed size
+            overlayCanvas.width  = mainCanvas.width  = canvasFixedSize.x;
+            overlayCanvas.height = mainCanvas.height = canvasFixedSize.y;
+            
+            // fit to window by adding space on top or bottom if necessary
+            const aspect = innerWidth / innerHeight;
+            const fixedAspect = mainCanvas.width / mainCanvas.height;
+            mainCanvas.style.width  = overlayCanvas.style.width  = aspect < fixedAspect ? '100%' : '';
+            mainCanvas.style.height = overlayCanvas.style.height = aspect < fixedAspect ? '' : '100%';
+            if (glCanvas)
+            {
+                glCanvas.style.width  = mainCanvas.style.width;
+                glCanvas.style.height = mainCanvas.style.height;
+            }
+        }
+        else
+        {
+            // clear and set size to same as window
+             overlayCanvas.width  = mainCanvas.width  = min(innerWidth,  canvasMaxSize.x);
+             overlayCanvas.height = mainCanvas.height = min(innerHeight, canvasMaxSize.y);
+        }
+        
+        // save canvas size
+        mainCanvasSize = vec2(mainCanvas.width, mainCanvas.height);
+
         if (paused)
         {
             // do post update even when paused
@@ -4183,30 +4258,6 @@ function engineInit(gameInit, gameUpdate, gameUpdatePost, gameRender, gameRender
             // add the time smoothing back in
             frameTimeBufferMS += deltaSmooth;
         }
-
-        if (canvasFixedSize.x)
-        {
-            // clear set fixed size
-            mainCanvas.width  = canvasFixedSize.x;
-            mainCanvas.height = canvasFixedSize.y;
-            
-            // fit to window by adding space on top or bottom if necessary
-            const aspect = innerWidth / innerHeight;
-            const fixedAspect = mainCanvas.width / mainCanvas.height;
-            mainCanvas.style.width  = overlayCanvas.style.width  = aspect < fixedAspect ? '100%' : '';
-            mainCanvas.style.height = overlayCanvas.style.height = aspect < fixedAspect ? '' : '100%';
-            if (glCanvas)
-            {
-                glCanvas.style.width  = mainCanvas.style.width;
-                glCanvas.style.height = mainCanvas.style.height;
-            }
-        }
-        else
-        {
-            // clear and set size to same as window
-            mainCanvas.width  = min(innerWidth,  canvasMaxSize.x);
-            mainCanvas.height = min(innerHeight, canvasMaxSize.y);
-        }
         
         // render sort then render while removing destroyed objects
         enginePreRender();
@@ -4246,8 +4297,8 @@ function engineInit(gameInit, gameUpdate, gameUpdatePost, gameRender, gameRender
 // called by engine to setup render system
 function enginePreRender()
 {
-    // save canvas size and clear canvases
-    mainCanvasSize = vec2(overlayCanvas.width = mainCanvas.width, overlayCanvas.height = mainCanvas.height);
+    // save canvas size
+    mainCanvasSize = vec2(mainCanvas.width, mainCanvas.height);
 
     // disable smoothing for pixel art
     mainContext.imageSmoothingEnabled = !cavasPixelated;