littlejsengine 1.9.11 → 1.10.4

package/plugins/uiSystem.js

@@ -0,0 +1,243 @@
+/**
+ * LittleJS User Interface Plugin
+ * - Nested Menus
+ * - Text
+ * - Buttons
+ * - Checkboxes
+ * - Images
+ */
+
+'use strict';
+
+///////////////////////////////////////////////////////////////////////////////
+
+// ui defaults
+let uiDefaultColor       = WHITE;
+let uiDefaultLineColor   = BLACK;
+let uiDefaultTextColor   = BLACK;
+let uiDefaultButtonColor = hsl(0,0,.5);
+let uiDefaultHoverColor  = hsl(0,0,.7);
+let uiDefaultLineWidth   = 4;
+let uiDefaultFont        = 'arial';
+
+// ui system
+let uiObjects = [];
+let uiContext;
+
+function initUISystem(context=overlayContext)
+{
+    uiContext = context;
+    engineAddPlugin(uiUpdate, uiRender);
+
+    // setup recursive update and render
+    function uiUpdate()
+    {
+        function updateObject(o)
+        {
+            if (!o.visible)
+                return;
+            if (o.parent)
+                o.pos = o.localPos.add(o.parent.pos);
+            o.update();
+            for(const c of o.children)
+                updateObject(c)
+        }
+        uiObjects.forEach(o=> o.parent || updateObject(o));
+    }
+    function uiRender()
+    {
+        function renderObject(o)
+        {
+            if (!o.visible)
+                return;
+            o.render();
+            for(const c of o.children)
+                renderObject(c)
+        }
+        uiObjects.forEach(o=> o.parent || renderObject(o));
+    }
+}
+
+function drawUIRect(pos, size, color=uiDefaultColor, lineWidth=uiDefaultLineWidth, lineColor=uiDefaultLineColor)
+{
+    uiContext.fillStyle = color.toString();
+    uiContext.beginPath();
+    uiContext.rect(pos.x-size.x/2, pos.y-size.y/2, size.x, size.y);
+    uiContext.fill();
+    if (lineWidth)
+    {
+        uiContext.strokeStyle = lineColor.toString();
+        uiContext.lineWidth = lineWidth;
+        uiContext.stroke();
+    }
+}
+
+function drawUILine(posA, posB, thickness=uiDefaultLineWidth, color=uiDefaultLineColor)
+{
+    uiContext.strokeStyle = color.toString();
+    uiContext.lineWidth = thickness;
+    uiContext.beginPath();
+    uiContext.lineTo(posA.x, posA.y);
+    uiContext.lineTo(posB.x, posB.y);
+    uiContext.stroke();
+}
+
+function drawUITile(pos, size, tileInfo, color=uiDefaultColor, angle=0, mirror=false, additiveColor=BLACK)
+{
+    drawTile(pos, size, tileInfo, color, angle, mirror, additiveColor, false, true, uiContext);
+}
+
+function drawUIText(text, pos, size, color=uiDefaultColor, lineWidth=uiDefaultLineWidth, lineColor=uiDefaultLineColor, align='center', font=uiDefaultFont)
+{
+    drawTextScreen(text, pos, size.y, color, lineWidth, lineColor, align, font, uiContext, size.x);
+}
+
+///////////////////////////////////////////////////////////////////////////////
+
+class UIObject
+{
+    constructor(localPos, size=vec2())
+    {
+        this.localPos = localPos.copy();
+        this.pos = localPos.copy();
+        this.size = size.copy();
+        this.color      = uiDefaultColor;
+        this.lineColor  = uiDefaultLineColor;
+        this.textColor  = uiDefaultTextColor;
+        this.hoverColor = uiDefaultHoverColor;
+        this.lineWidth  = uiDefaultLineWidth;
+        this.font       = uiDefaultFont;
+        this.visible = true;
+        this.children = [];
+        this.parent = null;
+        uiObjects.push(this);
+    }
+
+    addChild(child)
+    {
+        ASSERT(!child.parent && !this.children.includes(child));
+        this.children.push(child);
+        child.parent = this;
+    }
+
+    removeChild(child)
+    {
+        ASSERT(child.parent == this && this.children.includes(child));
+        this.children.splice(this.children.indexOf(child), 1);
+        child.parent = 0;
+    }
+
+    update()
+    {
+        // track mouse input
+        const mouseWasOver = this.mouseIsOver;
+        this.mouseIsOver = isOverlapping(this.pos, this.size, mousePosScreen);
+        if (this.mouseIsOver && !mouseWasOver)
+            this.onEnter();
+        if (!this.mouseIsOver && mouseWasOver)
+            this.onLeave();
+        if (mouseWasPressed(0) && this.mouseIsOver)
+        {
+            this.mouseIsHeld = true;
+            this.onPress();
+        }
+        else if (this.mouseIsHeld && !mouseIsDown(0))
+        {
+            this.mouseIsHeld = false;
+            if (this.mouseIsOver)
+                this.onClick();
+        }
+    }
+    render()
+    {
+        if (this.size.x && this.size.y)
+            drawUIRect(this.pos, this.size, this.color, this.lineWidth, this.lineColor);
+    }
+
+    // callback functions
+    onEnter() {}
+    onLeave() {}
+    onPress() {}
+    onClick() {}
+}
+
+///////////////////////////////////////////////////////////////////////////////
+
+class UIText extends UIObject
+{
+    constructor(pos, size, text, align='center', font=fontDefault)
+    {
+        super(pos, size);
+
+        this.text = text;
+        this.align = align;
+        this.font = font;
+        this.lineWidth = 0;
+    }
+    render()
+    {
+        drawUIText(this.text, this.pos, this.size, this.textColor, this.lineWidth, this.lineColor, this.align, this.font);
+    }
+}
+
+///////////////////////////////////////////////////////////////////////////////
+
+class UITile extends UIObject
+{
+    constructor(pos, size, tileInfo, color=WHITE, angle=0, mirror=false, additiveColor=BLACK)
+    {
+        super(pos, size);
+
+        this.tileInfo = tileInfo;
+        this.color = color;
+        this.angle = angle;
+        this.mirror = mirror;
+        this.additiveColor = additiveColor;
+    }
+    render()
+    {
+        drawUITile(this.pos, this.size, this.tileInfo, this.color, this.angle, this.mirror, this.additiveColor);
+    }
+}
+
+///////////////////////////////////////////////////////////////////////////////
+
+class UIButton extends UIObject
+{
+    constructor(pos, size, text)
+    {
+        super(pos, size);
+        this.text = text;
+        this.color = uiDefaultButtonColor;
+    }
+    render()
+    {
+        const lineColor = this.mouseIsHeld ? this.color : this.lineColor;
+        const color = this.mouseIsOver? this.hoverColor : this.color;
+        drawUIRect(this.pos, this.size, color, this.lineWidth, lineColor);
+        drawTextScreen(this.text, this.pos, this.size.y*.8, 
+            this.textColor, undefined, undefined, this.align, this.font, uiContext);
+    }
+}
+
+///////////////////////////////////////////////////////////////////////////////
+
+class UICheckbox extends UIObject
+{
+    constructor(pos, size, checked=false)
+    {
+        super(pos, size);
+        this.checked = checked;
+    }
+    onClick() { this.checked = !this.checked; }
+    render()
+    {
+        drawUIRect(this.pos, this.size, this.color, this.lineWidth, this.lineColor);
+        if (this.checked)
+        {
+            // draw an X if checked
+            drawUILine(this.pos.add(this.size.multiply(vec2(-.5,-.5))), this.pos.add(this.size.multiply(vec2(.5,.5))), this.lineWidth, this.lineColor);
+            drawUILine(this.pos.add(this.size.multiply(vec2(-.5,.5))), this.pos.add(this.size.multiply(vec2(.5,-.5))), this.lineWidth, this.lineColor);
+        }
+    }
+}

