littlejsengine 1.24.3 → 1.26.0

package/src/engineDebug.js

@@ -6,7 +6,7 @@
  * - setDebugKeysAlways lets those keys work with the overlay closed too
  * - ASSERT and LOG macros for development (removed in release builds)
  * - Debug primitive rendering (rectangles, circles, lines, points, text)
- * - Screenshot and video capture support
+ * - Screenshot support
  * - FPS counter and performance watermark
  * - Debug overlay shows mouse position and picked objects
  * @namespace Debug
@@ -84,7 +84,24 @@ function ASSERT(assert, ...output)
 {
     if (assert) return;
     console.assert(assert, ...output)
-    throw new Error('Assert failed!'); // halt execution
+    // the error says what went wrong, so an error box or overlay that shows only the error shows the message too: a
+    // value with a toString of its own as that, a vec2 or a color, a plain object as JSON, an object of a class with
+    // none by its class's name, each cut at 200 characters, so a whole level is not the message
+    const text = output.map((value)=>
+    {
+        let text;
+        try
+        {
+            const prototype = value && typeof value === 'object' ? Object.getPrototypeOf(value) : undefined;
+            text = prototype === Object.prototype || prototype === null ? JSON.stringify(value) :
+                prototype && value.toString === Object.prototype.toString ?
+                '[' + (value.constructor?.name || 'object') + ']' : String(value);
+        }
+        catch { text = Object.prototype.toString.call(value); }
+        text = String(text); // JSON of nothing, as from a toJSON that returns nothing, is undefined
+        return text.length > 200 ? text.slice(0, 199) + '…' : text;
+    }).join(' ');
+    throw new Error(text ? 'Assert failed: ' + text : 'Assert failed!'); // halt execution
 }
 
 /** Log to console if debug is enabled, does nothing in release builds
@@ -94,7 +111,7 @@ function LOG(...output) { console.log(...output); }
 
 /** Draw a debug rectangle in world space, or on the screen with screenSpace
  *  @param {Vector2} pos
- *  @param {Vector2} [size=vec2(0)]
+ *  @param {Vector2} [size=vec2()]
  *  @param {Color|string} [color]
  *  @param {number} [time]
  *  @param {number} [angle]
@@ -329,19 +346,6 @@ function debugUpdate()
         if (keyWasPressed('Digit0'))
             levelEditor.isOpen ? levelEditor.close() : levelEditor.open();
     }
-    if (debugVideoCaptureIsActive())
-    {
-        // control to stop video capture, a capture the overlay started also stops when the overlay closes,
-        // one the game started from code runs until it calls debugVideoCaptureStop
-        if (debugKeys ? keyWasPressed('Digit8') : debugVideoCapture.fromOverlay)
-            debugVideoCaptureStop();
-    }
-    else if (debugKeys && keyWasPressed('Digit8'))
-    {
-        debugVideoCaptureStart();
-        if (debugVideoCapture)
-            debugVideoCapture.fromOverlay = true;
-    }
 }
 
 // the text beside the mouse, with the same shadow as the overlay
@@ -440,20 +444,13 @@ function debugRender()
 {
     if (debugTakeScreenshot)
     {
-        // combine canvases, remove alpha and save, before the capture check so it is taken during video capture too
+        // combine canvases, remove alpha and save
         glFlush();
         combineCanvases();
         saveCanvas(mainCanvas);
         debugTakeScreenshot = 0;
     }
 
-    if (debugVideoCaptureIsActive())
-    {
-        // don't show debug info when capturing video, but still drop the expired primitives so they don't pile up
-        debugPrimitives = debugPrimitives.filter(r=>r.timer<0);
-        return;
-    }
-
     // flush any gl sprites before drawing debug info
     glFlush();
 
@@ -682,7 +679,6 @@ function debugRender()
             debugContext.fillText('6: Debug Sound', x, y += h);
             debugContext.fillStyle = '#fff';
             debugContext.fillText('7: Save Screenshot', x, y += h);
-            debugContext.fillText('8: Toggle Video Capture', x, y += h);
             debugContext.fillStyle = debugTweakables ? '#f00' : '#fff';
             debugContext.fillText('9: Tweakables', x, y += h);
             debugContext.fillStyle = levelEditor.isOpen ? '#f00' : '#fff';
@@ -757,142 +753,6 @@ function debugRender()
     }
 }
 
-function debugRenderPost() { debugVideoCaptureIsActive() && debugVideoCaptureUpdate(); }
-
-///////////////////////////////////////////////////////////////////////////////
-// video capture - records video and audio at 60 fps using MediaRecorder API
-
-// internal variables used to capture video
-let debugVideoCapture, debugVideoCaptureIcon;
-
-/** Check if video capture is active
- *  @memberof Debug */
-function debugVideoCaptureIsActive() { return !!debugVideoCapture; }
-
-/** Start capturing video
- *  @memberof Debug */
-function debugVideoCaptureStart()
-{
-    ASSERT(!debugVideoCaptureIsActive(), 'Already capturing video!');
-
-    // everything that can fail where recording is unsupported is in the try, a missing captureStream
-    // or a MediaRecorder that refuses webm throws here and is cleaned up rather than stopping the game
-    const captureTimer = new Timer(0, true);
-    const chunks = [];
-    let videoTrack, mediaRecorder, audioStreamDestination, silentAudioSource, audioTapNode;
-    try
-    {
-        // setup captureStream to capture manually by passing 0
-        const stream = mainCanvas.captureStream(0);
-        videoTrack = stream.getVideoTracks()[0];
-        videoTrack.applyConstraints({frameRate:frameRate}).catch(()=>{});
-
-        // set up the media recorder
-        mediaRecorder = new MediaRecorder(stream,
-            {mimeType:'video/webm;codecs=vp8'});
-        mediaRecorder.ondataavailable = (e)=> chunks.push(e.data);
-        mediaRecorder.onstop = ()=>
-        {
-            const blob = new Blob(chunks, {type: 'video/webm'});
-            const url = URL.createObjectURL(blob);
-            saveDataURL(url, 'capture.webm', 1e3);
-        };
-
-        if (soundEnable)
-        {
-            // create silent audio source
-            // fixes issue where video can not start recording without audio
-            silentAudioSource = new ConstantSourceNode(audioContext, { offset: 0 });
-            silentAudioSource.connect(audioMasterGain);
-            silentAudioSource.start();
-
-            // tap the end of the master chain so a master effect is in the recording
-            // (a master effect swapped mid-capture drops the tap, the rest records silent)
-            audioTapNode = audioMasterEffectOutput || audioMasterGain;
-            audioStreamDestination = audioContext.createMediaStreamDestination();
-            audioTapNode.connect(audioStreamDestination);
-            for (const track of audioStreamDestination.stream.getAudioTracks())
-                stream.addTrack(track); // add audio tracks to capture stream
-        }
-
-        // start recording
-        mediaRecorder.start();
-    }
-    catch(e)
-    {
-        LOG('Video capture not supported in this browser!');
-        videoTrack?.stop();
-        silentAudioSource?.stop();
-        if (audioStreamDestination)
-        {
-            // the tap may not have been made before the failure
-            try { audioTapNode.disconnect(audioStreamDestination); }
-            catch { }
-        }
-        return;
-    }
-
-    if (!debugVideoCaptureIcon)
-    {
-        // create recording icon to show it is capturing video
-        debugVideoCaptureIcon = document.createElement('div');
-        debugVideoCaptureIcon.style.position = 'absolute';
-        debugVideoCaptureIcon.style.padding = '9px';
-        debugVideoCaptureIcon.style.color = '#f00';
-        debugVideoCaptureIcon.style.font = '50px monospace';
-        document.body.appendChild(debugVideoCaptureIcon);
-    }
-    // show recording icon, only once recording has started
-    debugVideoCaptureIcon.textContent = '';
-    debugVideoCaptureIcon.style.display = '';
-
-    LOG('Video capture started.');
-
-    // save debug video info
-    debugVideoCapture =
-    {
-        mediaRecorder,
-        captureTimer,
-        videoTrack,
-        silentAudioSource,
-        audioStreamDestination,
-        audioTapNode
-    };
-}
-
-/** Stop capturing video and save to disk
- *  @memberof Debug */
-function debugVideoCaptureStop()
-{
-    ASSERT(debugVideoCaptureIsActive(), 'Not capturing video!');
-
-    // stop recording
-    LOG(`Video capture ended. ${debugVideoCapture.captureTimer.get().toFixed(2)} seconds recorded.`);
-    debugVideoCaptureIcon.style.display = 'none';
-    debugVideoCapture.silentAudioSource?.stop();
-    debugVideoCapture.mediaRecorder?.stop();
-    debugVideoCapture.videoTrack?.stop();
-    if (debugVideoCapture.audioStreamDestination)
-    {
-        // the tap is already gone if the master effect changed during the capture
-        try { debugVideoCapture.audioTapNode.disconnect(debugVideoCapture.audioStreamDestination); }
-        catch { }
-    }
-    debugVideoCapture = undefined;
-}
-
-// update video capture, called automatically by engine
-function debugVideoCaptureUpdate()
-{
-    ASSERT(debugVideoCaptureIsActive(), 'Not capturing video!');
-
-    // save the video frame
-    combineCanvases();
-    debugVideoCapture.videoTrack.requestFrame();
-    debugVideoCaptureIcon.textContent = '● REC '
-        + formatTime(debugVideoCapture.captureTimer.get());
-}
-
 ///////////////////////////////////////////////////////////////////////////////
 // debug utility functions
 
