litecanvas 0.96.0 → 0.97.0

package/README.md

@@ -4,7 +4,7 @@
 
 # Litecanvas
 
-[![NPM Version](https://badgen.net/npm/v/litecanvas?scale=1.1&label=NPM&color=2f9e44&cache=3600)](https://www.npmjs.com/package/litecanvas/)  
+[![NPM Version](https://badgen.net/npm/v/litecanvas?cache=300&scale=1.1&label=NPM&color=2f9e44)](https://www.npmjs.com/package/litecanvas/)  
 [![License](https://badgen.net/npm/license/litecanvas?scale=1.1)](LICENSE)
 
 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.
@@ -32,14 +32,10 @@ Litecanvas is a lightweight HTML5 canvas 2D engine suitable for small web games,
 
 ## Getting Started
 
-You can try our [online playground](https://litecanvas.github.io) or install the [basic template](https://github.com/litecanvas/template):
+You can try our [online playground](https://litecanvas.github.io) or install the NPM package:
 
 ```sh
-# requires Node.js & NPM
-npx tiged litecanvas/template my-game
-cd my-game
-npm install
-npm run dev
+npm i litecanvas
 ```
 
 or just use add a `<script>` tag with our CDN link:

package/dist/dist.dev.js

@@ -32,27 +32,25 @@
   };
 
   // src/version.js
-  var version = "0.96.0";
+  var version = "0.97.0";
 
   // src/index.js
   function litecanvas(settings = {}) {
     const root = window, 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));
-    }, preventDefault = (ev) => ev.preventDefault(), beginPath = (c) => c.beginPath(), isNumber = Number.isFinite, zzfx = setupZzFX(root), defaults = {
+    }, lowerCase = (str) => str.toLowerCase(), preventDefault = (ev) => ev.preventDefault(), beginPath = (c) => c.beginPath(), isNumber = Number.isFinite, zzfx = setupZzFX(root), defaults = {
       width: null,
       height: null,
       autoscale: true,
-      pixelart: true,
       canvas: null,
       global: true,
       loop: null,
       tapEvents: true,
-      keyboardEvents: true,
-      animate: true
+      keyboardEvents: true
     };
     settings = Object.assign(defaults, settings);
-    let _initialized = false, _plugins = [], _canvas, _scale = 1, _ctx, _outline_fix = 0.5, _timeScale = 1, _lastFrameTime, _fpsInterval = 1e3 / 60, _accumulated, _rafid, _fontFamily = "sans-serif", _fontSize = 20, _rngSeed = Date.now(), _colors = defaultPalette, _defaultSound = [0.5, 0, 1750, , , 0.3, 1, , , , 600, 0.1], _coreEvents = "init,update,draw,tap,untap,tapping,tapped,resized", _mathFunctions = "PI,sin,cos,atan2,hypot,tan,abs,ceil,floor,trunc,min,max,pow,sqrt,sign,exp", _eventListeners = {};
+    let _initialized = false, _plugins = [], _canvas, _scale = 1, _ctx, _outline_fix = 0.5, _timeScale = 1, _lastFrameTime, _fpsInterval = 1e3 / 60, _accumulated, _rafid, _fontFamily = "sans-serif", _fontSize = 20, _rngSeed = Date.now(), _currentPalette, _colors, _defaultSound = [0.5, 0, 1750, , , 0.3, 1, , , , 600, 0.1], _coreEvents = "init,update,draw,tap,untap,tapping,tapped,resized", _mathFunctions = "PI,sin,cos,atan2,hypot,tan,abs,ceil,floor,trunc,min,max,pow,sqrt,sign,exp", _eventListeners = {};
     const instance = {
       /** @type {number} */
       W: 0,
@@ -626,19 +624,44 @@
         DEV: assert(isNumber(y), "[litecanvas] image() 2nd param must be a number");
         _ctx.drawImage(source, ~~x, ~~y);
       },
+      /**
+       * Draw a sprite pxiel by pixel represented by a string. Each pixel must be a base 36 number (0-9 or a-z) or a dot.
+       *
+       * @param {number} x
+       * @param {number} y
+       * @param {number} width
+       * @param {number} height
+       * @param {string} pixels
+       */
+      spr(x, y, width, height, pixels) {
+        DEV: assert(isNumber(x), "[litecanvas] spr() 1st param must be a number");
+        DEV: assert(isNumber(y), "[litecanvas] spr() 2nd param must be a number");
+        DEV: assert(isNumber(width), "[litecanvas] spr() 3rd param must be a number");
+        DEV: assert(isNumber(height), "[litecanvas] spr() 4th param must be a number");
+        DEV: assert("string" === typeof pixels, "[litecanvas] spr() 5th param must be a string");
+        const chars = pixels.replace(/\s/g, "");
+        for (let gridx = 0; gridx < width; gridx++) {
+          for (let gridy = 0; gridy < height; gridy++) {
+            const char = chars[height * gridy + gridx] || ".";
+            if (char !== ".") {
+              instance.rectfill(x + gridx, y + gridy, 1, 1, parseInt(char, 16) || 0);
+            }
+          }
+        }
+      },
       /**
        * Draw in an OffscreenCanvas and returns its image.
        *
        * @param {number} width
        * @param {number} height
-       * @param {string[]|drawCallback} drawing
+       * @param {drawCallback} callback
        * @param {object} [options]
        * @param {number} [options.scale=1]
        * @param {OffscreenCanvas} [options.canvas]
        * @returns {ImageBitmap}
        * @see https://developer.mozilla.org/en-US/docs/Web/API/OffscreenCanvas
        */
-      paint(width, height, drawing, options = {}) {
+      paint(width, height, callback, options = {}) {
         DEV: assert(
           isNumber(width) && width >= 1,
           "[litecanvas] paint() 1st param must be a positive number"
@@ -648,7 +671,7 @@
           "[litecanvas] paint() 2nd param must be a positive number"
         );
         DEV: assert(
-          "function" === typeof drawing || Array.isArray(drawing),
+          "function" === typeof callback,
           "[litecanvas] paint() 3rd param must be a function or array"
         );
         DEV: assert(
@@ -659,28 +682,13 @@
           options && null == options.canvas || options.canvas instanceof OffscreenCanvas,
           "[litecanvas] paint() 4th param (options.canvas) must be an OffscreenCanvas"
         );
-        const canvas = options.canvas || new OffscreenCanvas(1, 1), scale = options.scale || 1, contextOriginal = _ctx;
+        const canvas = options.canvas || new OffscreenCanvas(1, 1), scale = options.scale || 1, currentContext = _ctx;
         canvas.width = width * scale;
         canvas.height = height * scale;
         _ctx = canvas.getContext("2d");
         _ctx.scale(scale, scale);
-        if (Array.isArray(drawing)) {
-          let x = 0, y = 0;
-          _ctx.imageSmoothingEnabled = false;
-          for (const str of drawing) {
-            for (const color of str) {
-              if (" " !== color && "." !== color) {
-                instance.rectfill(x, y, 1, 1, parseInt(color, 16));
-              }
-              x++;
-            }
-            y++;
-            x = 0;
-          }
-        } else {
-          drawing(_ctx);
-        }
-        _ctx = contextOriginal;
+        callback(_ctx);
+        _ctx = currentContext;
         return canvas.transferToImageBitmap();
       },
       /** ADVANCED GRAPHICS API */
@@ -882,7 +890,7 @@
           "function" === typeof callback,
           "[litecanvas] listen() 2nd param must be a function"
         );
-        eventName = eventName.toLowerCase();
+        eventName = lowerCase(eventName);
         _eventListeners[eventName] = _eventListeners[eventName] || /* @__PURE__ */ new Set();
         _eventListeners[eventName].add(callback);
         return () => _eventListeners && _eventListeners[eventName].delete(callback);
@@ -902,14 +910,14 @@
           "[litecanvas] emit() 1st param must be a string"
         );
         if (_initialized) {
-          eventName = eventName.toLowerCase();
+          eventName = lowerCase(eventName);
           triggerEvent("before:" + eventName, arg1, arg2, arg3, arg4);
           triggerEvent(eventName, arg1, arg2, arg3, arg4);
           triggerEvent("after:" + eventName, arg1, arg2, arg3, arg4);
         }
       },
       /**
-       * Set or reset the color palette
+       * Set or reset the color palette.
        *
        * @param {string[]} [colors]
        */
@@ -919,6 +927,31 @@
           "[litecanvas] pal() 1st param must be a array of strings"
         );
         _colors = colors;
+        _currentPalette = [...colors];
+      },
+      /**
+       * Swap two colors of the current palette.
+       *
+       * If called without arguments, reset the current palette.
+       *
+       * @param {number?} a
+       * @param {number?} b
+       */
+      palc(a, b) {
+        DEV: assert(
+          null == a || isNumber(a) && a >= 0,
+          "[litecanvas] palc() 1st param must be a positive number"
+        );
+        DEV: assert(
+          isNumber(a) ? isNumber(b) && b >= 0 : null == b,
+          "[litecanvas] palc() 2nd param must be a positive number"
+        );
+        if (a == null) {
+          _colors = [..._currentPalette];
+        } else {
+          ;
+          [_colors[a], _colors[b]] = [_colors[b], _colors[a]];
+        }
       },
       /**
        * Define or update a instance property.
@@ -1230,12 +1263,12 @@
         const _keysDown = /* @__PURE__ */ new Set();
         const _keysPress = /* @__PURE__ */ new Set();
         const keyCheck = (keySet, key = "") => {
-          key = key.toLowerCase();
+          key = lowerCase(key);
           return !key ? keySet.size > 0 : keySet.has("space" === key ? " " : key);
         };
         let _lastKey = "";
         on(root, "keydown", (event) => {
-          const key = event.key.toLowerCase();
+          const key = lowerCase(event.key);
           if (!_keysDown.has(key)) {
             _keysDown.add(key);
             _keysPress.add(key);
@@ -1243,7 +1276,7 @@
           }
         });
         on(root, "keyup", (event) => {
-          _keysDown.delete(event.key.toLowerCase());
+          _keysDown.delete(lowerCase(event.key));
         });
         on(root, "blur", () => _keysDown.clear());
         instance.listen("after:update", () => _keysPress.clear());
@@ -1288,9 +1321,7 @@
       instance.resume();
     }
     function drawFrame() {
-      if (!settings.animate) {
-        return instance.emit("draw", _ctx);
-      }
+      _rafid = raf(drawFrame);
       let now = Date.now();
       let updated = 0;
       let frameTime = now - _lastFrameTime;
@@ -1312,7 +1343,6 @@
           );
         }
       }
