litecanvas 0.82.0 → 0.83.1

package/README.md

@@ -2,12 +2,15 @@
 
 # Litecanvas
 
+[![NPM Version](https://flat.badgen.net/npm/v/litecanvas?scale=1&label=NPM)](https://www.npmjs.com/package/litecanvas/)
+
 Litecanvas is a lightweight HTML5 canvas 2D engine suitable for small web games, prototypes, game jams, animations, creative coding, learning game programming and game design, etc.
 
 :warning: **This project is still under development. All feedback is appreciated!** :warning:
 
-[![Discord Server](https://flat.badgen.net/static/CHAT/ON%20DISCORD/5865f2?scale=1.5)](https://discord.com/invite/r2c3rGsvH3)
-[![Discord Server](https://flat.badgen.net/static/FOLLOW/ON%20ITCH.IO/fa5c5c?scale=1.5)](https://bills.itch.io/litecanvas)
+[![Itch](https://flat.badgen.net/static/FOLLOW/ON%20ITCH.IO/fa5c5c?scale=1.25)](https://bills.itch.io/litecanvas)
+[![Discord Server](https://flat.badgen.net/static/CHAT/ON%20DISCORD/5865f2?scale=1.25&icon=discord)](https://discord.com/invite/r2c3rGsvH3)
+[![Playground](https://flat.badgen.net/static/CODE/ON%20PLAYGROUND/5f3dc4?scale=1.25)](https://litecanvas.js.org/)
 
 ### Features
 
@@ -38,8 +41,10 @@ If you prefer, you can manually install via [NPM](https://www.npmjs.com/package/
 npm install litecanvas
 ```
 
+### Show me the code!
+
 ```js
-// import the package or put the CDN script in your HTML
+// import the package or put a script tag in your HTML
 // CDN: https://unpkg.com/litecanvas/dist/dist.dev.js
 import litecanvas from 'litecanvas'
 
@@ -49,43 +54,44 @@ litecanvas({
     loop: { init, update, draw, tapped },
 })
 
+// this function runs once at the beginning
 function init() {
-    // this function run once
-    // before the game starts
-    bg = 0
-    color = 3
-    radius = 32
-    posx = CX // center X or (canvas width / 2)
-    posy = CY // center Y or (canvas width / 2)
+    bg = 0 // the color #0 (black)
+    color = 3 // the color #3 (white)
+    radius = W / 10 // the canvas width/10
+    posx = CX // center X (or canvas width/2)
+    posy = CY // center Y (or canvas width/2)
 }
 
-// this function detect taps/clicks
-// and changes the circle position
+// this function detect clicks/touches
 function tapped(x, y) {
+    // changes the circle position
+    // based on the position of the tap
     posx = x
     posy = y
 }
 
-// this function controls the game logic
+// put the game logic in this function
 function update(dt) {
     // make the circle falls 100 pixels per second
-    posy += 100 * dt
+    posy += 200 * dt
 }
 
-// this function render the game scene
+// put the game rendering in this function
 function draw() {
     cls(bg) // clear the screen
     circfill(posx, posy, radius, color) // draw a circle
+    text(10, 10, 'Tap anywhere') // draw a text
 }
 ```
 
-## Docs
+[Play with this code in the playground](https://litecanvas.js.org?c=eJx9k91u4yAQhe%2F9FCP1ovauFZL2LlKu9hFaadtLDBNDQwDBeOOoyrsv4KR2V9FasuSfjzNnDgNj8EI8EHArISINHkghoO21xYoxMMiDhaMLuAVF5OOWMaMJBbd%2FeFx9xJULPeOdG2il6Ggekghp28dqpurPCtJlnPNb%2BARtNbUweMkJW5CBn1og7j1KuLTVpalyXVI6wn6wgrSzEAYbwVmBwKkY7DAZtKlO9cVk2bqBqVbXww7WUIQQhDMuwMMa6s5wcWgKMn3cwfM%2F1DPUJ5W8T1TgUg8xYb%2BBwWZWLI3BSUtSbLMuqHdxTOCvtwwJtIQB3qBOmt%2Fop%2BZGnzP9vqDf79KXO4FITOESCKPFITJyg1AY5yymOOuxhfMtkVxFcdtjnBrQQRjMLnRecUM6HtM2ZAU1%2FwS3L%2B9JddnouOzjfLXph2mDen7EtOO9FmljvpufbU4zUEtamDzyAy4d7rkxMSW%2FBq9HTI8%2BBRVROCvn%2Bj938JSIHyDpno%2BAVmJI0%2FIfL3kOv8ZHmFh3fVNCyyegSEUREKeksre9NqbOUbTFQ3sdlXaao7I2awK%2FdlIWEo5Ub9Yt5Pvxlft08M4nhQEflysyVl3%2BAgslJEg%3D)
 
-Check out our [Cheatsheet](https://litecanvas.js.org/about.html).
+https://github.com/user-attachments/assets/854ac6bd-724f-4da8-bb3c-bc04dba5d8c8
 
-## Basic Demos
+## Demos
 
-Try some demos in our playground:
+Try some demos in the playground:
 
 - [Pong](https://litecanvas.js.org?c=eJy1Vlly20YQ%2FccpOl8ATBACuEiWYslFM5DlKkdMkUwkJpVKwcCQnAoEoIChpdiWr%2BAT%2BC%2BHyHlygVwh3TODTZYU%2F0QsDdELenm9DBMmIA%2FjCzgGf%2BA5BuAf0mdEj2vykkivEa%2BQHg01HbNSkALpKc6bMElaj6vmccHfsZZpYk3STUK8yhovpLeaWjVUmTMWIzmoQimjrGi9m%2FA1K5EcKlKwG0EOta4ICyFfX4dJyQwj4YJFYfo2LK33UuOax2J7BMMKhy3jm604gtFTZNzahrG3B9NdKbIr%2BPnd6SWU2S6NS1hnBYgtL2ETXjHSyQsmBGdFn29SjM%2BIsrQU8GL24%2Fk0QPe%2FOOCAz4b05XpDOgbIcGBAHAcOR54WVB8XJe6%2B0t%2F%2F9duHfSyWk%2FmSXHju2EFUYIxIyddGeAzbXsYHnvYsD%2B3IGz1m%2FsXk9evfZqeni%2Bk8CM7Jj%2B8OfZnOGB14rkdeyQ8eB9KbpPqH7iGe%2B3TSx3N9v3oayPfkOZKnTxka610aCZ6lwFMuLBveN42FfqfB%2BTKYXzYdVvNW0Iez4NXLsyXswajTBqhz8eq75RkK%2FIFx2%2FIhwjxnsXXjwB%2BVJ74G6xvdMhWv20Wi2LGGvb6xJPh2zUIEd0UqydvOnHz8aN1glHLq9mBgd0LZ5XEomBWL%2BwNRRgErJLjAsSmjgrH0ea2pJ%2BAYR6KtTJ0J2VtWPDekKrKukMS2ZRRHnLD2pCesyC05zSpmVVm7fjXOUlOglmi9j2SoDaqY6pCk0WcUjzbvSRHDGWzkPQXHiapQrarqpbAyaouq4r1moZzokrcLVbWKv%2B91eNQqBw2rWhnquw9%2Bp6Tdhrd1MSscVK2kVcizklMBW23aO1bL7IneW08gFq2OVeJVV6zWGCL7BndL1N5W2qfiK5%2FYLnew1o7byCgIP3zQQT2rZW2wVJzH0G%2FSbwKoG%2F22KZpK4UFjcmc%2FaqpOKNqy6HeVT5QlCS9pCq652LYbk1yitGCRUDk6%2BmKpA2g%2Fqdala0qeF7iI7HsCbCWr7pEeXXJfEbUEQElt1SZytXcHOS7C63pvRUlpefaji4W2VJjgurXMiKWCFaYD5hUnCEy7o1Vikla11LoiSy9Gp9qGaGM5%2BQGWM3U1oM2hfbeWqvVPaEKbcAjqNU8S60sw6edBbUdmx4tI6j5Ummp3PJDBfRhIhAiCbZhueLq5g4Hl4%2B1F%2F%2Bbfn%2F%2F8569PYLoFy1koVDa2A6P77bI0fsRqtW8q65Zp4jTJ7rBdzHtBUVl4E3v2XST%2F70piVAO8Xc2Xk%2B8DmP0UzM1ODb4wh%2FvEc5%2BO%2F8tqT6G4mM7mwREl%2B1UpY6f%2FC73Is6Q%3D)
 - [Bouncing Ball](https://litecanvas.js.org?c=eJxtUstugzAQvPMVewTiBCdtpVYpPVStSu6ReraMiSy5gIyhRUn%2BvQZvg0NzsGTveGdmH0oYqKtGGlmVkEIneLimlNgTkQDsW1Vcmn64HzTr8KpZLtvG%2Fr9%2FDAIljeCs7FgTRkFQtCUfyWQpTRjB0WNBgc%2Fd2z6LNyR7331k%2B2QTbSd2%2FEIRtNDZ42zrnBkR5sbx%2Fhlf%2FcAivajYVwy58fH%2BCu8d7hlzBGhhyvcyPHhKTxJ4raw3AVVRgMgPorFRWUA4OVtgr15gLBtOJ8%2F2EsFnoK6iK0txCsv19kaUrp4exrDXgBS4Yl%2B1p0xwTMQpo1ZkE89zl7Y%2BuPjEzs%2F99KOf%2F9LDyFwKKowC%2FtRyzb5xE7hqQjrOm0vNC6mUb3jiJGj9brYAw27YwnrHpoVpdQnHIWIlfwGU6d0i)

package/dist/dist.dev.js

@@ -32,9 +32,7 @@
   function litecanvas(settings = {}) {
     const root = globalThis, math = Math, TWO_PI = math.PI * 2, raf = requestAnimationFrame, _browserEventListeners = [], on = (elem, evt, callback) => {
       elem.addEventListener(evt, callback, false);
-      _browserEventListeners.push(
-        () => elem.removeEventListener(evt, callback, false)
-      );
+      _browserEventListeners.push(() => elem.removeEventListener(evt, callback, false));
     }, isNumber = Number.isFinite, defaults = {
       width: null,
       height: null,
@@ -93,7 +91,7 @@
        *
        * @type {number}
        */
-      HALF_PI: math.PI / 2,
+      HALF_PI: TWO_PI / 4,
       /**
        * Calculates a linear (interpolation) value over t%.
        *
@@ -158,16 +156,13 @@
        * @param {number} max
        * @returns {number}
        */
-      clamp: (value, min, max) => {
+      clamp: (value, min2, max2) => {
         DEV: assert(isNumber(value), "clamp: 1st param must be a number");
-        DEV: assert(isNumber(min), "clamp: 2nd param must be a number");
-        DEV: assert(isNumber(max), "clamp: 3rd param must be a number");
-        DEV: assert(
-          max > min,
-          "randi: the 2nd param must be less than the 3rd param"
-        );
-        if (value < min) return min;
-        if (value > max) return max;
+        DEV: assert(isNumber(min2), "clamp: 2nd param must be a number");
+        DEV: assert(isNumber(max2), "clamp: 3rd param must be a number");
+        DEV: assert(max2 > min2, "clamp: the 2nd param must be less than the 3rd param");
+        if (value < min2) return min2;
+        if (value > max2) return max2;
         return value;
       },
       /**
@@ -178,19 +173,12 @@
        * @param {number} max
        * @returns {number}
        */
-      wrap: (value, min, max) => {
+      wrap: (value, min2, max2) => {
         DEV: assert(isNumber(value), "wrap: 1st param must be a number");
-        DEV: assert(isNumber(min), "wrap: 2nd param must be a number");
-        DEV: assert(isNumber(max), "wrap: 3rd param must be a number");
-        DEV: assert(
-          max > min,
-          "randi: the 2nd param must be less than the 3rd param"
-        );
-        DEV: assert(
-          max !== min,
-          "randi: the 2nd param must be not equal to the 3rd param"
-        );
-        return value - (max - min) * math.floor((value - min) / (max - min));
+        DEV: assert(isNumber(min2), "wrap: 2nd param must be a number");
+        DEV: assert(isNumber(max2), "wrap: 3rd param must be a number");
+        DEV: assert(max2 > min2, "wrap: the 2nd param must be less than the 3rd param");
+        return value - (max2 - min2) * math.floor((value - min2) / (max2 - min2));
       },
       /**
        * Re-maps a number from one range to another.
@@ -209,6 +197,7 @@
         DEV: assert(isNumber(stop1), "map: 3rd param must be a number");
         DEV: assert(isNumber(start2), "map: 4th param must be a number");
         DEV: assert(isNumber(stop2), "map: 5th param must be a number");
+        DEV: assert(max !== min, "map: the 3rd param must be different than the 2nd param");
         const result = (value - start1) / (stop1 - start1) * (stop2 - start2) + start2;
         return withinBounds ? instance.clamp(result, start2, stop2) : result;
       },
@@ -233,10 +222,19 @@
        *
        * @param {number} from - the lower bound
        * @param {number} to - the higher bound
-       * @param {number} t - the amount
-       * @param {(n: number) => number} fn - the periodic function (which default to `Math.sin`)
+       * @param {number} t - value passed to the periodic function
+       * @param {(n: number) => number} [fn] - the periodic function (which default to `Math.sin`)
        */
-      wave: (from, to, t, fn = Math.sin) => from + (fn(t) + 1) / 2 * (to - from),
+      wave: (from, to, t, fn = Math.sin) => {
+        DEV: assert(isNumber(from), "wave: 1st param must be a number");
+        DEV: assert(isNumber(to), "wave: 2nd param must be a number");
+        DEV: assert(isNumber(t), "wave: 3rd param must be a number");
+        DEV: assert(
+          "function" === typeof fn,
+          "wave: 4rd param must be a function (n: number) => number"
+        );
+        return from + (fn(t) + 1) / 2 * (to - from);
+      },
       /** RNG API */
       /**
        * Generates a pseudorandom float between min (inclusive) and max (exclusive)
@@ -246,18 +244,15 @@
        * @param {number} [max=1.0]
        * @returns {number} the random number
        */
-      rand: (min = 0, max = 1) => {
-        DEV: assert(isNumber(min), "rand: 1st param must be a number");
-        DEV: assert(isNumber(max), "rand: 2nd param must be a number");
-        DEV: assert(
-          max > min,
-          "rand: the 1st param must be less than the 2nd param"
-        );
+      rand: (min2 = 0, max2 = 1) => {
+        DEV: assert(isNumber(min2), "rand: 1st param must be a number");
+        DEV: assert(isNumber(max2), "rand: 2nd param must be a number");
+        DEV: assert(max2 > min2, "rand: the 1st param must be less than the 2nd param");
         const a = 1664525;
         const c = 1013904223;
         const m = 4294967296;
         _rngSeed = (a * _rngSeed + c) % m;
-        return _rngSeed / m * (max - min) + min;
+        return _rngSeed / m * (max2 - min2) + min2;
       },
       /**
        * Generates a pseudorandom integer between min (inclusive) and max (inclusive)
@@ -266,14 +261,11 @@
        * @param {number} [max=1]
        * @returns {number} the random number
        */
-      randi: (min = 0, max = 1) => {
-        DEV: assert(isNumber(min), "randi: 1st param must be a number");
-        DEV: assert(isNumber(max), "randi: 2nd param must be a number");
-        DEV: assert(
-          max > min,
-          "randi: the 1st param must be less than the 2nd param"
-        );
-        return math.floor(instance.rand(min, max + 1));
+      randi: (min2 = 0, max2 = 1) => {
+        DEV: assert(isNumber(min2), "randi: 1st param must be a number");
+        DEV: assert(isNumber(max2), "randi: 2nd param must be a number");
+        DEV: assert(max2 > min2, "randi: the 1st param must be less than the 2nd param");
+        return math.floor(instance.rand(min2, max2 + 1));
       },
       /**
        * Initializes the random number generator with an explicit seed value.
@@ -303,13 +295,7 @@
         if (null == color) {
           _ctx.clearRect(0, 0, _ctx.canvas.width, _ctx.canvas.height);
         } else {
-          instance.rectfill(
-            0,
-            0,
-            _ctx.canvas.width,
-            _ctx.canvas.height,
-            color
-          );
+          instance.rectfill(0, 0, _ctx.canvas.width, _ctx.canvas.height, color);
         }
       },
       /**
@@ -321,14 +307,13 @@
        * @param {number} height
        * @param {number} [color=0] the color index
        * @param {number|number[]} [radii] A number or list specifying the radii used to draw a rounded-borders rectangle
+       *
+       * @see https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/roundRect
        */
       rect(x, y, width, height, color, radii) {
         DEV: assert(isNumber(x), "rect: 1st param must be a number");
         DEV: assert(isNumber(y), "rect: 2nd param must be a number");
-        DEV: assert(
-          isNumber(width) && width > 0,
-          "rect: 3rd param must be a positive number"
-        );
+        DEV: assert(isNumber(width) && width > 0, "rect: 3rd param must be a positive number");
         DEV: assert(
           isNumber(height) && height >= 0,
           "rect: 4th param must be a positive number or zero"
@@ -381,13 +366,7 @@
           "rectfill: 6th param must be a number or array of at least 2 numbers"
         );
         _ctx.beginPath();
-        _ctx[radii ? "roundRect" : "rect"](
-          ~~x,
-          ~~y,
-          ~~width,
-          ~~height,
-          radii
-        );
+        _ctx[radii ? "roundRect" : "rect"](~~x, ~~y, ~~width, ~~height, radii);
         instance.fill(color);
       },
       /**
@@ -448,14 +427,8 @@
       line(x1, y1, x2, y2, color) {
         DEV: assert(isNumber(x1), "line: 1st param must be a number");
         DEV: assert(isNumber(y1), "line: 2nd param must be a number");
-        DEV: assert(
-          isNumber(x2),
-          "line: 3rd param must be a positive number or zero"
-        );
-        DEV: assert(
-          isNumber(y2),
-          "line: 4th param must be a positive number or zero"
-        );
+        DEV: assert(isNumber(x2), "line: 3rd param must be a positive number or zero");
+        DEV: assert(isNumber(y2), "line: 4th param must be a positive number or zero");
         DEV: assert(
           null == color || isNumber(color) && color >= 0,
           "line: 5th param must be a positive number or zero"
@@ -494,10 +467,7 @@
           Array.isArray(segments) && segments.length > 0,
           "linedash: 1st param must be an array of numbers"
         );
-        DEV: assert(
-          isNumber(offset),
-          "linedash: 2nd param must be a number"
-        );
+        DEV: assert(isNumber(offset), "linedash: 2nd param must be a number");
         _ctx.setLineDash(segments);
         _ctx.lineDashOffset = offset;
       },
@@ -518,10 +488,7 @@
           null == color || isNumber(color) && color >= 0,
           "text: 4th param must be a positive number or zero"
         );
-        DEV: assert(
-          "string" === typeof fontStyle,
-          "text: 5th param must be a string"
-        );
+        DEV: assert("string" === typeof fontStyle, "text: 5th param must be a string");
         _ctx.font = `${fontStyle} ${_fontSize}px ${_fontFamily}`;
         _ctx.fillStyle = _colors[~~color % _colors.length];
         _ctx.fillText(message, ~~x, ~~y);
@@ -532,10 +499,7 @@
        * @param {string} family
        */
       textfont(family) {
-        DEV: assert(
-          "string" === typeof family,
-          "textfont: 1st param must be a string"
-        );
+        DEV: assert("string" === typeof family, "textfont: 1st param must be a string");
         _fontFamily = family;
       },
       /**
@@ -561,14 +525,9 @@
           "textalign: 1st param must be null or one of the following strings: center, left, right, start or end."
         );
         DEV: assert(
-          null == baseline || [
-            "top",
-            "bottom",
-            "middle",
-            "hanging",
-            "alphabetic",
-            "ideographic"
-          ].includes(baseline),
+          null == baseline || ["top", "bottom", "middle", "hanging", "alphabetic", "ideographic"].includes(
+            baseline
+          ),
           "textalign: 2nd param must be null or one of the following strings: middle, top, bottom, hanging, alphabetic or ideographic."
         );
         if (align) _ctx.textAlign = align;
@@ -679,10 +638,7 @@
        */
       scale: (x, y) => {
         DEV: assert(isNumber(x), "scale: 1st param must be a number");
-        DEV: assert(
-          null == y || isNumber(y),
-          "scale: 2nd param must be a number"
-        );
+        DEV: assert(null == y || isNumber(y), "scale: 2nd param must be a number");
         return _ctx.scale(x, y || x);
       },
       /**
@@ -767,14 +723,13 @@
       /**
        * Turn given path into a clipping region.
        *
+       * Note: always call `push()` before and `pop()` after.
+       *
        * @param {Path2D} path
        * @see https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/clip
        */
       clip(path) {
-        DEV: assert(
-          path instanceof Path2D,
-          "clip: 1st param must be a Path2D instance"
-        );
+        DEV: assert(path instanceof Path2D, "clip: 1st param must be a Path2D instance");
         _ctx.clip(path);
       },
       /** SOUND API */
@@ -795,10 +750,7 @@
           "sfx: 1st param must be an array"
         );
         DEV: assert(isNumber(pitchSlide), "sfx: 2nd param must be a number");
-        DEV: assert(
-          isNumber(volumeFactor),
-          "sfx: 3rd param must be a number"
-        );
+        DEV: assert(isNumber(volumeFactor), "sfx: 3rd param must be a number");
         if (root.zzfxV <= 0 || navigator.userActivation && !navigator.userActivation.hasBeenActive) {
           return false;
         }
@@ -828,15 +780,13 @@
        * @param {pluginCallback} callback
        */
       use(callback, config = {}) {
-        DEV: assert(
-          "function" === typeof callback,
-          "use: 1st param must be a function"
-        );
-        DEV: assert(
-          "object" === typeof config,
-          "use: 2nd param must be an object"
-        );
-        _initialized ? loadPlugin(callback, config) : _plugins.push([callback, config]);
+        DEV: assert("function" === typeof callback, "use: 1st param must be a function");
+        DEV: assert("object" === typeof config, "use: 2nd param must be an object");
+        if (_initialized) {
+          loadPlugin(callback, config);
+        } else {
+          _plugins.push([callback, config]);
+        }
       },
       /**
        * Add a game event listener
@@ -846,14 +796,9 @@
        * @returns {Function} a function to remove the listener
        */
       listen(eventName, callback) {
-        DEV: assert(
-          "string" === typeof eventName,
-          "listen: 1st param must be a string"
-        );
-        DEV: assert(
-          "function" === typeof callback,
-          "listen: 2nd param must be a function"
-        );
+        DEV: assert("string" === typeof eventName, "listen: 1st param must be a string");
+        DEV: assert("function" === typeof callback, "listen: 2nd param must be a function");
+        eventName = eventName.toLowerCase();
         _events[eventName] = _events[eventName] || /* @__PURE__ */ new Set();
         _events[eventName].add(callback);
         return () => _events[eventName].delete(callback);
@@ -868,11 +813,9 @@
        * @param {*} [arg4] any data to be passed over the listeners
        */
       emit(eventName, arg1, arg2, arg3, arg4) {
-        DEV: assert(
-          "string" === typeof eventName,
-          "emit: 1st param must be a string"
-        );
+        DEV: assert("string" === typeof eventName, "emit: 1st param must be a string");
         if (_initialized) {
+          eventName = eventName.toLowerCase();
           triggerEvent("before:" + eventName, arg1, arg2, arg3, arg4);
           triggerEvent(eventName, arg1, arg2, arg3, arg4);
           triggerEvent("after:" + eventName, arg1, arg2, arg3, arg4);
@@ -897,14 +840,9 @@
        * @param {*} value
        */
       def(key, value) {
-        DEV: assert(
-          "string" === typeof key,
-          "def: 1st param must be a string"
-        );
+        DEV: assert("string" === typeof key, "def: 1st param must be a string");
         DEV: if (null == value) {
-          console.warn(
-            `def: key "${key}" was defined as ${value} but now is null`
-          );
+          console.warn(`def: key "${key}" was defined as ${value} but now is null`);
         }
         instance[key] = value;
         if (settings.global) {
@@ -944,10 +882,7 @@
        * @returns {any}
        */
       stat(n) {
-        DEV: assert(
-          isNumber(n) && n >= 0,
-          "stat: 1st param must be a positive number"
-        );
+        DEV: assert(isNumber(n) && n >= 0, "stat: 1st param must be a positive number");
         const list = [
           // 0
           settings,
@@ -974,7 +909,9 @@
           //  11
           _fontFamily
         ];
-        return list[n];
+        const data = { index: n, value: list[n] };
+        instance.emit("stat", data);
+        return data.value;
       },
       /**
        * Stops the litecanvas instance and remove all event listeners.
@@ -1010,25 +947,50 @@
         on(root, "resize", resizeCanvas);
       }
       if (settings.tapEvents) {
-        const _getXY = (pageX, pageY) => [
-          (pageX - _canvas.offsetLeft) / _scale,
-          (pageY - _canvas.offsetTop) / _scale
-        ], _taps = /* @__PURE__ */ new Map(), _registerTap = (id, x, y) => {
-          const tap = {
-            x,
-            y,
-            startX: x,
-            startY: y,
-            // timestamp
-            ts: performance.now()
-          };
-          _taps.set(id, tap);
-          return tap;
-        }, _updateTap = (id, x, y) => {
-          const tap = _taps.get(id) || _registerTap(id);
-          tap.x = x;
-          tap.y = y;
-        }, _checkTapped = (tap) => tap && performance.now() - tap.ts <= 300, preventDefault = (ev) => ev.preventDefault();
+        const _getXY = (
+          /**
+           * @param {number} pageX
+           * @param {number} pageY
+           */
+          (pageX, pageY) => [
+            (pageX - _canvas.offsetLeft) / _scale,
+            (pageY - _canvas.offsetTop) / _scale
+          ]
+        ), _taps = /* @__PURE__ */ new Map(), _registerTap = (
+          /**
+           * @param {number} id
+           * @param {number} [x]
+           * @param {number} [y]
+           */
+          (id, x, y) => {
+            const tap = {
+              x,
+              y,
+              startX: x,
+              startY: y,
+              // timestamp
+              ts: performance.now()
+            };
+            _taps.set(id, tap);
+            return tap;
+          }
+        ), _updateTap = (
+          /**
+           * @param {number} id
+           * @param {number} x
+           * @param {number} y
+           */
+          (id, x, y) => {
+            const tap = _taps.get(id) || _registerTap(id);
+            tap.x = x;
+            tap.y = y;
+          }
+        ), _checkTapped = (
+          /**
+           * @param {{ts: number}} tap
+           */
+          (tap) => tap && performance.now() - tap.ts <= 300
+        ), preventDefault = (ev) => ev.preventDefault();
         let _pressingMouse = false;
         on(
           _canvas,
@@ -1142,25 +1104,24 @@
         });
       }
       if (settings.keyboardEvents) {
-        const toLowerCase = (s) => s.toLowerCase();
         const _keysDown = /* @__PURE__ */ new Set();
         const _keysPress = /* @__PURE__ */ new Set();
-        const keyCheck = (keysSet, key) => {
-          return !key ? keysSet.size > 0 : keysSet.has(
-            "space" === toLowerCase(key) ? " " : toLowerCase(key)
-          );
+        const keyCheck = (keySet, key = "") => {
+          key = key.toLowerCase();
+          return !key ? keySet.size > 0 : keySet.has("space" === key ? " " : key);
         };
         on(root, "keydown", (event) => {
-          if (!_keysDown.has(toLowerCase(event.key))) {
-            _keysDown.add(toLowerCase(event.key));
-            _keysPress.add(toLowerCase(event.key));
+          const key = event.key.toLowerCase();
+          if (!_keysDown.has(key)) {
+            _keysDown.add(key);
+            _keysPress.add(key);
           }
         });
         on(root, "keyup", (event) => {
-          _keysDown.delete(toLowerCase(event.key));
+          _keysDown.delete(event.key.toLowerCase());
         });
         on(root, "blur", () => _keysDown.clear());
-        instance.listen("after:draw", () => _keysPress.clear());
+        instance.listen("after:update", () => _keysPress.clear());
         instance.def(
           "iskeydown",
           /**
@@ -1234,10 +1195,7 @@
         _canvas = document.querySelector(settings.canvas);
       }
       _canvas = _canvas || document.createElement("canvas");
-      DEV: assert(
-        _canvas && _canvas.tagName === "CANVAS",
-        "Invalid canvas element"
-      );
+      DEV: assert(_canvas && _canvas.tagName === "CANVAS", "Invalid canvas element");
       instance.def("CANVAS", _canvas);
       _ctx = _canvas.getContext("2d");
       on(_canvas, "click", () => root.focus());
@@ -1270,10 +1228,7 @@
           _canvas.style.display = "block";
           _canvas.style.margin = "auto";
         }
-        _scale = math.min(
-          root.innerWidth / instance.W,
-          root.innerHeight / instance.H
-        );
+        _scale = math.min(root.innerWidth / instance.W, root.innerHeight / instance.H);
         _scale = (settings.pixelart ? ~~_scale : _scale) || 1;
         _canvas.style.width = instance.W * _scale + "px";
         _canvas.style.height = instance.H * _scale + "px";