@@ -912,7 +772,8 @@ function debugProtectConstant(obj)
                 get: ()=> values[prop],
                 set: (value)=> 
                 {
-                    ASSERT(false, `Cannot modify engine constant. Attempted to set constant (${obj}) property '${prop}' to '${value}'.`);
+                    ASSERT(false, `engine constants like RED can not be changed, change a copy made with copy(); ` +
+                        `tried to set ${prop} of ${obj} to ${value}`);
                 },
                 enumerable: true
             });

package/src/engineDraw.js

@@ -105,7 +105,7 @@ function isBlack(c) { return c.r <= 0 && c.g <= 0 && c.b <= 0 && c.a <= 0; }
  * 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 {Vector2|number} [index=0] - Index of the tile in 1d or 2d form
+ * @param {Vector2|number} [index] - Index of the tile in 1d or 2d form
  * @param {Vector2|number} [size] - Size of tile in pixels
  * @param {TextureInfo|number} [texture] - Texture index or info to use
  * @param {number} [padding] - How many pixels padding around tiles
@@ -127,7 +127,7 @@ function tile(index=0, size=tileDefaultSize, texture=0, padding=tileDefaultPaddi
     if (typeof size === 'number')
     {
         // if size is a number, make it a vector
-        ASSERT(size > 0);
+        ASSERT(size > 0, 'tile: size must be above 0', size);
         size = new Vector2(size, size);
     }
 
@@ -138,7 +138,8 @@ function tile(index=0, size=tileDefaultSize, texture=0, padding=tileDefaultPaddi
     {
         // no image: headless loads none and keeps the size; an image that failed to load, whose warning named it, gives
         // a tile of no size, which draws nothing; a slot never given an image is a mistake a debug build points out
-        ASSERT(headlessMode || textureInfo instanceof TextureInfo, 'tile texture is not loaded', texture);
+        ASSERT(headlessMode || textureInfo instanceof TextureInfo,
+            'tile: no texture ' + texture + ', pass its image to engineInit and make tiles in gameInit or later');
         return new TileInfo(new Vector2, headlessMode ? size.copy() : new Vector2, textureInfo, padding, bleed);
     }
 
@@ -209,7 +210,7 @@ class TileInfo
     */
     frame(frame)
     {
-        ASSERT(typeof frame === 'number');
+        ASSERT(typeof frame === 'number', 'TileInfo.frame: frame must be a number', frame);
         const w = this.size.x + this.padding*2;
         const h = this.size.y + this.padding*2;
         const x = (this.columns ? frame % this.columns : frame) * w;
@@ -578,6 +579,12 @@ class Shader
         this.program3D = undefined;
         glShaderObjects.push(this); // a lost context drops the programs of every one
     }
+
+    /** Let go of this shader: its compiled programs are freed and it leaves the engine's list of shaders, which
+     *  keeps every one made for a lost context, so a scene made again and again, or an editor trying snippets, does
+     *  not keep them all; calling it again does nothing, and a draw with it afterwards compiles it again and takes it
+     *  back, so only let go of one no object still draws with when it should stay freed */
+    dispose() { glShaderDispose(this); }
 }
 
 ///////////////////////////////////////////////////////////////////////////////
@@ -589,10 +596,10 @@ class Shader
  *  @param {TileInfo} [tileInfo] - Tile info to use, untextured if undefined
  *  @param {Color}    [color=WHITE] - Color to modulate with
  *  @param {number}   [angle] - Angle to rotate by
- *  @param {boolean}  [mirror] - Is image flipped along the Y axis?
+ *  @param {boolean}  [mirror] - Is the image flipped left to right?
  *  @param {Color}    [additiveColor] - Additive color to be applied if any
  *  @param {boolean}  [useWebGL=glEnable] - Use accelerated WebGL rendering?
- *  @param {boolean}  [screenSpace=drawScreenSpace] - Are the pos and size are in screen space?
+ *  @param {boolean}  [screenSpace=drawScreenSpace] - Are the pos and size in screen space?
  *  @param {CanvasRenderingContext2D|OffscreenCanvasRenderingContext2D} [context] - Canvas 2D context to draw to
  *  @memberof Draw */
 function drawTile(pos, size=vec2(1), tileInfo, color=WHITE,
@@ -600,6 +607,8 @@ function drawTile(pos, size=vec2(1), tileInfo, color=WHITE,
 {
     ASSERT(isVector2(pos), 'pos must be a vec2');
     ASSERT(isVector2(size), 'size must be a vec2');
+    ASSERT(!tileInfo || tileInfo instanceof TileInfo, 'drawTile: tileInfo must be a TileInfo, color comes after it',
+        tileInfo);
     ASSERT(isColor(color), 'color is invalid');
     ASSERT(isNumber(angle), 'angle must be a number');
     ASSERT(!additiveColor || isColor(additiveColor), 'additiveColor must be a color');
@@ -663,6 +672,8 @@ function drawTile(pos, size=vec2(1), tileInfo, color=WHITE,
             {
                 // un-flip Y so the image renders right-side up under drawCanvas2D's Y flip
                 context.scale(1, -1);
+                // smooth or pixelated as the texture says, as WebGL draws it, inside drawCanvas2D's save
+                textureInfo.pixelated === undefined || (context.imageSmoothingEnabled = !textureInfo.pixelated);
                 // calculate uvs and render
                 const x = tileInfo.pos.x,  y = tileInfo.pos.y;
                 const w = tileInfo.size.x, h = tileInfo.size.y;
@@ -762,9 +773,9 @@ function drawRectGradient(pos, size=vec2(1), colorTop=WHITE, colorBottom=CLEAR_W
  *  @param {Vector2}  pos          - Center of the rect in world space
  *  @param {Vector2}  size         - Size of the rect in world space
  *  @param {Vector2}  wrapCount    - How many times the texture repeats (x, y)
- *  @param {TextureInfo|number} [texture=0] - TextureInfo or texture index into textureInfos
+ *  @param {TextureInfo|number} [texture] - TextureInfo or texture index into textureInfos
  *  @param {Color}    [color=WHITE] - Color to modulate with
- *  @param {number}   [angle=0] - Angle to rotate by
+ *  @param {number}   [angle] - Angle to rotate by
  *  @param {Color}    [additiveColor] - Additive color to be applied if any
  *  @param {boolean}  [useWebGL=glEnable] - Use accelerated WebGL rendering?
  *  @param {boolean}  [screenSpace=drawScreenSpace] - Are pos and size in screen space?
@@ -826,12 +837,29 @@ function drawTextureWrapped(pos, size, wrapCount, texture=0, color=WHITE,
     // alpha is baked into pixels by bakeTintedImage's additive branch;
     // in that case globalAlpha must NOT also apply color.a
     const alphaBaked = !noTint && additiveColor && !isBlack(additiveColor);
-    const source = noTint
-        ? textureInfo.image
-        : bakeTintedImage(textureInfo.image, color, additiveColor);
+    let source = textureInfo.image;
+    if (!noTint)
+    {
+        // a bake is a pass over every pixel, so it is kept for the image until its tint changes; a canvas, which has
+        // getContext, may have been drawn into since, so it is baked again at every draw, its copy kept at its size
+        const key = color.r + ',' + color.g + ',' + color.b + ',' + color.a +
+            (additiveColor ? ',' + additiveColor.r + ',' + additiveColor.g + ',' + additiveColor.b + ',' + additiveColor.a : '');
+        let baked = drawTextureWrappedBakes.get(source);
+        if (baked?.key !== key || 'getContext' in source)
+        {
+            const kept = baked?.context, fits = kept?.canvas.width === (source.width|0) &&
+                kept?.canvas.height === (source.height|0);
+            const bakeContext = fits ? kept : createCanvasContext(source.width|0, source.height|0, true);
+            bakeTintedImage(source, color, additiveColor, bakeContext);
+            drawTextureWrappedBakes.set(source, baked = {key, context: bakeContext});
+        }
+        source = baked.context.canvas;
+    }
 
     context = context || drawContext;
     context.save();
+    // smooth or pixelated as the texture says, as WebGL draws it
+    textureInfo.pixelated === undefined || (context.imageSmoothingEnabled = !textureInfo.pixelated);
     context.translate(pos.x + .5, pos.y + .5);
     context.rotate(angle);
     context.globalAlpha = alphaBaked ? 1 : color.a;
@@ -1106,9 +1134,9 @@ function drawEllipse(pos, size=vec2(1), color=WHITE, angle=0, lineWidth=0, lineC
 
 /** Draw colored circle using passed in point
  *  @param {Vector2} pos
- *  @param {number}  [size=1] - Diameter
+ *  @param {number}  [size] - Diameter
  *  @param {Color}   [color=WHITE]
- *  @param {number}  [lineWidth=0]
+ *  @param {number}  [lineWidth]
  *  @param {Color}   [lineColor=BLACK]
  *  @param {boolean} [useWebGL=glEnable]
  *  @param {boolean} [screenSpace=drawScreenSpace]
@@ -1203,7 +1231,7 @@ function drawEllipseGradient(pos, size=vec2(1), colorInner=WHITE, colorOuter=CLE
  *  - If drawing mostly textured sprites, bake the gradient into a texture and use drawTile instead
  *  - Stacking gradients at the exact same position may show a faint vertical artifact
  *  @param {Vector2} pos
- *  @param {number}  [size=1] - Diameter
+ *  @param {number}  [size] - Diameter
  *  @param {Color}   [colorInner=WHITE]
  *  @param {Color}   [colorOuter=CLEAR_WHITE]
  *  @param {boolean} [useWebGL=glEnable]
@@ -1268,7 +1296,7 @@ function drawCanvas2D(pos, size, angle=0, mirror=false, drawFunction, screenSpac
  *  @param {Color}   [color=WHITE]
  *  @param {number}  [lineWidth]
  *  @param {Color}   [lineColor=BLACK]
- *  @param {'left'|'center'|'right'} [textAlign='center']
+ *  @param {'left'|'center'|'right'} [textAlign]
  *  @param {string}  [font=fontDefault]
  *  @param {string}  [fontStyle]
  *  @param {number}  [maxWidth]
@@ -1277,6 +1305,10 @@ function drawCanvas2D(pos, size, angle=0, mirror=false, drawFunction, screenSpac
  *  @memberof Draw */
 function drawText(text, pos, size=1, color=WHITE, lineWidth=0, lineColor=BLACK, textAlign='center', font=fontDefault, fontStyle='', maxWidth, angle=0, context=drawContext)
 {
+    // checked before it is scaled, a vec2 size would come out NaN
+    ASSERT(isVector2(pos), 'drawText: pos must be a vec2', pos);
+    ASSERT(isNumber(size), 'drawText: size is a number, the height of the text in world units', size);
+
     // convert to screen space
     pos = worldToScreen(pos);
     size *= cameraScale;
@@ -1288,6 +1320,73 @@ function drawText(text, pos, size=1, color=WHITE, lineWidth=0, lineColor=BLACK,
     drawTextScreen(text, pos, size, color, lineWidth, lineColor, textAlign, font, fontStyle, maxWidth, angle, context);
 }
 
+// the fonts a debug build has checked the canvas takes, by style and family, as a size never decides it and a zooming
+// camera draws at a new size each frame, and a font it does not, which would draw as 10px sans-serif with no word,
+// warned of once; a family name with spaces and digits, as Press Start 2P, needs quotes
+const drawFontsChecked = new Set;
+function drawFontCheck(context, fontText, font, fontStyle)
+{
+    const key = fontStyle + '|' + font;
+    if (drawFontsChecked.has(key)) return;
+    drawFontsChecked.add(key);
+    const sentinel = '1px littlejs-font-check'; // no font a game draws with
+    context.font = sentinel;
+    context.font = fontText;
+    if (context.font === sentinel)
+        console.warn(`the canvas does not take the font ${font}, so text draws as 10px sans-serif; ` +
+            `a family name with spaces or digits goes in quotes, as "'Press Start 2P'"`);
+}
+
+// the lines of a text, split at a Windows line ending too
+const textLines = (text)=> (text += '').includes('\r') ? text.split(/\r?\n/) : text.split('\n');
+
+// how many lines a text has, counted without splitting it
+function textLineCount(text)
+{
+    let count = 1;
+    for (let i = -1; (i = text.indexOf('\n', i + 1)) >= 0;)
+        ++count;
+    return count;
+}
+
+// the characters of a line of text as a reader counts them, each as its first code point: an emoji with its joiners
+// is one, and a letter with combining accents its letter; plain text takes the quick way, it is most of what is drawn,
+// so read character i with textCharacterCode
+const textIntl = /** @type {any} */ (globalThis.Intl); // Segmenter is newer than the library the source is checked with
+const textSegmenter = textIntl?.Segmenter && new textIntl.Segmenter;
+// a line with no mark, joiner or character past the 16 bit range, plain or accented letters of their own, Greek or
+// Japanese, has one code unit a character, so it is handed back as it is, read with charCodeAt, and nothing is made;
+// the class also holds what the segmenter joins that is not a mark: joiners, prepend, Thai and Lao SARA AM, Hangul
+// jamo extended and the halfwidth katakana voiced marks
+const textJoins = /[\p{M}\u200c\u200d\u0600-\u0605\u06dd\u070f\u0890\u0891\u08e2\u0d4e\u0e33\u0eb3\u1100-\u11ff\ua960-\ua97c\ud7b0-\ud7fb\uff9e\uff9f\u{10000}-\u{10ffff}]/u;
+/** @return {string|Array<number>} */
+function textCharacters(line)
+{
+    if (!textJoins.test(line))
+        return line;
+    // where graphemes can not be split, code points with the joiners, variation selectors and accents left out
+    return textSegmenter ? Array.from(textSegmenter.segment(line), (s)=> s.segment.codePointAt(0)) :
+        Array.from(line, (c)=> c.codePointAt(0)).filter((c)=> c !== 0x200d && c !== 0xfe0f && !(c >= 0x300 && c < 0x370));
+}
+
+// the characters of a text as a reader counts them, each a string, an emoji with its joiners one; code points where
+// graphemes can not be split, and code units for a text that needs nothing joined, the quick way
+const textGraphemes = (text)=> !textJoins.test(text) ? text.split('') :
+    textSegmenter ? Array.from(textSegmenter.segment(text), (s)=> s.segment) : [...text];
+
+// character i of what textCharacters gave, its code; a Latin letter with an accent of its own, as é, is its letter, as
+// an e with a combining accent is, for the fonts that draw only the plain letters
+const textCharacterCode = (characters, i)=>
+    textBaseLetter(typeof characters == 'string' ? characters.charCodeAt(i) : characters[i]);
+const textBaseLetters = new Map;
+function textBaseLetter(code)
+{
+    if (code < 0xc0 || code >= 0x250) return code;
+    let base = textBaseLetters.get(code);
+    base === undefined && textBaseLetters.set(code, base = String.fromCharCode(code).normalize('NFD').charCodeAt(0));
+    return base;
+}
+
 /** Draw text in screen space
  *  Automatically splits new lines into rows
  *  @param {string|number}  text
@@ -1305,27 +1404,29 @@ function drawText(text, pos, size=1, color=WHITE, lineWidth=0, lineColor=BLACK,
  *  @memberof Draw */
 function drawTextScreen(text, pos, size, color=WHITE, lineWidth=0, lineColor=BLACK, textAlign='center', font=fontDefault, fontStyle='', maxWidth, angle=0, context=drawContext)
 {
-    ASSERT(isStringLike(text), 'text must be a string');
-    ASSERT(isVector2(pos), 'pos must be a vec2');
-    ASSERT(isNumber(size), 'size must be a number');
-    ASSERT(isColor(color), 'color must be a color');
-    ASSERT(isNumber(lineWidth), 'lineWidth must be a number');
-    ASSERT(isColor(lineColor), 'lineColor must be a color');
-    ASSERT(['left','center','right'].includes(textAlign), 'align must be left, center, or right');
+    ASSERT(isStringLike(text), 'drawTextScreen: text must be a string', text);
+    ASSERT(isVector2(pos), 'drawTextScreen: pos must be a vec2', pos);
+    ASSERT(isNumber(size), 'drawTextScreen: size is a number, the height of the text in pixels', size);
+    ASSERT(isColor(color), 'drawTextScreen: color must be a color', color);
+    ASSERT(isNumber(lineWidth), 'drawTextScreen: lineWidth must be a number', lineWidth);
+    ASSERT(isColor(lineColor), 'drawTextScreen: lineColor must be a color', lineColor);
+    ASSERT(['left','center','right'].includes(textAlign), 'drawTextScreen: textAlign must be left, center or right', textAlign);
     ASSERT(isStringLike(font), 'font must be a string');
     ASSERT(isStringLike(fontStyle), 'fontStyle must be a string');
     ASSERT(isNumber(angle), 'angle must be a number');
 
     if (headlessMode && !context) return; // headless has no canvas, only a context passed in is drawn to
     
-    const lines = (text+'').split('\n');
+    const lines = textLines(text); // a Windows line ending too
     // save before style mutations so caller's context state is preserved
     context.save();
     context.fillStyle = color.toString();
     context.strokeStyle = lineColor.toString();
     context.lineWidth = lineWidth;
     context.textAlign = textAlign;
-    context.font = fontStyle + ' ' + size + 'px '+ font;
+    const fontText = fontStyle + ' ' + size + 'px '+ font;
+    debug && drawFontCheck(context, fontText, font, fontStyle);
+    context.font = fontText;
     context.textBaseline = 'middle';
     context.translate(pos.x + .5, pos.y + .5); // a screen position is the center of a pixel, as for every other draw
     context.rotate(angle);
@@ -1609,7 +1710,7 @@ function setShader(shader)
 
 /** Set an extra canvas to composite behind the engine canvases when combining
  *  Plugins that insert their own canvas below the LittleJS canvases should set
- *  this so it appears in screenshots and video capture
+ *  this so it appears in screenshots
  *  @param {HTMLCanvasElement} [canvas]
  *  @memberof Draw */
 function setBackgroundCanvas(canvas) { backgroundCanvas = canvas; }
@@ -1665,24 +1766,27 @@ function tintImageData(data, color, additiveColor)
     return false;
 }
 
-// Internal: bake a color/additive-color tint into workReadCanvas at the
-// image's native resolution. Returns the work canvas, suitable for
-// passing to context.createPattern. Used by drawTextureWrapped's
-// Canvas2D path. Caller is responsible for short-circuiting when no
+// Internal: bake a color/additive-color tint into a context's canvas, the work
+// canvas by default, at the image's native resolution. Returns that canvas,
+// suitable for passing to context.createPattern. Used by drawTextureWrapped's
+// Canvas2D path, which keeps a canvas of its own for each image. Caller is responsible for short-circuiting when no
 // tint is needed (i.e. color is white and additiveColor is black/none).
-function bakeTintedImage(image, color, additiveColor)
+function bakeTintedImage(image, color, additiveColor, context=workReadContext)
 {
     const w = image.width|0, h = image.height|0;
-    workReadCanvas.width = w;
-    workReadCanvas.height = h;
-    workReadContext.drawImage(image, 0, 0);
+    context.canvas.width = w;
+    context.canvas.height = h;
+    context.drawImage(image, 0, 0);
 
-    const imageData = workReadContext.getImageData(0, 0, w, h);
+    const imageData = context.getImageData(0, 0, w, h);
     tintImageData(imageData.data, color, additiveColor);
-    workReadContext.putImageData(imageData, 0, 0);
-    return workReadCanvas;
+    context.putImageData(imageData, 0, 0);
+    return context.canvas;
 }
 
+// the tinted bake drawTextureWrapped keeps for each image, its tint and the context it is in
+const drawTextureWrappedBakes = new WeakMap;
+
 /** Internal: draw an image with color and additive color applied in Canvas2D, drawTile calls it
  *  This is slower than normal drawImage when color is applied
  *  @ignore
@@ -1748,10 +1852,10 @@ function toggleFullscreen()
     if (isFullscreen())
     {
         if (document.exitFullscreen)
-            document.exitFullscreen();
+            document.exitFullscreen()?.catch?.(()=> {}); // refused outside a click, it stays as it is
     }
     else if (rootElement.requestFullscreen)
-        rootElement.requestFullscreen();
+        rootElement.requestFullscreen()?.catch?.(()=> {});
 }
 
 /** Set the cursor style
@@ -1815,7 +1919,7 @@ class ImageFont
         if (typeof size === 'number')
         {
             // if size is a number, make it a vector
-            ASSERT(size > 0);
+            ASSERT(size > 0, 'ImageFont.drawText: size must be above 0', size);
             size *= cameraScale;
             size = new Vector2(size, size);
         }
@@ -1853,15 +1957,16 @@ class ImageFont
         const tileInfo = this.tileInfo.frame(0);
 
         // draw each line of text, centered vertically like drawTextScreen when center is set
-        const lines = (text+'').split('\n');
+        const lines = textLines(text); // a Windows line ending too
         const centerOffsetY = center ? (lines.length-1) * glyphSize.y / 2 : 0;
         lines.forEach((line, j)=>
         {
-            const centerOffset = center ? (line.length-1) * glyphSize.x / 2 : 0;
-            for (let i=line.length; i--;)
+            const characters = textCharacters(line);
+            const centerOffset = center ? (characters.length-1) * glyphSize.x / 2 : 0;
+            for (let i=characters.length; i--;)
             {
                 // get the glyph, out of range characters use the last one
-                const charCode = line.charCodeAt(i);
+                const charCode = textCharacterCode(characters, i);
                 this.getGlyphPos(charCode < 32 || charCode > 127 ? 95 : charCode - 32, tileInfo.pos);
 
                 // snap the glyph edges to whole pixels