-      _rafid = raf(drawFrame);
     }
     function setupCanvas() {
       if ("string" === typeof settings.canvas) {
@@ -1331,11 +1361,11 @@
       );
       _ctx = _canvas.getContext("2d");
       on(_canvas, "click", () => focus());
-      _canvas.style = "";
       resizeCanvas();
       if (!_canvas.parentNode) {
         document.body.appendChild(_canvas);
       }
+      _canvas.style.imageRendering = "pixelated";
       _canvas.oncontextmenu = () => false;
     }
     function resizeCanvas() {
@@ -1367,15 +1397,9 @@
         _canvas.style.width = width * _scale + "px";
         _canvas.style.height = height * _scale + "px";
       }
-      if (settings.pixelart) {
-        _ctx.imageSmoothingEnabled = false;
-        _canvas.style.imageRendering = "pixelated";
-      }
+      _ctx.imageSmoothingEnabled = false;
       instance.textalign("start", "top");
       instance.emit("resized", _scale);
-      if (!settings.animate) {
-        raf(drawFrame);
-      }
     }
     function triggerEvent(eventName, arg1, arg2, arg3, arg4) {
       if (!_eventListeners[eventName]) return;
@@ -1403,6 +1427,7 @@
     DEV: console.info(`[litecanvas] version ${version} started`);
     DEV: console.debug(`[litecanvas] litecanvas() options =`, settings);
     setupCanvas();
+    instance.pal();
     if ("loading" === document.readyState) {
       on(root, "DOMContentLoaded", () => raf(init));
     } else {

package/dist/dist.js

@@ -31,20 +31,18 @@
     const root = window, 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));
-    }, preventDefault = (ev) => ev.preventDefault(), beginPath = (c) => c.beginPath(), isNumber = Number.isFinite, zzfx = setupZzFX(root), defaults = {
+    }, lowerCase = (str) => str.toLowerCase(), preventDefault = (ev) => ev.preventDefault(), beginPath = (c) => c.beginPath(), isNumber = Number.isFinite, zzfx = setupZzFX(root), defaults = {
       width: null,
       height: null,
       autoscale: true,
-      pixelart: true,
       canvas: null,
       global: true,
       loop: null,
       tapEvents: true,
-      keyboardEvents: true,
-      animate: true
+      keyboardEvents: true
     };
     settings = Object.assign(defaults, settings);