package/src/engine.js

@@ -30,7 +30,7 @@ const engineName = 'LittleJS';
  *  @type {String}
  *  @default
  *  @memberof Engine */
-const engineVersion = '1.9.11';
+const engineVersion = '1.10.4';
 
 /** Frames per second to update
  *  @type {Number}
@@ -74,7 +74,6 @@ let timeReal = 0;
  *  @default false
  *  @memberof Engine */
 let paused = false;
-
 /** Set if game is paused
  *  @param {Boolean} isPaused
  *  @memberof Engine */
@@ -107,9 +106,10 @@ function engineAddPlugin(updateFunction, renderFunction)
  *  @param {Function} gameUpdatePost - Called after physics and objects are updated, setup camera and prepare for render
  *  @param {Function} gameRender     - Called before objects are rendered, draw any background effects that appear behind objects
  *  @param {Function} gameRenderPost - Called after objects are rendered, draw effects or hud that appear above all objects
- *  @param {Array} [imageSources=['tiles.png']] - Image to load
+ *  @param {Array} [imageSources=[]] - Image to load
+ *  @param {HTMLElement} [rootElement] - Root element to attach to, the document body by default
  *  @memberof Engine */
-function engineInit(gameInit, gameUpdate, gameUpdatePost, gameRender, gameRenderPost, imageSources=['tiles.png'])
+function engineInit(gameInit, gameUpdate, gameUpdatePost, gameRender, gameRenderPost, imageSources=[], rootElement=document.body)
 {
     ASSERT(Array.isArray(imageSources), 'pass in images as array');
 
@@ -151,6 +151,7 @@ function engineInit(gameInit, gameUpdate, gameUpdatePost, gameRender, gameRender
             for (const o of engineObjects)
                 o.parent || o.updateTransforms();
             inputUpdate();
+            pluginUpdateList.forEach(f=>f());
             debugUpdate();
             gameUpdatePost();
             inputUpdatePost();
@@ -266,16 +267,21 @@ function engineInit(gameInit, gameUpdate, gameUpdatePost, gameRender, gameRender
     }
 
     // setup html
-    const styleBody = 
+    const styleRoot = 
         'margin:0;overflow:hidden;' + // fill the window
+        'width:100vw;height:100vh;' + // fill the window
+        'display:flex;' +             // use flexbox
+        'align-items:center;' +       // horizontal center
+        (canvasPixelated ? 'image-rendering:pixelated;' : '') + // pixel art
+        'justify-content:center;' +   // vertical center
         'background:#000;' +          // set background color
         'user-select:none;' +         // prevent hold to select
         '-webkit-user-select:none;' + // compatibility for ios
         (!touchInputEnable ? '' :     // no touch css setttings
         'touch-action:none;' +        // prevent mobile pinch to resize
         '-webkit-touch-callout:none');// compatibility for ios
-    document.body.style.cssText = styleBody;
-    document.body.appendChild(mainCanvas = document.createElement('canvas'));
+    rootElement.style.cssText = styleRoot;
+    rootElement.appendChild(mainCanvas = document.createElement('canvas'));
     mainContext = mainCanvas.getContext('2d');
 
     // init stuff and start engine
@@ -285,13 +291,14 @@ function engineInit(gameInit, gameUpdate, gameUpdatePost, gameRender, gameRender
     glInit();
 
     // create overlay canvas for hud to appear above gl canvas
-    document.body.appendChild(overlayCanvas = document.createElement('canvas'));
+    rootElement.appendChild(overlayCanvas = document.createElement('canvas'));
     overlayContext = overlayCanvas.getContext('2d');
 
     // set canvas style
-    const styleCanvas = 'position:absolute;' +             // position
-        'top:50%;left:50%;transform:translate(-50%,-50%)'; // center
-    (glCanvas||mainCanvas).style.cssText = mainCanvas.style.cssText = overlayCanvas.style.cssText = styleCanvas;
+    const styleCanvas = 'position:absolute'; // allow canvases to overlap
+    mainCanvas.style.cssText = overlayCanvas.style.cssText = styleCanvas;
+    if (glCanvas)
+        glCanvas.style.cssText = styleCanvas;
     updateCanvas();
     
     // create promises for loading images
@@ -308,19 +315,32 @@ function engineInit(gameInit, gameUpdate, gameUpdatePost, gameRender, gameRender
         })
     );
 
-    // draw splash screen
-    showSplashScreen && promises.push(new Promise(resolve => 
+    if (!imageSources.length)
     {
-        let t = 0;
-        console.log(`${engineName} Engine v${engineVersion}`);
-        updateSplash();
-        function updateSplash()
+        // no images to load
+        promises.push(new Promise(resolve => 
         {
-            clearInput();
-            drawEngineSplashScreen(t+=.01);
-            t>1 ? resolve() : setTimeout(updateSplash, 16);
-        }
-    }));
+            textureInfos[0] = new TextureInfo(new Image);
+            resolve();
+        }));
+    }
+
+    if (showSplashScreen)
+    {
+        // draw splash screen
+        promises.push(new Promise(resolve => 
+        {
+            let t = 0;
+            console.log(`${engineName} Engine v${engineVersion}`);
+            updateSplash();
+            function updateSplash()
+            {
+                clearInput();
+                drawEngineSplashScreen(t+=.01);
+                t>1 ? resolve() : setTimeout(updateSplash, 16);
+            }
+        }));
+    }
 
     // load all of the images
     Promise.all(promises).then(startEngine);