-    let _initialized = false, _plugins = [], _canvas, _scale = 1, _ctx, _outline_fix = 0.5, _timeScale = 1, _lastFrameTime, _fpsInterval = 1e3 / 60, _accumulated, _rafid, _fontFamily = "sans-serif", _fontSize = 20, _rngSeed = Date.now(), _colors = defaultPalette, _defaultSound = [0.5, 0, 1750, , , 0.3, 1, , , , 600, 0.1], _coreEvents = "init,update,draw,tap,untap,tapping,tapped,resized", _mathFunctions = "PI,sin,cos,atan2,hypot,tan,abs,ceil,floor,trunc,min,max,pow,sqrt,sign,exp", _eventListeners = {};
+    let _initialized = false, _plugins = [], _canvas, _scale = 1, _ctx, _outline_fix = 0.5, _timeScale = 1, _lastFrameTime, _fpsInterval = 1e3 / 60, _accumulated, _rafid, _fontFamily = "sans-serif", _fontSize = 20, _rngSeed = Date.now(), _currentPalette, _colors, _defaultSound = [0.5, 0, 1750, , , 0.3, 1, , , , 600, 0.1], _coreEvents = "init,update,draw,tap,untap,tapping,tapped,resized", _mathFunctions = "PI,sin,cos,atan2,hypot,tan,abs,ceil,floor,trunc,min,max,pow,sqrt,sign,exp", _eventListeners = {};
     const instance = {
       /** @type {number} */
       W: 0,
@@ -417,41 +415,46 @@
       image(x, y, source) {
         _ctx.drawImage(source, ~~x, ~~y);
       },
+      /**
+       * Draw a sprite pxiel by pixel represented by a string. Each pixel must be a base 36 number (0-9 or a-z) or a dot.
+       *
+       * @param {number} x
+       * @param {number} y
+       * @param {number} width
+       * @param {number} height
+       * @param {string} pixels
+       */
+      spr(x, y, width, height, pixels) {
+        const chars = pixels.replace(/\s/g, "");
+        for (let gridx = 0; gridx < width; gridx++) {
+          for (let gridy = 0; gridy < height; gridy++) {
+            const char = chars[height * gridy + gridx] || ".";
+            if (char !== ".") {
+              instance.rectfill(x + gridx, y + gridy, 1, 1, parseInt(char, 16) || 0);
+            }
+          }
+        }
+      },
       /**
        * Draw in an OffscreenCanvas and returns its image.
        *
        * @param {number} width
        * @param {number} height
-       * @param {string[]|drawCallback} drawing
+       * @param {drawCallback} callback
        * @param {object} [options]
        * @param {number} [options.scale=1]
        * @param {OffscreenCanvas} [options.canvas]
        * @returns {ImageBitmap}
        * @see https://developer.mozilla.org/en-US/docs/Web/API/OffscreenCanvas
        */
-      paint(width, height, drawing, options = {}) {
-        const canvas = options.canvas || new OffscreenCanvas(1, 1), scale = options.scale || 1, contextOriginal = _ctx;
+      paint(width, height, callback, options = {}) {
+        const canvas = options.canvas || new OffscreenCanvas(1, 1), scale = options.scale || 1, currentContext = _ctx;
         canvas.width = width * scale;
         canvas.height = height * scale;
         _ctx = canvas.getContext("2d");
         _ctx.scale(scale, scale);
-        if (Array.isArray(drawing)) {
-          let x = 0, y = 0;
-          _ctx.imageSmoothingEnabled = false;
-          for (const str of drawing) {
-            for (const color of str) {
-              if (" " !== color && "." !== color) {
-                instance.rectfill(x, y, 1, 1, parseInt(color, 16));
-              }
-              x++;
-            }
-            y++;
-            x = 0;
-          }
-        } else {
-          drawing(_ctx);
-        }
-        _ctx = contextOriginal;
+        callback(_ctx);
+        _ctx = currentContext;
         return canvas.transferToImageBitmap();
       },
       /** ADVANCED GRAPHICS API */
@@ -609,7 +612,7 @@
        * @returns {Function} a function to remove the listener
        */
       listen(eventName, callback) {
-        eventName = eventName.toLowerCase();
+        eventName = lowerCase(eventName);
         _eventListeners[eventName] = _eventListeners[eventName] || /* @__PURE__ */ new Set();
         _eventListeners[eventName].add(callback);
         return () => _eventListeners && _eventListeners[eventName].delete(callback);
@@ -625,19 +628,36 @@
        */
       emit(eventName, arg1, arg2, arg3, arg4) {
         if (_initialized) {
-          eventName = eventName.toLowerCase();
+          eventName = lowerCase(eventName);
           triggerEvent("before:" + eventName, arg1, arg2, arg3, arg4);
           triggerEvent(eventName, arg1, arg2, arg3, arg4);
           triggerEvent("after:" + eventName, arg1, arg2, arg3, arg4);
         }
       },
       /**
-       * Set or reset the color palette
+       * Set or reset the color palette.
        *
        * @param {string[]} [colors]
        */
       pal(colors = defaultPalette) {
         _colors = colors;
+        _currentPalette = [...colors];
+      },
+      /**
+       * Swap two colors of the current palette.
+       *
+       * If called without arguments, reset the current palette.
+       *
+       * @param {number?} a
+       * @param {number?} b
+       */
+      palc(a, b) {
+        if (a == null) {
+          _colors = [..._currentPalette];
+        } else {
+          ;
+          [_colors[a], _colors[b]] = [_colors[b], _colors[a]];
+        }
       },
       /**
        * Define or update a instance property.
@@ -928,12 +948,12 @@
         const _keysDown = /* @__PURE__ */ new Set();
         const _keysPress = /* @__PURE__ */ new Set();
         const keyCheck = (keySet, key = "") => {
-          key = key.toLowerCase();
+          key = lowerCase(key);
           return !key ? keySet.size > 0 : keySet.has("space" === key ? " " : key);
         };
         let _lastKey = "";
         on(root, "keydown", (event) => {
-          const key = event.key.toLowerCase();
+          const key = lowerCase(event.key);
           if (!_keysDown.has(key)) {
             _keysDown.add(key);
             _keysPress.add(key);
@@ -941,7 +961,7 @@
           }
         });
         on(root, "keyup", (event) => {
-          _keysDown.delete(event.key.toLowerCase());
+          _keysDown.delete(lowerCase(event.key));
         });
         on(root, "blur", () => _keysDown.clear());
         instance.listen("after:update", () => _keysPress.clear());
@@ -978,9 +998,7 @@
       instance.resume();
     }
     function drawFrame() {
-      if (!settings.animate) {
-        return instance.emit("draw", _ctx);
-      }
+      _rafid = raf(drawFrame);
       let now = Date.now();
       let updated = 0;
       let frameTime = now - _lastFrameTime;
@@ -999,7 +1017,6 @@
           _accumulated = 0;
         }
       }
-      _rafid = raf(drawFrame);
     }
     function setupCanvas() {
       if ("string" === typeof settings.canvas) {
@@ -1010,11 +1027,11 @@
       _canvas = _canvas || document.createElement("canvas");
       _ctx = _canvas.getContext("2d");
       on(_canvas, "click", () => focus());
-      _canvas.style = "";
       resizeCanvas();
       if (!_canvas.parentNode) {
         document.body.appendChild(_canvas);
       }
+      _canvas.style.imageRendering = "pixelated";
       _canvas.oncontextmenu = () => false;
     }
     function resizeCanvas() {
@@ -1034,15 +1051,9 @@
         _canvas.style.width = width * _scale + "px";
         _canvas.style.height = height * _scale + "px";
       }
-      if (settings.pixelart) {
-        _ctx.imageSmoothingEnabled = false;
-        _canvas.style.imageRendering = "pixelated";
-      }
+      _ctx.imageSmoothingEnabled = false;
       instance.textalign("start", "top");
       instance.emit("resized", _scale);
-      if (!settings.animate) {
-        raf(drawFrame);
-      }
     }
     function triggerEvent(eventName, arg1, arg2, arg3, arg4) {
       if (!_eventListeners[eventName]) return;
@@ -1064,6 +1075,7 @@
       root.ENGINE = instance;
     }
     setupCanvas();