package/src/engineAudio.js

@@ -320,17 +320,6 @@ function playSamples(sampleChannels, volume=1, rate=1, pan=0, loop=false, sample
 {
     if (!soundEnable || headlessMode) return;
 
-    // prevent sounds from building up if they can't be played
-    if (audioContext.state != 'running')
-    {
-        // fix stalled audio
-        audioContext.resume().then(()=>
-            playSamples(sampleChannels, volume, rate, pan, loop, sampleRate, gainNode));
-
-        // prevent suspended sounds from building up
-        return;
-    }
-
     // create buffer and source
     const channelCount = sampleChannels.length;
     const sampleLength = sampleChannels[0].length;
@@ -352,8 +341,16 @@ function playSamples(sampleChannels, volume=1, rate=1, pan=0, loop=false, sample
     const pannerNode = new StereoPannerNode(audioContext, {'pan':clamp(pan, -1, 1)});
     source.connect(pannerNode).connect(gainNode);
 
-    // play and return sound
-    source.start();
+    // play the sound
+    if (audioContext.state != 'running')
+    {
+        // fix stalled audio and play
+        audioContext.resume().then(()=>source.start());
+    }
+    else
+        source.start();
+
+    // return sound
     return source;
 }
 

package/src/engineDebug.js

@@ -124,7 +124,6 @@ function debugPoint(pos, color, time, angle)
  *  @memberof Debug */
 function debugLine(posA, posB, color, thickness=.1, time)
 {
-    ASSERT(typeof color == 'string', 'pass in css color strings'); 
     const halfDelta = vec2((posB.x - posA.x)/2, (posB.y - posA.y)/2);
     const size = vec2(thickness, halfDelta.length()*2);
     debugRect(posA.add(halfDelta), size, color, time, halfDelta.angle(), true);
@@ -200,6 +199,7 @@ function debugShowErrors()
 
     const showError = (message)=>
     {
+        // replace entire page with error message
         document.body.style.backgroundColor = '#111';
         document.body.innerHTML = `<pre style=color:#f00;font-size:50px>` + message;
     }

package/src/engineDraw.js

@@ -58,12 +58,13 @@ let drawCount;
 ///////////////////////////////////////////////////////////////////////////////
 
 /** 
- * Create a tile info object
+ * Create a tile info object using a grid based system
  * - This can take vecs or floats for easier use and conversion
  * - If an index is passed in, the tile size and index will determine the position
- * @param {(Number|Vector2)} [pos=(0,0)]            - Top left corner of tile in pixels or index
+ * @param {(Number|Vector2)} [pos=0]                - Index of tile in sheet
  * @param {(Number|Vector2)} [size=tileSizeDefault] - Size of tile in pixels
  * @param {Number} [textureIndex]                   - Texture index to use
+ * @param {Number} [padding]                        - How many pixels padding around tiles
  * @return {TileInfo}
  * @example
  * tile(2)                       // a tile at index 2 using the default tile size of 16
@@ -72,7 +73,7 @@ let drawCount;
  * tile(vec2(4,8), vec2(30,10))  // a tile at pixel location (4,8) with a size of (30,10)
  * @memberof Draw
  */
-function tile(pos=vec2(), size=tileSizeDefault, textureIndex=0)
+function tile(pos=vec2(), size=tileSizeDefault, textureIndex=0, padding=0)
 {
     if (headlessMode)
         return new TileInfo;
@@ -84,17 +85,17 @@ function tile(pos=vec2(), size=tileSizeDefault, textureIndex=0)
         size = vec2(size);
     }
 
-    // if pos is a number, use it as a tile index
+    // use pos as a tile index
+    const textureInfo = textureInfos[textureIndex];
+    ASSERT(textureInfo, 'Texture not loaded');
+    const sizePadded = size.add(vec2(padding*2));
+    const cols = textureInfo.size.x / sizePadded.x |0;
     if (typeof pos === 'number')
-    {
-        const textureInfo = textureInfos[textureIndex];
-        ASSERT(textureInfo, 'Texture not loaded');
-        const cols = textureInfo.size.x / size.x |0;
-        pos = vec2((pos%cols)*size.x, (pos/cols|0)*size.y);
-    }
+        pos = vec2(pos%cols, pos/cols|0);
+    pos = vec2(pos.x*sizePadded.x+padding, pos.y*sizePadded.y+padding);
 
     // return a tile info object
-    return new TileInfo(pos, size, textureIndex); 
+    return new TileInfo(pos, size, textureIndex, padding); 
 }
 
 /** 
@@ -106,8 +107,9 @@ class TileInfo
      *  @param {Vector2} [pos=(0,0)]            - Top left corner of tile in pixels
      *  @param {Vector2} [size=tileSizeDefault] - Size of tile in pixels
      *  @param {Number}  [textureIndex]         - Texture index to use
+     *  @param {Number}  [padding]              - How many pixels padding around tiles
      */
-    constructor(pos=vec2(), size=tileSizeDefault, textureIndex=0)
+    constructor(pos=vec2(), size=tileSizeDefault, textureIndex=0, padding=0)
     {
         /** @property {Vector2} - Top left corner of tile in pixels */
         this.pos = pos.copy();
@@ -115,6 +117,8 @@ class TileInfo
         this.size = size.copy();
         /** @property {Number} - Texture index to use */
         this.textureIndex = textureIndex;
+        /** @property {Number} - How many pixels padding around tiles */
+        this.padding = padding;
     }
 
     /** Returns a copy of this tile offset by a vector
@@ -131,7 +135,7 @@ class TileInfo
     frame(frame)
     {
         ASSERT(typeof frame == 'number');
-        return this.offset(vec2(frame*this.size.x, 0));
+        return this.offset(vec2(frame*(this.size.x+this.padding*2), 0));
     }
 
     /** Returns the texture info for this tile
@@ -156,8 +160,6 @@ class TextureInfo
         this.size = vec2(image.width, image.height);
         /** @property {WebGLTexture} - webgl texture */
         this.glTexture = glEnable && glCreateTexture(image);
-        /** @property {Vector2} - size to adjust tile to fix bleeding */
-        this.fixBleedSize = vec2(tileFixBleedScale).divide(this.size);
     }
 }
 