+    instance.pal();
     if ("loading" === document.readyState) {
       on(root, "DOMContentLoaded", () => raf(init));
     } else {

package/dist/dist.min.js

@@ -1 +1 @@
-(()=>{var e=["#111","#6a7799","#aec2c2","#FFF1E8","#e83b3b","#fabc20","#155fd9","#3cbcfc","#327345","#63c64d","#6c2c1f","#ac7c00"];globalThis.litecanvas=function(t={}){let a=window,l=Math,i=2*l.PI,n=requestAnimationFrame,o=[],r=(e,t,a)=>{e.addEventListener(t,a,!1),o.push(()=>e.removeEventListener(t,a,!1))},s=e=>e.preventDefault(),f=e=>e.beginPath(),c=(e=>{let t=new AudioContext;return e.zzfxV=1,(a=1,l=.05,i=220,n=0,o=0,r=.1,s=0,f=1,c=0,d=0,u=0,p=0,h=0,m=0,g=0,w=0,v=0,x=1,y=0,b=0,k=0)=>{let E=Math,z=2*E.PI,T=c*=500*z/44100/44100,C=i*=(1-l+2*l*E.random(l=[]))*z/44100,I=0,A=0,L=0,S=1,D=0,M=0,N=0,P=k<0?-1:1,F=z*P*k*2/44100,q=E.cos(F),B=E.sin,H=B(F)/4,O=1+H,V=-2*q/O,W=(1-H)/O,R=(1+P*q)/2/O,G=-(P+q)/O,X=0,Y=0,$=0,j=0;for(n=44100*n+9,y*=44100,o*=44100,r*=44100,v*=44100,d*=500*z/85766121e6,g*=z/44100,u*=z/44100,p*=44100,h=44100*h|0,a*=.3*e.zzfxV,P=n+y+o+r+v|0;L<P;l[L++]=N*a)++M%(100*w|0)||(N=s?1<s?2<s?3<s?B(I*I):E.max(E.min(E.tan(I),1),-1):1-(2*I/z%2+2)%2:1-4*E.abs(E.round(I/z)-I/z):B(I),N=(h?1-b+b*B(z*L/h):1)*(N<0?-1:1)*E.abs(N)**f*(L<n?L/n:L<n+y?1-(L-n)/y*(1-x):L<n+y+o?x:L<P-v?(P-L-v)/r*x:0),N=v?N/2+(v>L?0:(L<P-v?1:(P-L)/v)*l[L-v|0]/2/a):N,k&&(N=j=R*X+G*(X=Y)+R*(Y=N)-W*$-V*($=j))),I+=(F=(i+=c+=d)*E.cos(g*A++))+F*m*B(L**5),S&&++S>p&&(i+=u,C+=u,S=0),!h||++D%h||(i=C,c=T,S=S||1);(a=t.createBuffer(1,P,44100)).getChannelData(0).set(l),(i=t.createBufferSource()).buffer=a,i.connect(t.destination),i.start()}})(a);t=Object.assign({width:null,height:null,autoscale:!0,pixelart:!0,canvas:null,global:!0,loop:null,tapEvents:!0,keyboardEvents:!0,animate:!0},t);let d=!1,u=[],p,h=1,m,g=.5,w=1,v,x=1e3/60,y,b,k="sans-serif",E=20,z=Date.now(),T=e,C=[.5,0,1750,,,.3,1,,,,600,.1],I={},A={W:0,H:0,T:0,MX:-1,MY:-1,TWO_PI:i,HALF_PI:i/4,lerp:(e,t,a)=>a*(t-e)+e,deg2rad:e=>l.PI/180*e,rad2deg:e=>180/l.PI*e,round:(e,t=0)=>{if(!t)return l.round(e);let a=10**t;return l.round(e*a)/a},clamp:(e,t,a)=>e<t?t:e>a?a:e,wrap:(e,t,a)=>e-(a-t)*l.floor((e-t)/(a-t)),map(e,t,a,l,i,n){let o=(e-t)/(a-t)*(i-l)+l;return n?A.clamp(o,l,i):o},norm:(e,t,a)=>A.map(e,t,a,0,1),wave:(e,t,a,l=Math.sin)=>e+(l(a)+1)/2*(t-e),rand:(e=0,t=1)=>(z=(1664525*z+0x3c6ef35f)%0x100000000)/0x100000000*(t-e)+e,randi:(e=0,t=1)=>l.floor(A.rand(e,t+1)),rseed(e){z=~~e},cls(e){null==e?m.clearRect(0,0,m.canvas.width,m.canvas.height):A.rectfill(0,0,m.canvas.width,m.canvas.height,e)},rect(e,t,a,l,i,n){f(m),m[n?"roundRect":"rect"](~~e-g,~~t-g,~~a+2*g,~~l+2*g,n),A.stroke(i)},rectfill(e,t,a,l,i,n){f(m),m[n?"roundRect":"rect"](~~e,~~t,~~a,~~l,n),A.fill(i)},circ(e,t,a,l){f(m),m.arc(~~e,~~t,~~a,0,i),A.stroke(l)},circfill(e,t,a,l){f(m),m.arc(~~e,~~t,~~a,0,i),A.fill(l)},oval(e,t,a,l,n){f(m),m.ellipse(~~e,~~t,~~a,~~l,0,0,i),A.stroke(n)},ovalfill(e,t,a,l,n){f(m),m.ellipse(~~e,~~t,~~a,~~l,0,0,i),A.fill(n)},line(e,t,a,l,i){f(m);let n=.5*(0!==g&&~~e==~~a),o=.5*(0!==g&&~~t==~~l);m.moveTo(~~e+n,~~t+o),m.lineTo(~~a+n,~~l+o),A.stroke(i)},linewidth(e){m.lineWidth=~~e,g=.5*(0!=~~e%2)},linedash(e,t=0){m.setLineDash(e),m.lineDashOffset=t},text(e,t,a,l=3,i="normal"){m.font=`${i} ${E}px ${k}`,m.fillStyle=T[~~l%T.length],m.fillText(a,~~e,~~t)},textfont(e){k=e},textsize(e){E=e},textalign(e,t){e&&(m.textAlign=e),t&&(m.textBaseline=t)},image(e,t,a){m.drawImage(a,~~e,~~t)},paint(e,t,a,l={}){let i=l.canvas||new OffscreenCanvas(1,1),n=l.scale||1,o=m;if(i.width=e*n,i.height=t*n,(m=i.getContext("2d")).scale(n,n),Array.isArray(a)){let e=0,t=0;for(let l of(m.imageSmoothingEnabled=!1,a)){for(let a of l)" "!==a&&"."!==a&&A.rectfill(e,t,1,1,parseInt(a,16)),e++;t++,e=0}}else a(m);return m=o,i.transferToImageBitmap()},ctx:e=>(e&&(m=e),m),push(){m.save()},pop(){m.restore()},translate(e,t){m.translate(~~e,~~t)},scale(e,t){m.scale(e,t||e)},rotate(e){m.rotate(e)},alpha(e){m.globalAlpha=A.clamp(e,0,1)},fill(e){m.fillStyle=T[~~e%T.length],m.fill()},stroke(e){m.strokeStyle=T[~~e%T.length],m.stroke()},clip(e){f(m),e(m),m.clip()},sfx:(e,t=0,l=1)=>!!a.zzfxV&&(!navigator.userActivation||!!navigator.userActivation.hasBeenActive)&&(e=e||C,(0!==t||1!==l)&&((e=e.slice())[0]=l*(e[0]||1),e[10]=~~e[10]+t),c.apply(0,e),e),volume(e){a.zzfxV=e},canvas:()=>p,use(e,t={}){d?N(e,t):u.push([e,t])},listen:(e,t)=>(I[e=e.toLowerCase()]=I[e]||new Set,I[e].add(t),()=>I&&I[e].delete(t)),emit(e,t,a,l,i){d&&(M("before:"+(e=e.toLowerCase()),t,a,l,i),M(e,t,a,l,i),M("after:"+e,t,a,l,i))},pal(t=e){T=t},def(e,l){A[e]=l,t.global&&(a[e]=l)},timescale(e){w=e},framerate(e){x=1e3/~~e},stat(e){let l={index:e,value:[t,d,x/1e3,h,I,T,C,w,a.zzfxV,z,E,k][e]};return A.emit("stat",l),l.value},quit(){for(let e of(A.pause(),A.emit("quit"),I={},o))e();if(t.global){for(let e in A)delete a[e];delete a.ENGINE}d=!1},pause(){cancelAnimationFrame(b),b=0},resume(){d&&!b&&(y=x,v=Date.now(),b=n(S))},paused:()=>!b};for(let e of"PI,sin,cos,atan2,hypot,tan,abs,ceil,floor,trunc,min,max,pow,sqrt,sign,exp".split(","))A[e]=l[e];function L(){let e=t.loop?t.loop:a;for(let t of"init,update,draw,tap,untap,tapping,tapped,resized".split(","))e[t]&&A.listen(t,e[t]);for(let[e,t]of u)N(e,t);if(t.autoscale&&r(a,"resize",D),t.tapEvents){let e=e=>[(e.pageX-p.offsetLeft)/h,(e.pageY-p.offsetTop)/h],t=new Map,l=(e,a,l)=>{let i={x:a,y:l,xi:a,yi:l,t:Date.now()};return t.set(e,i),i},i=(e,a,i)=>{let n=t.get(e)||l(e);n.x=a,n.y=i},n=e=>e&&Date.now()-e.t<=300,o=!1;r(p,"mousedown",t=>{if(0===t.button){s(t);let[a,i]=e(t);A.emit("tap",a,i,0),l(0,a,i),o=!0}}),r(p,"mouseup",a=>{if(0===a.button){s(a);let l=t.get(0),[i,r]=e(a);n(l)&&A.emit("tapped",l.xi,l.yi,0),A.emit("untap",i,r,0),t.delete(0),o=!1}}),r(a,"mousemove",t=>{s(t);let[a,l]=e(t);A.def("MX",a),A.def("MY",l),o&&(A.emit("tapping",a,l,0),i(0,a,l))}),r(p,"touchstart",t=>{for(let a of(s(t),t.changedTouches)){let[t,i]=e(a);A.emit("tap",t,i,a.identifier+1),l(a.identifier+1,t,i)}}),r(p,"touchmove",t=>{for(let a of(s(t),t.changedTouches)){let[t,l]=e(a);A.emit("tapping",t,l,a.identifier+1),i(a.identifier+1,t,l)}});let f=e=>{s(e);let a=[];if(e.targetTouches.length>0)for(let t of e.targetTouches)a.push(t.identifier+1);for(let[e,l]of t)a.includes(e)||(n(l)&&A.emit("tapped",l.xi,l.yi,e),A.emit("untap",l.x,l.y,e),t.delete(e))};r(p,"touchend",f),r(p,"touchcancel",f),r(a,"blur",()=>{for(let[e,a]of(o=!1,t))A.emit("untap",a.x,a.y,e),t.delete(e)})}if(t.keyboardEvents){let e=new Set,t=new Set,l=(e,t="")=>(t=t.toLowerCase())?e.has("space"===t?" ":t):e.size>0,i="";r(a,"keydown",a=>{let l=a.key.toLowerCase();e.has(l)||(e.add(l),t.add(l),i=" "===l?"space":l)}),r(a,"keyup",t=>{e.delete(t.key.toLowerCase())}),r(a,"blur",()=>e.clear()),A.listen("after:update",()=>t.clear()),A.def("iskeydown",t=>l(e,t)),A.def("iskeypressed",e=>l(t,e)),A.def("lastkey",()=>i)}d=!0,A.emit("init",A),A.resume()}function S(){if(!t.animate)return A.emit("draw",m);let e=Date.now(),a=0,l=e-v;for(v=e,y+=l<100?l:x;y>=x;){a++,y-=x;let e=x/1e3*w;A.emit("update",e,a),A.def("T",A.T+e)}a&&(A.emit("draw",m),a>1&&(y=0)),b=n(S)}function D(){let e=t.width>0?t.width:innerWidth,a=t.width>0?t.height||t.width:innerHeight;if(A.def("W",e),A.def("H",a),p.width=e,p.height=a,t.autoscale){let i=+t.autoscale;p.style.display||(p.style.display="block",p.style.margin="auto"),h=l.min(innerWidth/e,innerHeight/a),h=i>1&&h>i?i:h,p.style.width=e*h+"px",p.style.height=a*h+"px"}t.pixelart&&(m.imageSmoothingEnabled=!1,p.style.imageRendering="pixelated"),A.textalign("start","top"),A.emit("resized",h),t.animate||n(S)}function M(e,t,a,l,i){if(I[e])for(let n of I[e])n(t,a,l,i)}function N(e,t){let a=e(A,t);for(let e in a)A.def(e,a[e])}if(t.global){if(a.ENGINE)throw Error("only one global litecanvas is allowed");Object.assign(a,A),a.ENGINE=A}return m=(p=(p="string"==typeof t.canvas?document.querySelector(t.canvas):t.canvas)||document.createElement("canvas")).getContext("2d"),r(p,"click",()=>focus()),p.style="",D(),p.parentNode||document.body.appendChild(p),p.oncontextmenu=()=>!1,"loading"===document.readyState?r(a,"DOMContentLoaded",()=>n(L)):n(L),A}})();
+(()=>{var e=["#111","#6a7799","#aec2c2","#FFF1E8","#e83b3b","#fabc20","#155fd9","#3cbcfc","#327345","#63c64d","#6c2c1f","#ac7c00"];globalThis.litecanvas=function(t={}){let a=window,l=Math,n=2*l.PI,i=requestAnimationFrame,o=[],r=(e,t,a)=>{e.addEventListener(t,a,!1),o.push(()=>e.removeEventListener(t,a,!1))},s=e=>e.toLowerCase(),c=e=>e.preventDefault(),f=e=>e.beginPath(),d=(e=>{let t=new AudioContext;return e.zzfxV=1,(a=1,l=.05,n=220,i=0,o=0,r=.1,s=0,c=1,f=0,d=0,u=0,p=0,h=0,m=0,g=0,v=0,w=0,x=1,y=0,b=0,k=0)=>{let E=Math,z=2*E.PI,T=f*=500*z/44100/44100,I=n*=(1-l+2*l*E.random(l=[]))*z/44100,D=0,S=0,A=0,M=1,C=0,L=0,N=0,P=k<0?-1:1,F=z*P*k*2/44100,q=E.cos(F),B=E.sin,H=B(F)/4,O=1+H,V=-2*q/O,W=(1-H)/O,R=(1+P*q)/2/O,G=-(P+q)/O,X=0,Y=0,$=0,j=0;for(i=44100*i+9,y*=44100,o*=44100,r*=44100,w*=44100,d*=500*z/85766121e6,g*=z/44100,u*=z/44100,p*=44100,h=44100*h|0,a*=.3*e.zzfxV,P=i+y+o+r+w|0;A<P;l[A++]=N*a)++L%(100*v|0)||(N=s?1<s?2<s?3<s?B(D*D):E.max(E.min(E.tan(D),1),-1):1-(2*D/z%2+2)%2:1-4*E.abs(E.round(D/z)-D/z):B(D),N=(h?1-b+b*B(z*A/h):1)*(N<0?-1:1)*E.abs(N)**c*(A<i?A/i:A<i+y?1-(A-i)/y*(1-x):A<i+y+o?x:A<P-w?(P-A-w)/r*x:0),N=w?N/2+(w>A?0:(A<P-w?1:(P-A)/w)*l[A-w|0]/2/a):N,k&&(N=j=R*X+G*(X=Y)+R*(Y=N)-W*$-V*($=j))),D+=(F=(n+=f+=d)*E.cos(g*S++))+F*m*B(A**5),M&&++M>p&&(n+=u,I+=u,M=0),!h||++C%h||(n=I,f=T,M=M||1);(a=t.createBuffer(1,P,44100)).getChannelData(0).set(l),(n=t.createBufferSource()).buffer=a,n.connect(t.destination),n.start()}})(a);t=Object.assign({width:null,height:null,autoscale:!0,canvas:null,global:!0,loop:null,tapEvents:!0,keyboardEvents:!0},t);let u=!1,p=[],h,m=1,g,v=.5,w=1,x,y=1e3/60,b,k,E="sans-serif",z=20,T=Date.now(),I,D,S=[.5,0,1750,,,.3,1,,,,600,.1],A={},M={W:0,H:0,T:0,MX:-1,MY:-1,TWO_PI:n,HALF_PI:n/4,lerp:(e,t,a)=>a*(t-e)+e,deg2rad:e=>l.PI/180*e,rad2deg:e=>180/l.PI*e,round:(e,t=0)=>{if(!t)return l.round(e);let a=10**t;return l.round(e*a)/a},clamp:(e,t,a)=>e<t?t:e>a?a:e,wrap:(e,t,a)=>e-(a-t)*l.floor((e-t)/(a-t)),map(e,t,a,l,n,i){let o=(e-t)/(a-t)*(n-l)+l;return i?M.clamp(o,l,n):o},norm:(e,t,a)=>M.map(e,t,a,0,1),wave:(e,t,a,l=Math.sin)=>e+(l(a)+1)/2*(t-e),rand:(e=0,t=1)=>(T=(1664525*T+0x3c6ef35f)%0x100000000)/0x100000000*(t-e)+e,randi:(e=0,t=1)=>l.floor(M.rand(e,t+1)),rseed(e){T=~~e},cls(e){null==e?g.clearRect(0,0,g.canvas.width,g.canvas.height):M.rectfill(0,0,g.canvas.width,g.canvas.height,e)},rect(e,t,a,l,n,i){f(g),g[i?"roundRect":"rect"](~~e-v,~~t-v,~~a+2*v,~~l+2*v,i),M.stroke(n)},rectfill(e,t,a,l,n,i){f(g),g[i?"roundRect":"rect"](~~e,~~t,~~a,~~l,i),M.fill(n)},circ(e,t,a,l){f(g),g.arc(~~e,~~t,~~a,0,n),M.stroke(l)},circfill(e,t,a,l){f(g),g.arc(~~e,~~t,~~a,0,n),M.fill(l)},oval(e,t,a,l,i){f(g),g.ellipse(~~e,~~t,~~a,~~l,0,0,n),M.stroke(i)},ovalfill(e,t,a,l,i){f(g),g.ellipse(~~e,~~t,~~a,~~l,0,0,n),M.fill(i)},line(e,t,a,l,n){f(g);let i=.5*(0!==v&&~~e==~~a),o=.5*(0!==v&&~~t==~~l);g.moveTo(~~e+i,~~t+o),g.lineTo(~~a+i,~~l+o),M.stroke(n)},linewidth(e){g.lineWidth=~~e,v=.5*(0!=~~e%2)},linedash(e,t=0){g.setLineDash(e),g.lineDashOffset=t},text(e,t,a,l=3,n="normal"){g.font=`${n} ${z}px ${E}`,g.fillStyle=D[~~l%D.length],g.fillText(a,~~e,~~t)},textfont(e){E=e},textsize(e){z=e},textalign(e,t){e&&(g.textAlign=e),t&&(g.textBaseline=t)},image(e,t,a){g.drawImage(a,~~e,~~t)},spr(e,t,a,l,n){let i=n.replace(/\s/g,"");for(let n=0;n<a;n++)for(let a=0;a<l;a++){let o=i[l*a+n]||".";"."!==o&&M.rectfill(e+n,t+a,1,1,parseInt(o,16)||0)}},paint(e,t,a,l={}){let n=l.canvas||new OffscreenCanvas(1,1),i=l.scale||1,o=g;return n.width=e*i,n.height=t*i,(g=n.getContext("2d")).scale(i,i),a(g),g=o,n.transferToImageBitmap()},ctx:e=>(e&&(g=e),g),push(){g.save()},pop(){g.restore()},translate(e,t){g.translate(~~e,~~t)},scale(e,t){g.scale(e,t||e)},rotate(e){g.rotate(e)},alpha(e){g.globalAlpha=M.clamp(e,0,1)},fill(e){g.fillStyle=D[~~e%D.length],g.fill()},stroke(e){g.strokeStyle=D[~~e%D.length],g.stroke()},clip(e){f(g),e(g),g.clip()},sfx:(e,t=0,l=1)=>!!a.zzfxV&&(!navigator.userActivation||!!navigator.userActivation.hasBeenActive)&&(e=e||S,(0!==t||1!==l)&&((e=e.slice())[0]=l*(e[0]||1),e[10]=~~e[10]+t),d.apply(0,e),e),volume(e){a.zzfxV=e},canvas:()=>h,use(e,t={}){u?F(e,t):p.push([e,t])},listen:(e,t)=>(A[e=s(e)]=A[e]||new Set,A[e].add(t),()=>A&&A[e].delete(t)),emit(e,t,a,l,n){u&&(P("before:"+(e=s(e)),t,a,l,n),P(e,t,a,l,n),P("after:"+e,t,a,l,n))},pal(t=e){D=t,I=[...t]},palc(e,t){null==e?D=[...I]:[D[e],D[t]]=[D[t],D[e]]},def(e,l){M[e]=l,t.global&&(a[e]=l)},timescale(e){w=e},framerate(e){y=1e3/~~e},stat(e){let l={index:e,value:[t,u,y/1e3,m,A,D,S,w,a.zzfxV,T,z,E][e]};return M.emit("stat",l),l.value},quit(){for(let e of(M.pause(),M.emit("quit"),A={},o))e();if(t.global){for(let e in M)delete a[e];delete a.ENGINE}u=!1},pause(){cancelAnimationFrame(k),k=0},resume(){u&&!k&&(b=y,x=Date.now(),k=i(L))},paused:()=>!k};for(let e of"PI,sin,cos,atan2,hypot,tan,abs,ceil,floor,trunc,min,max,pow,sqrt,sign,exp".split(","))M[e]=l[e];function C(){let e=t.loop?t.loop:a;for(let t of"init,update,draw,tap,untap,tapping,tapped,resized".split(","))e[t]&&M.listen(t,e[t]);for(let[e,t]of p)F(e,t);if(t.autoscale&&r(a,"resize",N),t.tapEvents){let e=e=>[(e.pageX-h.offsetLeft)/m,(e.pageY-h.offsetTop)/m],t=new Map,l=(e,a,l)=>{let n={x:a,y:l,xi:a,yi:l,t:Date.now()};return t.set(e,n),n},n=(e,a,n)=>{let i=t.get(e)||l(e);i.x=a,i.y=n},i=e=>e&&Date.now()-e.t<=300,o=!1;r(h,"mousedown",t=>{if(0===t.button){c(t);let[a,n]=e(t);M.emit("tap",a,n,0),l(0,a,n),o=!0}}),r(h,"mouseup",a=>{if(0===a.button){c(a);let l=t.get(0),[n,r]=e(a);i(l)&&M.emit("tapped",l.xi,l.yi,0),M.emit("untap",n,r,0),t.delete(0),o=!1}}),r(a,"mousemove",t=>{c(t);let[a,l]=e(t);M.def("MX",a),M.def("MY",l),o&&(M.emit("tapping",a,l,0),n(0,a,l))}),r(h,"touchstart",t=>{for(let a of(c(t),t.changedTouches)){let[t,n]=e(a);M.emit("tap",t,n,a.identifier+1),l(a.identifier+1,t,n)}}),r(h,"touchmove",t=>{for(let a of(c(t),t.changedTouches)){let[t,l]=e(a);M.emit("tapping",t,l,a.identifier+1),n(a.identifier+1,t,l)}});let s=e=>{c(e);let a=[];if(e.targetTouches.length>0)for(let t of e.targetTouches)a.push(t.identifier+1);for(let[e,l]of t)a.includes(e)||(i(l)&&M.emit("tapped",l.xi,l.yi,e),M.emit("untap",l.x,l.y,e),t.delete(e))};r(h,"touchend",s),r(h,"touchcancel",s),r(a,"blur",()=>{for(let[e,a]of(o=!1,t))M.emit("untap",a.x,a.y,e),t.delete(e)})}if(t.keyboardEvents){let e=new Set,t=new Set,l=(e,t="")=>(t=s(t))?e.has("space"===t?" ":t):e.size>0,n="";r(a,"keydown",a=>{let l=s(a.key);e.has(l)||(e.add(l),t.add(l),n=" "===l?"space":l)}),r(a,"keyup",t=>{e.delete(s(t.key))}),r(a,"blur",()=>e.clear()),M.listen("after:update",()=>t.clear()),M.def("iskeydown",t=>l(e,t)),M.def("iskeypressed",e=>l(t,e)),M.def("lastkey",()=>n)}u=!0,M.emit("init",M),M.resume()}function L(){k=i(L);let e=Date.now(),t=0,a=e-x;for(x=e,b+=a<100?a:y;b>=y;){t++,b-=y;let e=y/1e3*w;M.emit("update",e,t),M.def("T",M.T+e)}t&&(M.emit("draw",g),t>1&&(b=0))}function N(){let e=t.width>0?t.width:innerWidth,a=t.width>0?t.height||t.width:innerHeight;if(M.def("W",e),M.def("H",a),h.width=e,h.height=a,t.autoscale){let n=+t.autoscale;h.style.display||(h.style.display="block",h.style.margin="auto"),m=l.min(innerWidth/e,innerHeight/a),m=n>1&&m>n?n:m,h.style.width=e*m+"px",h.style.height=a*m+"px"}g.imageSmoothingEnabled=!1,M.textalign("start","top"),M.emit("resized",m)}function P(e,t,a,l,n){if(A[e])for(let i of A[e])i(t,a,l,n)}function F(e,t){let a=e(M,t);for(let e in a)M.def(e,a[e])}if(t.global){if(a.ENGINE)throw Error("only one global litecanvas is allowed");Object.assign(a,M),a.ENGINE=M}return g=(h=(h="string"==typeof t.canvas?document.querySelector(t.canvas):t.canvas)||document.createElement("canvas")).getContext("2d"),r(h,"click",()=>focus()),N(),h.parentNode||document.body.appendChild(h),h.style.imageRendering="pixelated",h.oncontextmenu=()=>!1,M.pal(),"loading"===document.readyState?r(a,"DOMContentLoaded",()=>i(C)):i(C),M}})();

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "litecanvas",
-    "version": "0.96.0",
+    "version": "0.97.0",
     "description": "Lightweight HTML5 canvas 2D game engine suitable for small projects and creative coding. Inspired by PICO-8 and P5/Processing.",
     "license": "MIT",
     "author": "Luiz Bills <luizbills@pm.me>",
@@ -33,7 +33,7 @@
     "devDependencies": {
         "@litecanvas/jsdom-extras": "^2.0.1",
         "@size-limit/preset-small-lib": "^11.2.0",
-        "@swc/core": "^1.13.2",
+        "@swc/core": "^1.13.3",
         "@types/jsdom": "^21.1.7",
         "ava": "^6.4.1",
         "esbuild": "^0.25.8",
@@ -55,8 +55,8 @@
         "test:watch": "ava --watch",
         "dev": "esbuild src/web.js --bundle --watch --outfile=samples/dist.js --servedir=samples",
         "build": "npm run genversion && node script/build.js && size-limit",
-        "format": "prettier -w src/* samples/* types/* script/* types/*",
-        "check-types": "npx ts types/*",
+        "format": "prettier -w src/* samples/* types/* script/* tests/*",
+        "check-types": "npx tsc ./types/*",
         "genversion": "genversion --es6 src/version.js"
     },
     "files": [

package/src/index.js

@@ -23,6 +23,8 @@ export default function litecanvas(settings = {}) {
             elem.addEventListener(evt, callback, false)
             _browserEventListeners.push(() => elem.removeEventListener(evt, callback, false))
         },
+        /** @type {(str: string) => string} */
+        lowerCase = (str) => str.toLowerCase(),
         /** @type {(ev: Event) => void} */
         preventDefault = (ev) => ev.preventDefault(),
         /** @type {(c: CanvasRenderingContext2D | OffscreenCanvasRenderingContext2D) => void} */
@@ -34,13 +36,11 @@ export default function litecanvas(settings = {}) {
             width: null,
             height: null,
             autoscale: true,
-            pixelart: true,
             canvas: null,
             global: true,
             loop: null,
             tapEvents: true,
             keyboardEvents: true,
-            animate: true,
         }
 
     // setup the settings default values
@@ -75,7 +75,9 @@ export default function litecanvas(settings = {}) {
         /** @type {number} */
         _rngSeed = Date.now(),
         /** @type {string[]} */
-        _colors = defaultPalette,
+        _currentPalette,
+        /** @type {string[]} */
+        _colors,
         /** @type {number[]} */
         _defaultSound = [0.5, 0, 1750, , , 0.3, 1, , , , 600, 0.1],
         /** @type {string} */
@@ -728,19 +730,46 @@ export default function litecanvas(settings = {}) {
             _ctx.drawImage(source, ~~x, ~~y)
         },
 
+        /**
+         * Draw a sprite pxiel by pixel represented by a string. Each pixel must be a base 36 number (0-9 or a-z) or a dot.
+         *
+         * @param {number} x
+         * @param {number} y
+         * @param {number} width
+         * @param {number} height
+         * @param {string} pixels
+         */
+        spr(x, y, width, height, pixels) {
+            DEV: assert(isNumber(x), '[litecanvas] spr() 1st param must be a number')
+            DEV: assert(isNumber(y), '[litecanvas] spr() 2nd param must be a number')
+            DEV: assert(isNumber(width), '[litecanvas] spr() 3rd param must be a number')
+            DEV: assert(isNumber(height), '[litecanvas] spr() 4th param must be a number')
+            DEV: assert('string' === typeof pixels, '[litecanvas] spr() 5th param must be a string')
+
+            const chars = pixels.replace(/\s/g, '')
+            for (let gridx = 0; gridx < width; gridx++) {
+                for (let gridy = 0; gridy < height; gridy++) {
+                    const char = chars[height * gridy + gridx] || '.'
+                    if (char !== '.') {
+                        instance.rectfill(x + gridx, y + gridy, 1, 1, parseInt(char, 16) || 0)
+                    }
+                }
+            }
+        },
+
         /**
          * Draw in an OffscreenCanvas and returns its image.
          *
          * @param {number} width
          * @param {number} height
-         * @param {string[]|drawCallback} drawing
+         * @param {drawCallback} callback
          * @param {object} [options]
          * @param {number} [options.scale=1]
          * @param {OffscreenCanvas} [options.canvas]
          * @returns {ImageBitmap}
          * @see https://developer.mozilla.org/en-US/docs/Web/API/OffscreenCanvas
          */
-        paint(width, height, drawing, options = {}) {
+        paint(width, height, callback, options = {}) {
             DEV: assert(
                 isNumber(width) && width >= 1,
                 '[litecanvas] paint() 1st param must be a positive number'
@@ -750,7 +779,7 @@ export default function litecanvas(settings = {}) {
                 '[litecanvas] paint() 2nd param must be a positive number'
             )
             DEV: assert(
-                'function' === typeof drawing || Array.isArray(drawing),
+                'function' === typeof callback,
                 '[litecanvas] paint() 3rd param must be a function or array'
             )
             DEV: assert(
@@ -765,37 +794,16 @@ export default function litecanvas(settings = {}) {
             const /** @type {OffscreenCanvas} */
                 canvas = options.canvas || new OffscreenCanvas(1, 1),
                 scale = options.scale || 1,
-                contextOriginal = _ctx
+                currentContext = _ctx // context backup
 
             canvas.width = width * scale
             canvas.height = height * scale
 
             _ctx = canvas.getContext('2d')
             _ctx.scale(scale, scale)
+            callback(_ctx)
 
-            // draw pixel art if `draw` is a array
-            if (Array.isArray(drawing)) {
-                let x = 0,
-                    y = 0
-
-                _ctx.imageSmoothingEnabled = false
-
-                for (const str of drawing) {
-                    for (const color of str) {
-                        if (' ' !== color && '.' !== color) {
-                            // support for 16-color palette using hex (from 0 to f)
-                            instance.rectfill(x, y, 1, 1, parseInt(color, 16))
-                        }
-                        x++
-                    }
-                    y++
-                    x = 0
-                }
-            } else {
-                drawing(_ctx)
-            }
-
-            _ctx = contextOriginal // restore the context
+            _ctx = currentContext // restore the context
 
             return canvas.transferToImageBitmap()
         },
@@ -1034,7 +1042,7 @@ export default function litecanvas(settings = {}) {
                 '[litecanvas] listen() 2nd param must be a function'
             )
 
-            eventName = eventName.toLowerCase()
+            eventName = lowerCase(eventName)
 
             _eventListeners[eventName] = _eventListeners[eventName] || new Set()
             _eventListeners[eventName].add(callback)
@@ -1058,7 +1066,7 @@ export default function litecanvas(settings = {}) {
                 '[litecanvas] emit() 1st param must be a string'
             )
             if (_initialized) {
-                eventName = eventName.toLowerCase()
+                eventName = lowerCase(eventName)
 
                 triggerEvent('before:' + eventName, arg1, arg2, arg3, arg4)
                 triggerEvent(eventName, arg1, arg2, arg3, arg4)
@@ -1067,7 +1075,7 @@ export default function litecanvas(settings = {}) {
         },
 
         /**
-         * Set or reset the color palette
+         * Set or reset the color palette.
          *
          * @param {string[]} [colors]
          */
@@ -1077,6 +1085,31 @@ export default function litecanvas(settings = {}) {
                 '[litecanvas] pal() 1st param must be a array of strings'
             )
             _colors = colors
+            _currentPalette = [...colors]
+        },
+
+        /**
+         * Swap two colors of the current palette.
+         *
+         * If called without arguments, reset the current palette.
+         *
+         * @param {number?} a
+         * @param {number?} b
+         */
+        palc(a, b) {
+            DEV: assert(
+                null == a || (isNumber(a) && a >= 0),
+                '[litecanvas] palc() 1st param must be a positive number'
+            )
+            DEV: assert(
+                isNumber(a) ? isNumber(b) && b >= 0 : null == b,
+                '[litecanvas] palc() 2nd param must be a positive number'
+            )
+            if (a == null) {
+                _colors = [..._currentPalette]
+            } else {
+                ;[_colors[a], _colors[b]] = [_colors[b], _colors[a]]
+            }
         },
 
         /**
@@ -1454,7 +1487,7 @@ export default function litecanvas(settings = {}) {
              * @returns {boolean}
              */
             const keyCheck = (keySet, key = '') => {
-                key = key.toLowerCase()
+                key = lowerCase(key)
                 return !key ? keySet.size > 0 : keySet.has('space' === key ? ' ' : key)
             }
 
@@ -1462,7 +1495,7 @@ export default function litecanvas(settings = {}) {
             let _lastKey = ''
 
             on(root, 'keydown', (/** @type {KeyboardEvent} */ event) => {
-                const key = event.key.toLowerCase()
+                const key = lowerCase(event.key)
                 if (!_keysDown.has(key)) {
                     _keysDown.add(key)
                     _keysPress.add(key)
@@ -1471,7 +1504,7 @@ export default function litecanvas(settings = {}) {
             })
 
             on(root, 'keyup', (/** @type {KeyboardEvent} */ event) => {
-                _keysDown.delete(event.key.toLowerCase())
+                _keysDown.delete(lowerCase(event.key))
             })
 
             on(root, 'blur', () => _keysDown.clear())
@@ -1523,9 +1556,8 @@ export default function litecanvas(settings = {}) {
     }
 
     function drawFrame() {
-        if (!settings.animate) {
-            return instance.emit('draw', _ctx)
-        }
+        // request the next frame
+        _rafid = raf(drawFrame)
 
         let now = Date.now()
         let updated = 0
@@ -1555,9 +1587,6 @@ export default function litecanvas(settings = {}) {
                 )
             }
         }
-
-        // request the next frame
-        _rafid = raf(drawFrame)
     }
 
     function setupCanvas() {
@@ -1582,15 +1611,13 @@ export default function litecanvas(settings = {}) {
 
         on(_canvas, 'click', () => focus())
 
-        /** @ts-ignore */
-        _canvas.style = ''
-
         resizeCanvas()
 
         if (!_canvas.parentNode) {
             document.body.appendChild(_canvas)
         }
 
+        _canvas.style.imageRendering = 'pixelated'
         _canvas.oncontextmenu = () => false
     }
 
@@ -1632,10 +1659,7 @@ export default function litecanvas(settings = {}) {
         }
 
         // set canvas image rendering properties
-        if (settings.pixelart) {
-            _ctx.imageSmoothingEnabled = false
-            _canvas.style.imageRendering = 'pixelated'
-        }
+        _ctx.imageSmoothingEnabled = false
 
         // set the default text align and baseline
         instance.textalign('start', 'top')
@@ -1643,11 +1667,6 @@ export default function litecanvas(settings = {}) {
         // trigger "resized" event
         // note: not triggered before the "init" event
         instance.emit('resized', _scale)
-
-        // force redraw when the canvas is not animated
-        if (!settings.animate) {
-            raf(drawFrame)
-        }
     }
 
     /**
@@ -1694,6 +1713,9 @@ export default function litecanvas(settings = {}) {
 
     setupCanvas()
 
+    // init the color palette
+    instance.pal()
+
     if ('loading' === document.readyState) {
         on(root, 'DOMContentLoaded', () => raf(init))
     } else {

package/src/version.js

@@ -1,2 +1,2 @@
 // Generated by genversion.
-export const version = '0.96.0'
+export const version = '0.97.0'

package/types/global.d.ts

@@ -356,7 +356,7 @@ declare global {
      */
     function textalign(align: CanvasTextAlign, baseline: CanvasTextBaseline): void
 
-    /** IMAGE GRAPHICS API */
+    /** BASIC GRAPHICS API */
     /**
      * Draw an image
      *
@@ -365,19 +365,33 @@ declare global {
      * @param source
      */
     function image(x: number, y: number, source: CanvasImageSource): void
+    /**
+     * Draw a sprite pxiel by pixel represented by a string. Each pixel must be a base 36 number or a dot:
+     *
+     * - A base 36 number (`0-9` or `a-z`) represent a pixel color (supporting color palettes with max 36 colors).
+     * - A dot (`.`) represent a transparent pixel.
+     * - Spaces and lines breaks are ignored and can be used to improve the visualization.
+     *
+     * @param x the position X of the first pixel
+     * @param y the position Y of the first pixel
+     * @param width the width of the sprite
+     * @param height the height of the sprite
+     * @param pixels
+     */
+    function spr(x: number, y: number, width: number, height: number, pixels: string): void
     /**
      * Draw in an OffscreenCanvas and returns its image.
      *
      * @param width
      * @param height
-     * @param drawing
+     * @param callback
      * @param [options]
      * @see https://developer.mozilla.org/en-US/docs/Web/API/OffscreenCanvas
      */
     function paint(
         width: number,
         height: number,
-        drawing: string[] | drawCallback,
+        callback: drawCallback,
         options?: {
             scale?: number
             canvas?: OffscreenCanvas
@@ -531,11 +545,22 @@ declare global {
      */
     function emit(event: string, arg1?: any, arg2?: any, arg3?: any, arg4?: any): void
     /**
-     * Set or reset the color palette
+     * Set or reset the color palette.
      *
      * @param [colors]
      */
     function pal(colors?: string[]): void
+    /**
+     * Swap two colors of the current palette.
+     *
+     * If called without arguments, reset the current palette.
+     *
+     * Note: `palc()` don't affect drawings made with `image()`.
+     *
+     * @param a
+     * @param b
+     */
+    function palc(a?: number, b?: number): void
     /**
      * Define or update a instance property
      *

package/types/types.d.ts

@@ -350,7 +350,7 @@ type LitecanvasInstance = {
      */
     textalign(align: CanvasTextAlign, baseline: CanvasTextBaseline): void
 
-    /** IMAGE GRAPHICS API */
+    /** BASIC GRAPHICS API */
     /**
      * Draw an image
      *
@@ -359,19 +359,33 @@ type LitecanvasInstance = {
      * @param source
      */
     image(x: number, y: number, source: CanvasImageSource): void
+    /**
+     * Draw a sprite pxiel by pixel represented by a string. Each pixel must be a base 36 number or a dot:
+     *
+     * - A base 36 number (`0-9` or `a-z`) represent a pixel color (supporting color palettes with max 36 colors).
+     * - A dot (`.`) represent a transparent pixel.
+     * - Spaces and lines breaks are ignored and can be used to improve the visualization.
+     *
+     * @param x the position X of the first pixel
+     * @param y the position Y of the first pixel
+     * @param width the width of the sprite
+     * @param height the height of the sprite
+     * @param pixels
+     */
+    spr(x: number, y: number, width: number, height: number, pixels: string): void
     /**
      * Draw in an OffscreenCanvas and returns its image.
      *
      * @param width
      * @param height
-     * @param drawing
+     * @param callback
      * @param [options]
      * @see https://developer.mozilla.org/en-US/docs/Web/API/OffscreenCanvas
      */
     paint(
         width: number,
         height: number,
-        drawing: string[] | drawCallback,
+        callback: drawCallback,
         options?: {
             scale?: number
             canvas?: OffscreenCanvas
@@ -528,11 +542,22 @@ type LitecanvasInstance = {
      */
     def(key: string, value: any): void
     /**
-     * Set or reset the color palette
+     * Set or reset the color palette.
      *
      * @param [colors]
      */
     pal(colors?: string[]): void
+    /**
+     * Swap two colors of the current palette.
+     *
+     * If called without arguments, reset the current palette.
+     *
+     * Note: `palc()` don't affect drawings made with `image()`.
+     *
+     * @param a
+     * @param b
+     */
+    palc(a?: number, b?: number): void
     /**
      * The scale of the game's delta time (dt).
      * Values higher than 1 increase the speed of time, while values smaller than 1 decrease it.
@@ -605,13 +630,6 @@ type LitecanvasOptions = {
      * Note: Only works if the option "width" was specified.
      */
     autoscale?: boolean | number
-    /**
-     * If `true`, the pixel art images won't look blurry.
-     * Also, disables canvas built-in antialias.
-     *
-     * Default: `true`
-     */
-    pixelart?: boolean
     /**
      * If `true` (default), all methods and properties of the engine will be exposed to the global scope (window).
      */
@@ -646,12 +664,6 @@ type LitecanvasOptions = {
      * Useful when you want to implement your keyboard handler.
      */
     keyboardEvents?: boolean
-    /**
-     * default: `true`
-     *
-     * if `false` stops the code in `update()` and `draw()` from running repeatedly. By default, tries to run these functions 60 times per second.
-     */
-    animate?: boolean
 }
 
 type LitecanvasGameLoop = {