@@ -226,11 +228,12 @@ function drawTile(pos, size=vec2(1), tileInfo, color=new Color,
         if (textureInfo)
         {
             // calculate uvs and render
-            const x = tileInfo.pos.x / textureInfo.size.x;
-            const y = tileInfo.pos.y / textureInfo.size.y;
-            const w = tileInfo.size.x / textureInfo.size.x;
-            const h = tileInfo.size.y / textureInfo.size.y;
-            const tileImageFixBleed = textureInfo.fixBleedSize;
+            const sizeInverse = vec2(1).divide(textureInfo.size);
+            const x = tileInfo.pos.x * sizeInverse.x;
+            const y = tileInfo.pos.y * sizeInverse.y;
+            const w = tileInfo.size.x * sizeInverse.x;
+            const h = tileInfo.size.y * sizeInverse.y;
+            const tileImageFixBleed = sizeInverse.scale(tileFixBleedScale);
             glSetTexture(textureInfo.glTexture);
             glDraw(pos.x, pos.y, mirror ? -size.x : size.x, size.y, angle, 
                 x + tileImageFixBleed.x,     y + tileImageFixBleed.y, 
@@ -247,6 +250,7 @@ function drawTile(pos, size=vec2(1), tileInfo, color=new Color,
     {
         // normal canvas 2D rendering method (slower)
         showWatermark && ++drawCount;
+        size = vec2(size.x, -size.y); // fix upside down sprites
         drawCanvas2D(pos, size, angle, mirror, (context)=>
         {
             if (textureInfo)
@@ -300,6 +304,74 @@ function drawLine(posA, posB, thickness=.1, color, useWebGL, screenSpace, contex
     drawRect(posA.add(halfDelta), size, color, halfDelta.angle(), useWebGL, screenSpace, context);
 }
 
+/** Draw colored polygon using passed in points
+ *  @param {Array}   points - Array of Vector2 points
+ *  @param {Color}   [color=(1,1,1,1)]
+ *  @param {Number}  [lineWidth=0]
+ *  @param {Color}   [lineColor=(0,0,0,1)]
+ *  @param {Boolean} [screenSpace=false]
+ *  @param {CanvasRenderingContext2D} [context=mainContext]
+ *  @memberof Draw */
+function drawPoly(points, color=new Color, lineWidth=0, lineColor=new Color(0,0,0), screenSpace, context=mainContext)
+{
+    context.fillStyle = color.toString();
+    context.beginPath();
+    for (const point of screenSpace ? points : points.map(worldToScreen))
+        context.lineTo(point.x, point.y);
+    context.closePath();
+    context.fill();
+    if (lineWidth)
+    {
+        context.strokeStyle = lineColor.toString();
+        context.lineWidth = screenSpace ? lineWidth : lineWidth*cameraScale;
+        context.stroke();
+    }
+}
+
+/** Draw colored ellipse using passed in point
+ *  @param {Vector2} pos
+ *  @param {Number}  [width=1]
+ *  @param {Number}  [height=1]
+ *  @param {Number}  [angle=0]
+ *  @param {Color}   [color=(1,1,1,1)]
+ *  @param {Number}  [lineWidth=0]
+ *  @param {Color}   [lineColor=(0,0,0,1)]
+ *  @param {Boolean} [screenSpace=false]
+ *  @param {CanvasRenderingContext2D} [context=mainContext]
+ *  @memberof Draw */
+function drawEllipse(pos, width=1, height=1, angle=0, color=new Color, lineWidth=0, lineColor=new Color(0,0,0), screenSpace, context=mainContext)
+{
+    if (!screenSpace)
+    {
+        pos = worldToScreen(pos);
+        width *= cameraScale;
+        height *= cameraScale;
+        lineWidth *= cameraScale;
+    }
+    context.fillStyle = color.toString();
+    context.beginPath();
+    context.ellipse(pos.x, pos.y, width, height, angle, 0, 9);
+    context.fill();
+    if (lineWidth)
+    {
+        context.strokeStyle = lineColor.toString();
+        context.lineWidth = lineWidth;
+        context.stroke();
+    }
+}
+
+/** Draw colored circle using passed in point
+ *  @param {Vector2} pos
+ *  @param {Number}  [radius=1]
+ *  @param {Color}   [color=(1,1,1,1)]
+ *  @param {Number}  [lineWidth=0]
+ *  @param {Color}   [lineColor=(0,0,0,1)]
+ *  @param {Boolean} [screenSpace=false]
+ *  @param {CanvasRenderingContext2D} [context=mainContext]
+ *  @memberof Draw */
+function drawCircle(pos, radius=1, color=new Color, lineWidth=0, lineColor=new Color(0,0,0), screenSpace, context=mainContext)
+{ drawEllipse(pos, radius, radius, 0, color, lineWidth, lineColor, screenSpace, context); }
+
 /** Draw directly to a 2d canvas context in world space
  *  @param {Vector2}  pos
  *  @param {Vector2}  size
@@ -354,10 +426,11 @@ function setBlendMode(additive, useWebGL=glEnable, context)
  *  @param {CanvasTextAlign}  [textAlign='center']
  *  @param {String}  [font=fontDefault]
  *  @param {CanvasRenderingContext2D|OffscreenCanvasRenderingContext2D} [context=overlayContext]
+ *  @param {Number}  [maxWidth]
  *  @memberof Draw */
-function drawText(text, pos, size=1, color, lineWidth=0, lineColor, textAlign, font, context)
+function drawText(text, pos, size=1, color, lineWidth=0, lineColor, textAlign, font, context, maxWidth)
 {
-    drawTextScreen(text, worldToScreen(pos), size*cameraScale, color, lineWidth*cameraScale, lineColor, textAlign, font, context);
+    drawTextScreen(text, worldToScreen(pos), size*cameraScale, color, lineWidth*cameraScale, lineColor, textAlign, font, context, maxWidth);
 }
 
 /** Draw text on overlay canvas in screen space
@@ -371,8 +444,9 @@ function drawText(text, pos, size=1, color, lineWidth=0, lineColor, textAlign, f
  *  @param {CanvasTextAlign}  [textAlign]
  *  @param {String}  [font=fontDefault]
  *  @param {CanvasRenderingContext2D|OffscreenCanvasRenderingContext2D} [context=overlayContext]
+ *  @param {Number}  [maxWidth]
  *  @memberof Draw */
-function drawTextScreen(text, pos, size=1, color=new Color, lineWidth=0, lineColor=new Color(0,0,0), textAlign='center', font=fontDefault, context=overlayContext)
+function drawTextScreen(text, pos, size=1, color=new Color, lineWidth=0, lineColor=new Color(0,0,0), textAlign='center', font=fontDefault, context=overlayContext, maxWidth=undefined)
 {
     context.fillStyle = color.toString();
     context.lineWidth = lineWidth;
@@ -385,8 +459,8 @@ function drawTextScreen(text, pos, size=1, color=new Color, lineWidth=0, lineCol
     pos = pos.copy();
     (text+'').split('\n').forEach(line=>
     {
-        lineWidth && context.strokeText(line, pos.x, pos.y);
-        context.fillText(line, pos.x, pos.y);
+        lineWidth && context.strokeText(line, pos.x, pos.y, maxWidth);
+        context.fillText(line, pos.x, pos.y, maxWidth);
         pos.y += size;
     });
 }
@@ -489,11 +563,12 @@ function isFullscreen() { return !!document.fullscreenElement; }
  *  @memberof Draw */
 function toggleFullscreen()
 {
+    const rootElement = mainCanvas.parentElement;
     if (isFullscreen())
     {
         if (document.exitFullscreen)
             document.exitFullscreen();
     }
-    else if (document.body.requestFullscreen)
-            document.body.requestFullscreen();
+    else if (rootElement.requestFullscreen)
+        rootElement.requestFullscreen();
 }