litecanvas 0.303.0 → 0.401.0

package/README.md

@@ -100,15 +100,28 @@ Litecanvas has a default palette with 4 colors:
 
 <img src=".github/_assets/palette.png" src="The litecanvas color palette" style="2px solid #fff">
 
-Each time a Litecanvas' function ask for a color, you should use an of theses colors by its index.
+Each time a Litecanvas' function ask for a color, you can use an of theses colors by its index (from 0 to 3, by default). But, you can customize the color palette using the `pal()` function. [Example](samples/custom-palette/custom-palette.js)
 
 ```js
-// example: draw a white rectangle
+litecanvas()
+
+// example: draw a white (color #3) rectangle
 let color = 3
 rectfill(0, 0, 32, 32, color)
 ```
 
-> Note: You can customize the color palette using the `pal()` function. [Example](samples/custom-palette/custom-palette.js)
+However, you can also use any other color:
+
+```js
+litecanvas()
+
+// example: draw three "orange" rectangles
+rectfill(0, 0, 32, 32, 'orange')
+rectfill(32, 32, 32, 32, '#ffa500')
+rectfill(64, 64, 32, 32, 'rgb(255, 165, 0)')
+```
+
+[Live Demo](https://litecanvas.js.org?c=eJxNytEKgzAMBdD3fkVwD22hYKerD%2Fub6FIVMjdimX6%2BFZkb5IYL9%2FCYqMPpg7OxSpUl0IrPN9MdHoILpEGIoHgJTj0VINSl3Jhmtdc4MhvvIF9dHdEH1fYHvtNJLjFi8P7fNDcHe04jfWuqEBxcm%2Fy81XYDYQwvNQ%3D%3D)
 
 ### Printing messages
 
@@ -120,9 +133,10 @@ function draw() {
     cls(0)
 
     // print a gray (color #1) text at x=0, y=0
-    text(0, 0, 'Hello!!!', 1)
+    const color = 1
+    text(0, 0, 'Hello!!!', color)
 
-    // use \n to break text lines
+    // use \n to break text lines (by default uses the color #3)
     text(0, 30, 'multi\nline\ntext')
 }
 ```

package/dist/dist.dev.js

@@ -115,7 +115,7 @@
   var assert = (condition, message = "Assertion failed") => {
     if (!condition) throw new Error("[Litecanvas] " + message);
   };
-  var version = "0.303.0";
+  var version = "0.401.0";
   function litecanvas(settings = {}) {
     const root = window,
       math = Math,
@@ -296,8 +296,10 @@
       },
       cls(color) {
         DEV: assert(
-          null == color || (isNumber(color) && color >= 0),
-          "cls() 1st argument must be a non-negative number",
+          null == color ||
+            (isNumber(color) && color >= 0) ||
+            "string" === typeof color,
+          "cls() 1st argument must be a non-negative number or string",
         );
         if (null == color) {
           _ctx.clearRect(0, 0, instance.W, instance.H);
@@ -317,8 +319,10 @@
           "rect() 4th argument must be a non-negative number",
         );
         DEV: assert(
-          null == color || (isNumber(color) && color >= 0),
-          "rect() 5th argument must be a non-negative number",
+          null == color ||
+            (isNumber(color) && color >= 0) ||
+            "string" === typeof color,
+          "rect() 5th argument must be a non-negative number or string",
         );
         DEV: assert(
           null == radii ||
@@ -348,8 +352,10 @@
           "rectfill() 4th argument must be a non-negative number",
         );
         DEV: assert(
-          null == color || (isNumber(color) && color >= 0),
-          "rectfill() 5th argument must be a non-negative number",
+          null == color ||
+            (isNumber(color) && color >= 0) ||
+            "string" === typeof color,
+          "rectfill() 5th argument must be a non-negative number or string",
         );
         DEV: assert(
           null == radii ||
@@ -373,8 +379,10 @@
           "oval() 4th argument must be a non-negative number",
         );
         DEV: assert(
-          null == color || (isNumber(color) && color >= 0),
-          "oval() 5th argument must be a non-negative number",
+          null == color ||
+            (isNumber(color) && color >= 0) ||
+            "string" === typeof color,
+          "oval() 5th argument must be a non-negative number or string",
         );
         beginPath(_ctx);
         _ctx.ellipse(~~x, ~~y, ~~radiusX, ~~radiusY, 0, 0, TAU);
@@ -392,8 +400,10 @@
           "ovalfill() 4th argument must be a non-negative number",
         );
         DEV: assert(
-          null == color || (isNumber(color) && color >= 0),
-          "ovalfill() 5th argument must be a non-negative number",
+          null == color ||
+            (isNumber(color) && color >= 0) ||
+            "string" === typeof color,
+          "ovalfill() 5th argument must be a non-negative number or string",
         );
         beginPath(_ctx);
         _ctx.ellipse(~~x, ~~y, ~~radiusX, ~~radiusY, 0, 0, TAU);
@@ -407,8 +417,10 @@
           "circ() 3rd argument must be a non-negative number",
         );
         DEV: assert(
-          null == color || (isNumber(color) && color >= 0),
-          "circ() 4th argument must be a non-negative number",
+          null == color ||
+            (isNumber(color) && color >= 0) ||
+            "string" === typeof color,
+          "circ() 4th argument must be a non-negative number or string",
         );
         instance.oval(x, y, radius, radius, color);
       },
@@ -420,8 +432,10 @@
           "circfill() 3rd argument must be a non-negative number",
         );
         DEV: assert(
-          null == color || (isNumber(color) && color >= 0),
-          "circfill() 4th argument must be a non-negative number",
+          null == color ||
+            (isNumber(color) && color >= 0) ||
+            "string" === typeof color,
+          "circfill() 4th argument must be a non-negative number or string",
         );
         instance.ovalfill(x, y, radius, radius, color);
       },
@@ -456,8 +470,10 @@
           "line() 4th argument must be a non-negative number",
         );
         DEV: assert(
-          null == color || (isNumber(color) && color >= 0),
-          "line() 5th argument must be a non-negative number",
+          null == color ||
+            (isNumber(color) && color >= 0) ||
+            "string" === typeof color,
+          "line() 5th argument must be a non-negative number or string",
         );
         beginPath(_ctx);
         let xfix = _outline_fix && ~~x1 === ~~x2 ? 0.5 : 0;
@@ -490,8 +506,10 @@
         DEV: assert(isNumber(x), "text() 1st argument must be a number");
         DEV: assert(isNumber(y), "text() 2nd argument must be a number");
         DEV: assert(
-          null == color || (isNumber(color) && color >= 0),
-          "text() 4th argument must be a non-negative number",
+          null == color ||
+            (isNumber(color) && color >= 0) ||
+            "string" === typeof color,
+          "text() 4th argument must be a non-negative number or string",
         );
         DEV: assert(
           "string" === typeof fontStyle,
@@ -669,16 +687,20 @@
       },
       fill(color) {
         DEV: assert(
-          null == color || (isNumber(color) && color >= 0),
-          "fill() 1st argument must be a non-negative number",
+          null == color ||
+            (isNumber(color) && color >= 0) ||
+            "string" === typeof color,
+          "fill() 1st argument must be a non-negative number or string",
         );
         _ctx.fillStyle = getColor(color);
         _ctx.fill();
       },
       stroke(color) {
         DEV: assert(
-          null == color || (isNumber(color) && color >= 0),
-          "stroke() 1st argument must be a non-negative number",
+          null == color ||
+            (isNumber(color) && color >= 0) ||
+            "string" === typeof color,
+          "stroke() 1st argument must be a non-negative number or string",
         );
         _ctx.strokeStyle = getColor(color);
         _ctx.stroke();
@@ -968,77 +990,56 @@
           },
           _checkTapped = (tap) => tap && perf.now() - tap.t <= 300;
         let _pressingMouse = false;
-        on(_canvas, "mousedown", (ev) => {
-          if (!ev.button) {
-            preventDefault(ev);
-            const [x, y] = _getXY(ev);
-            instance.emit("tap", x, y, 0);
-            _registerTap(0, x, y);
+        on(_canvas, "pointerdown", (ev) => {
+          const [x, y] = _getXY(ev);
+          if ("mouse" === ev.pointerType) {
+            if (ev.button) return;
             _pressingMouse = true;
           }
+          const id = ev.pointerId;
+          _registerTap(id, x, y);
+          instance.emit("tap", x, y, id);
+          _canvas.setPointerCapture(id);
         });
-        on(_canvas, "mouseup", (ev) => {
-          if (!ev.button) {
-            preventDefault(ev);
-            const tap = _taps.get(0);
-            const [x, y] = _getXY(ev);
-            if (_checkTapped(tap)) {
-              instance.emit("tapped", tap.xi, tap.yi, 0);
-            }
-            instance.emit("untap", x, y, 0);
-            _taps.delete(0);
-            _pressingMouse = false;
-          }
-        });
-        on(root, "mousemove", (ev) => {
-          preventDefault(ev);
+        on(_canvas, "pointermove", (ev) => {
           const [x, y] = _getXY(ev);
-          instance.def("MX", x);
-          instance.def("MY", y);
-          if (!_pressingMouse) return;
-          instance.emit("tapping", x, y, 0);
-          _updateTap(0, x, y);
-        });
-        on(_canvas, "touchstart", (ev) => {
-          preventDefault(ev);
-          const touches = ev.changedTouches;
-          for (const touch of touches) {
-            const [x, y] = _getXY(touch);
-            instance.emit("tap", x, y, touch.identifier + 1);
-            _registerTap(touch.identifier + 1, x, y);
+          if ("mouse" === ev.pointerType) {
+            instance.def("MX", x);
+            instance.def("MY", y);
+            if (!_pressingMouse) return;
           }
-        });
-        on(_canvas, "touchmove", (ev) => {
-          preventDefault(ev);
-          const touches = ev.changedTouches;
-          for (const touch of touches) {
-            const [x, y] = _getXY(touch);
-            instance.emit("tapping", x, y, touch.identifier + 1);
-            _updateTap(touch.identifier + 1, x, y);
+          const id = ev.pointerId;
+          if (_taps.get(id)) {
+            instance.emit("tapping", x, y, id);
+            _updateTap(id, x, y);
           }
         });
-        const _touchEndHandler = (ev) => {
-          preventDefault(ev);
-          const existing = [];
-          for (const touch of ev.targetTouches) {
-            existing.push(touch.identifier + 1);
+        const _pointerUpHandler = (ev) => {
+          const id = ev.pointerId;
+          const tap = _taps.get(id);
+          const [x, y] = _getXY(ev);
+          if (!tap) return;
+          if ("mouse" === ev.pointerType) {
+            if (ev.button) return;
+            _pressingMouse = false;
           }
-          for (const [id, tap] of _taps) {
-            if (existing.includes(id)) continue;
-            if (_checkTapped(tap)) {
-              instance.emit("tapped", tap.xi, tap.yi, id);
-            }
-            instance.emit("untap", tap.x, tap.y, id);
-            _taps.delete(id);
+          if (_checkTapped(tap)) {
+            instance.emit("tapped", tap.xi, tap.yi, id);
           }
+          instance.emit("untap", x, y, id);
+          _taps.delete(id);
+          _canvas.releasePointerCapture(id);
         };
-        on(_canvas, "touchend", _touchEndHandler);
-        on(_canvas, "touchcancel", _touchEndHandler);
+        on(_canvas, "pointerup", _pointerUpHandler);
+        on(_canvas, "pointercancel", _pointerUpHandler);
         on(root, "blur", () => {
           _pressingMouse = false;
           for (const [id, tap] of _taps) {
             instance.emit("untap", tap.x, tap.y, id);
             _taps.delete(id);
+            try {
+              _canvas.releasePointerCapture(id);
+            } catch (_) {}
           }
         });
       }
@@ -1158,7 +1159,7 @@
       instance.def("H", height);
       _canvas.width = width;
       _canvas.height = height;
-      _canvas.style = "image-rendering:pixelated";
+      _canvas.style = "image-rendering:pixelated;touch-action:none";
       if (settings.autoscale) {
         let maxScale = +settings.autoscale;
         if (!_canvas.style.display) {
@@ -1192,9 +1193,12 @@
         instance.def(key, pluginData[key]);
       }
     }
-    function getColor(index) {
-      const i = _colorPaletteState[index] ?? index;
-      return _currentPalette[~~i % _currentPalette.length];
+    function getColor(color) {
+      return color >= 0
+        ? _currentPalette[
+            ~~(_colorPaletteState[color] ?? color) % _currentPalette.length
+          ]
+        : color;
     }
     if (settings.global) {
       if (root.ENGINE) {

package/dist/dist.js

@@ -564,77 +564,56 @@
           },
           _checkTapped = (tap) => tap && perf.now() - tap.t <= 300;
         let _pressingMouse = false;
-        on(_canvas, "mousedown", (ev) => {
-          if (!ev.button) {
-            preventDefault(ev);
-            const [x, y] = _getXY(ev);
-            instance.emit("tap", x, y, 0);
-            _registerTap(0, x, y);
+        on(_canvas, "pointerdown", (ev) => {
+          const [x, y] = _getXY(ev);
+          if ("mouse" === ev.pointerType) {
+            if (ev.button) return;
             _pressingMouse = true;
           }
+          const id = ev.pointerId;
+          _registerTap(id, x, y);
+          instance.emit("tap", x, y, id);
+          _canvas.setPointerCapture(id);
         });
-        on(_canvas, "mouseup", (ev) => {
-          if (!ev.button) {
-            preventDefault(ev);
-            const tap = _taps.get(0);
-            const [x, y] = _getXY(ev);
-            if (_checkTapped(tap)) {
-              instance.emit("tapped", tap.xi, tap.yi, 0);
-            }
-            instance.emit("untap", x, y, 0);
-            _taps.delete(0);
-            _pressingMouse = false;
-          }
-        });
-        on(root, "mousemove", (ev) => {
-          preventDefault(ev);
+        on(_canvas, "pointermove", (ev) => {
           const [x, y] = _getXY(ev);
-          instance.def("MX", x);
-          instance.def("MY", y);
-          if (!_pressingMouse) return;
-          instance.emit("tapping", x, y, 0);
-          _updateTap(0, x, y);
-        });
-        on(_canvas, "touchstart", (ev) => {
-          preventDefault(ev);
-          const touches = ev.changedTouches;
-          for (const touch of touches) {
-            const [x, y] = _getXY(touch);
-            instance.emit("tap", x, y, touch.identifier + 1);
-            _registerTap(touch.identifier + 1, x, y);
+          if ("mouse" === ev.pointerType) {
+            instance.def("MX", x);
+            instance.def("MY", y);
+            if (!_pressingMouse) return;
           }
-        });
-        on(_canvas, "touchmove", (ev) => {
-          preventDefault(ev);
-          const touches = ev.changedTouches;
-          for (const touch of touches) {
-            const [x, y] = _getXY(touch);
-            instance.emit("tapping", x, y, touch.identifier + 1);
-            _updateTap(touch.identifier + 1, x, y);
+          const id = ev.pointerId;
+          if (_taps.get(id)) {
+            instance.emit("tapping", x, y, id);
+            _updateTap(id, x, y);
           }
         });
-        const _touchEndHandler = (ev) => {
-          preventDefault(ev);
-          const existing = [];
-          for (const touch of ev.targetTouches) {
-            existing.push(touch.identifier + 1);
+        const _pointerUpHandler = (ev) => {
+          const id = ev.pointerId;
+          const tap = _taps.get(id);
+          const [x, y] = _getXY(ev);
+          if (!tap) return;
+          if ("mouse" === ev.pointerType) {
+            if (ev.button) return;
+            _pressingMouse = false;
           }
-          for (const [id, tap] of _taps) {
-            if (existing.includes(id)) continue;
-            if (_checkTapped(tap)) {
-              instance.emit("tapped", tap.xi, tap.yi, id);
-            }
-            instance.emit("untap", tap.x, tap.y, id);
-            _taps.delete(id);
+          if (_checkTapped(tap)) {
+            instance.emit("tapped", tap.xi, tap.yi, id);
           }
+          instance.emit("untap", x, y, id);
+          _taps.delete(id);
+          _canvas.releasePointerCapture(id);
         };
-        on(_canvas, "touchend", _touchEndHandler);
-        on(_canvas, "touchcancel", _touchEndHandler);
+        on(_canvas, "pointerup", _pointerUpHandler);
+        on(_canvas, "pointercancel", _pointerUpHandler);
         on(root, "blur", () => {
           _pressingMouse = false;
           for (const [id, tap] of _taps) {
             instance.emit("untap", tap.x, tap.y, id);
             _taps.delete(id);
+            try {
+              _canvas.releasePointerCapture(id);
+            } catch (_) {}
           }
         });
       }
@@ -719,7 +698,7 @@
       instance.def("H", height);
       _canvas.width = width;
       _canvas.height = height;
-      _canvas.style = "image-rendering:pixelated";
+      _canvas.style = "image-rendering:pixelated;touch-action:none";
       if (settings.autoscale) {
         let maxScale = +settings.autoscale;
         if (!_canvas.style.display) {
@@ -749,9 +728,12 @@
         instance.def(key, pluginData[key]);
       }
     }
-    function getColor(index) {
-      const i = _colorPaletteState[index] ?? index;
-      return _currentPalette[~~i % _currentPalette.length];
+    function getColor(color) {
+      return color >= 0
+        ? _currentPalette[
+            ~~(_colorPaletteState[color] ?? color) % _currentPalette.length
+          ]
+        : color;
     }
     if (settings.global) {
       if (root.ENGINE) {

package/dist/dist.min.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "litecanvas",
-    "version": "0.303.0",
+    "version": "0.401.0",
     "description": "Lightweight HTML5 canvas 2D game engine suitable for small projects and creative coding. Inspired by PICO-8 and p5.js/Processing.",
     "license": "MIT",
     "author": "Luiz Bills <luizbills@pm.me>",

package/src/index.js

@@ -364,12 +364,12 @@ export default function litecanvas(settings = {}) {
         /**
          * Clear the game screen with an optional color.
          *
-         * @param {number} [color] The background color (index) or null/undefined (for transparent)
+         * @param {number|string} [color] The background color (index) or null/undefined (for transparent)
          */
         cls(color) {
             DEV: assert(
-                null == color || (isNumber(color) && color >= 0),
-                'cls() 1st argument must be a non-negative number'
+                null == color || (isNumber(color) && color >= 0) || 'string' === typeof color,
+                'cls() 1st argument must be a non-negative number or string'
             )
 
             if (null == color) {
@@ -386,7 +386,7 @@ export default function litecanvas(settings = {}) {
          * @param {number} y
          * @param {number} width
          * @param {number} height
-         * @param {number} [color=0] the color index
+         * @param {number|string} [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
@@ -403,8 +403,8 @@ export default function litecanvas(settings = {}) {
                 'rect() 4th argument must be a non-negative number'
             )
             DEV: assert(
-                null == color || (isNumber(color) && color >= 0),
-                'rect() 5th argument must be a non-negative number'
+                null == color || (isNumber(color) && color >= 0) || 'string' === typeof color,
+                'rect() 5th argument must be a non-negative number or string'
             )
             DEV: assert(
                 null == radii || isNumber(radii) || (Array.isArray(radii) && radii.length >= 1),
@@ -430,7 +430,7 @@ export default function litecanvas(settings = {}) {
          * @param {number} y
          * @param {number} width
          * @param {number} height
-         * @param {number} [color=0] the color index
+         * @param {number|string} [color=0] the color index
          * @param {number|number[]} [radii] A number or list specifying the radii used to draw a rounded-borders rectangle
          */
         rectfill(x, y, width, height, color, radii) {
@@ -445,8 +445,8 @@ export default function litecanvas(settings = {}) {
                 'rectfill() 4th argument must be a non-negative number'
             )
             DEV: assert(
-                null == color || (isNumber(color) && color >= 0),
-                'rectfill() 5th argument must be a non-negative number'
+                null == color || (isNumber(color) && color >= 0) || 'string' === typeof color,
+                'rectfill() 5th argument must be a non-negative number or string'
             )
             DEV: assert(
                 null == radii || isNumber(radii) || (Array.isArray(radii) && radii.length >= 1),
@@ -467,7 +467,7 @@ export default function litecanvas(settings = {}) {
          * @param {number} y
          * @param {number} radiusX
          * @param {number} radiusY
-         * @param {number} [color=0] the color index
+         * @param {number|string} [color=0] the color index
          */
         oval(x, y, radiusX, radiusY, color) {
             DEV: assert(isNumber(x), 'oval() 1st argument must be a number')
@@ -481,8 +481,8 @@ export default function litecanvas(settings = {}) {
                 'oval() 4th argument must be a non-negative number'
             )
             DEV: assert(
-                null == color || (isNumber(color) && color >= 0),
-                'oval() 5th argument must be a non-negative number'
+                null == color || (isNumber(color) && color >= 0) || 'string' === typeof color,
+                'oval() 5th argument must be a non-negative number or string'
             )
 
             beginPath(_ctx)
@@ -498,7 +498,7 @@ export default function litecanvas(settings = {}) {
          * @param {number} y
          * @param {number} radiusX
          * @param {number} radiusY
-         * @param {number} [color=0] the color index
+         * @param {number|string} [color=0] the color index
          */
         ovalfill(x, y, radiusX, radiusY, color) {
             DEV: assert(isNumber(x), 'ovalfill() 1st argument must be a number')
@@ -512,8 +512,8 @@ export default function litecanvas(settings = {}) {
                 'ovalfill() 4th argument must be a non-negative number'
             )
             DEV: assert(
-                null == color || (isNumber(color) && color >= 0),
-                'ovalfill() 5th argument must be a non-negative number'
+                null == color || (isNumber(color) && color >= 0) || 'string' === typeof color,
+                'ovalfill() 5th argument must be a non-negative number or string'
             )
 
             beginPath(_ctx)
@@ -528,7 +528,7 @@ export default function litecanvas(settings = {}) {
          * @param {number} x
          * @param {number} y
          * @param {number} radius
-         * @param {number} [color=0] the color index
+         * @param {number|string} [color=0] the color index
          */
         circ(x, y, radius, color) {
             DEV: assert(isNumber(x), 'circ() 1st argument must be a number')
@@ -538,8 +538,8 @@ export default function litecanvas(settings = {}) {
                 'circ() 3rd argument must be a non-negative number'
             )
             DEV: assert(
-                null == color || (isNumber(color) && color >= 0),
-                'circ() 4th argument must be a non-negative number'
+                null == color || (isNumber(color) && color >= 0) || 'string' === typeof color,
+                'circ() 4th argument must be a non-negative number or string'
             )
 
             instance.oval(x, y, radius, radius, color)
@@ -551,7 +551,7 @@ export default function litecanvas(settings = {}) {
          * @param {number} x
          * @param {number} y
          * @param {number} radius
-         * @param {number} [color=0] the color index
+         * @param {number|string} [color=0] the color index
          */
         circfill(x, y, radius, color) {
             DEV: assert(isNumber(x), 'circfill() 1st argument must be a number')
@@ -561,8 +561,8 @@ export default function litecanvas(settings = {}) {
                 'circfill() 3rd argument must be a non-negative number'
             )
             DEV: assert(
-                null == color || (isNumber(color) && color >= 0),
-                'circfill() 4th argument must be a non-negative number'
+                null == color || (isNumber(color) && color >= 0) || 'string' === typeof color,
+                'circfill() 4th argument must be a non-negative number or string'
             )
 
             instance.ovalfill(x, y, radius, radius, color)
@@ -600,7 +600,7 @@ export default function litecanvas(settings = {}) {
          * @param {number} y1
          * @param {number} x2
          * @param {number} y2
-         * @param {number} [color=0] the color index
+         * @param {number|string} [color=0] the color index
          */
         line(x1, y1, x2, y2, color) {
             DEV: assert(isNumber(x1), 'line() 1st argument must be a number')
@@ -608,8 +608,8 @@ export default function litecanvas(settings = {}) {
             DEV: assert(isNumber(x2), 'line() 3rd argument must be a non-negative number')
             DEV: assert(isNumber(y2), 'line() 4th argument must be a non-negative number')
             DEV: assert(
-                null == color || (isNumber(color) && color >= 0),
-                'line() 5th argument must be a non-negative number'
+                null == color || (isNumber(color) && color >= 0) || 'string' === typeof color,
+                'line() 5th argument must be a non-negative number or string'
             )
 
             beginPath(_ctx)
@@ -665,15 +665,15 @@ export default function litecanvas(settings = {}) {
          * @param {number} x
          * @param {number} y
          * @param {string} message the text message
-         * @param {number} [color] the color index
+         * @param {number|string} [color] the color index
          * @param {string} [fontStyle] can be "normal" (default), "italic" and/or "bold".
          */
         text(x, y, message, color = _defaultTextColor, fontStyle = 'normal') {
             DEV: assert(isNumber(x), 'text() 1st argument must be a number')
             DEV: assert(isNumber(y), 'text() 2nd argument must be a number')
             DEV: assert(
-                null == color || (isNumber(color) && color >= 0),
-                'text() 4th argument must be a non-negative number'
+                null == color || (isNumber(color) && color >= 0) || 'string' === typeof color,
+                'text() 4th argument must be a non-negative number or string'
             )
             DEV: assert('string' === typeof fontStyle, 'text() 5th argument must be a string')
 
@@ -947,12 +947,12 @@ export default function litecanvas(settings = {}) {
         /**
          * Fills the current path with a given color.
          *
-         * @param {number} [color=0]
+         * @param {number|string} [color=0]
          */
         fill(color) {
             DEV: assert(
-                null == color || (isNumber(color) && color >= 0),
-                'fill() 1st argument must be a non-negative number'
+                null == color || (isNumber(color) && color >= 0) || 'string' === typeof color,
+                'fill() 1st argument must be a non-negative number or string'
             )
 
             _ctx.fillStyle = getColor(color)
@@ -962,12 +962,12 @@ export default function litecanvas(settings = {}) {
         /**
          * Outlines the current path with a given color.
          *
-         * @param {number} [color=0]
+         * @param {number|string} [color=0]
          */
         stroke(color) {
             DEV: assert(
-                null == color || (isNumber(color) && color >= 0),
-                'stroke() 1st argument must be a non-negative number'
+                null == color || (isNumber(color) && color >= 0) || 'string' === typeof color,
+                'stroke() 1st argument must be a non-negative number or string'
             )
 
             _ctx.strokeStyle = getColor(color)
@@ -1502,128 +1502,70 @@ export default function litecanvas(settings = {}) {
 
             let _pressingMouse = false
 
-            on(
-                _canvas,
-                'mousedown',
-                /**
-                 * @param {MouseEvent} ev
-                 */
-                (ev) => {
-                    if (!ev.button) {
-                        preventDefault(ev)
-                        const [x, y] = _getXY(ev)
-                        instance.emit('tap', x, y, 0)
-                        _registerTap(0, x, y)
-                        _pressingMouse = true
-                    }
-                }
-            )
+            on(_canvas, 'pointerdown', (ev) => {
+                const [x, y] = _getXY(ev)
 
-            on(
-                _canvas,
-                'mouseup',
-                /**
-                 * @param {MouseEvent} ev
-                 */
-                (ev) => {
-                    if (!ev.button) {
-                        preventDefault(ev)
-                        const tap = _taps.get(0)
-                        const [x, y] = _getXY(ev)
-                        if (_checkTapped(tap)) {
-                            instance.emit('tapped', tap.xi, tap.yi, 0)
-                        }
-                        instance.emit('untap', x, y, 0)
-                        _taps.delete(0)
-                        _pressingMouse = false
-                    }
+                if ('mouse' === ev.pointerType) {
+                    if (ev.button) return
+                    _pressingMouse = true
                 }
-            )
 
-            on(
-                root,
-                'mousemove',
-                /**
-                 * @param {MouseEvent} ev
-                 */
-                (ev) => {
-                    preventDefault(ev)
+                const id = ev.pointerId
+                _registerTap(id, x, y)
+                instance.emit('tap', x, y, id)
+
+                _canvas.setPointerCapture(id)
+            })
 
-                    const [x, y] = _getXY(ev)
+            on(_canvas, 'pointermove', (ev) => {
+                const [x, y] = _getXY(ev)
+
+                if ('mouse' === ev.pointerType) {
                     instance.def('MX', x)
                     instance.def('MY', y)
-
                     if (!_pressingMouse) return
-
-                    instance.emit('tapping', x, y, 0)
-                    _updateTap(0, x, y)
                 }
-            )
 
-            on(
-                _canvas,
-                'touchstart',
-                /**
-                 * @param {TouchEvent} ev
-                 */
-                (ev) => {
-                    preventDefault(ev)
-                    /** @type {TouchList} touches */
-                    const touches = ev.changedTouches
-                    for (const touch of touches) {
-                        const [x, y] = _getXY(touch)
-                        instance.emit('tap', x, y, touch.identifier + 1)
-                        _registerTap(touch.identifier + 1, x, y)
-                    }
+                const id = ev.pointerId
+                if (_taps.get(id)) {
+                    instance.emit('tapping', x, y, id)
+                    _updateTap(id, x, y)
                 }
-            )
+            })
 
-            on(
-                _canvas,
-                'touchmove',
-                /**
-                 * @param {TouchEvent} ev
-                 */
-                (ev) => {
-                    preventDefault(ev)
-                    const touches = ev.changedTouches
-                    for (const touch of touches) {
-                        const [x, y] = _getXY(touch)
-                        instance.emit('tapping', x, y, touch.identifier + 1)
-                        _updateTap(touch.identifier + 1, x, y)
-                    }
-                }
-            )
+            const _pointerUpHandler = (ev) => {
+                const id = ev.pointerId
+                const tap = _taps.get(id)
+                const [x, y] = _getXY(ev)
 
-            /**
-             * @param {TouchEvent} ev
-             */
-            const _touchEndHandler = (ev) => {
-                preventDefault(ev)
-                const existing = []
+                if (!tap) return
 
-                for (const touch of ev.targetTouches) {
-                    existing.push(touch.identifier + 1)
+                if ('mouse' === ev.pointerType) {
+                    if (ev.button) return
+                    _pressingMouse = false
                 }
 
-                for (const [id, tap] of _taps) {
-                    if (existing.includes(id)) continue
-                    if (_checkTapped(tap)) {
-                        instance.emit('tapped', tap.xi, tap.yi, id)
-                    }
-                    instance.emit('untap', tap.x, tap.y, id)
-                    _taps.delete(id)
+                if (_checkTapped(tap)) {
+                    instance.emit('tapped', tap.xi, tap.yi, id)
                 }
+
+                instance.emit('untap', x, y, id)
+
+                _taps.delete(id)
+                _canvas.releasePointerCapture(id)
             }
 
-            on(_canvas, 'touchend', _touchEndHandler)
-            on(_canvas, 'touchcancel', _touchEndHandler)
+            on(_canvas, 'pointerup', _pointerUpHandler)
+            on(_canvas, 'pointercancel', _pointerUpHandler)
 
             on(root, 'blur', () => {
                 _pressingMouse = false
                 for (const [id, tap] of _taps) {
                     instance.emit('untap', tap.x, tap.y, id)
                     _taps.delete(id)
+                    try {
+                        _canvas.releasePointerCapture(id)
+                    } catch (_) {}
                 }
             })
         }
@@ -1806,8 +1748,7 @@ export default function litecanvas(settings = {}) {
         _canvas.width = width
         _canvas.height = height
 
-        /** @ts-ignore */
-        _canvas.style = 'image-rendering:pixelated'
+        _canvas.style = 'image-rendering:pixelated;touch-action:none'
 
         if (settings.autoscale) {
             let maxScale = +settings.autoscale
@@ -1867,12 +1808,13 @@ export default function litecanvas(settings = {}) {
     }
 
     /**
-     * @param {number} index
+     * @param {number|string} color
      * @returns {string}
      */
-    function getColor(index) {
-        const i = _colorPaletteState[index] ?? index
-        return _currentPalette[~~i % _currentPalette.length]
+    function getColor(color) {
+        return color >= 0
+            ? _currentPalette[~~(_colorPaletteState[color] ?? color) % _currentPalette.length]
+            : color
     }
 
     if (settings.global) {

package/src/version.js

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

package/types/global.d.ts

@@ -1,4 +1,4 @@
-import './types'
+import './types.d.ts'
 
 export default function litecanvas(settings?: LitecanvasOptions): LitecanvasInstance
 
@@ -216,7 +216,7 @@ declare global {
      *
      * @param color The background color index or `null`
      */
-    function cls(color: number | null): void
+    function cls(color?: number | string): void
 
     /**
      * Draw a rectangle outline
@@ -235,7 +235,7 @@ declare global {
         y: number,
         width: number,
         height: number,
-        color?: number,
+        color?: number | string,
         radii?: number | number[]
     ): void
     /**
@@ -253,7 +253,7 @@ declare global {
         y: number,
         width: number,
         height: number,
-        color?: number,
+        color?: number | string,
         radii?: number | number[]
     ): void
     /**
@@ -264,7 +264,7 @@ declare global {
      * @param radius
      * @param [color=0] the color index
      */
-    function circ(x: number, y: number, radius: number, color?: number): void
+    function circ(x: number, y: number, radius: number, color?: number | string): void
     /**
      * Draw a color-filled circle
      *
@@ -273,7 +273,7 @@ declare global {
      * @param radius
      * @param [color=0] the color index
      */
-    function circfill(x: number, y: number, radius: number, color?: number): void
+    function circfill(x: number, y: number, radius: number, color?: number | string): void
     /**
      * Draw a ellipse outline
      *
@@ -283,7 +283,13 @@ declare global {
      * @param radiusY
      * @param [color=0] the color index
      */
-    function oval(x: number, y: number, radiusX: number, radiusY: number, color?: number): void
+    function oval(
+        x: number,
+        y: number,
+        radiusX: number,
+        radiusY: number,
+        color?: number | string
+    ): void
     /**
      * Draw a color-filled ellipse
      *
@@ -293,7 +299,13 @@ declare global {
      * @param radiusY
      * @param [color=0] the color index
      */
-    function ovalfill(x: number, y: number, radiusX: number, radiusY: number, color?: number): void
+    function ovalfill(
+        x: number,
+        y: number,
+        radiusX: number,
+        radiusY: number,
+        color?: number | string
+    ): void
     /**
      * Make a custom shape in the canvas context.
      * Then, just use `fill` or `stroke` to draw the shape.
@@ -316,7 +328,7 @@ declare global {
      * @param y2
      * @param [color=0] the color index
      */
-    function line(x1: number, y1: number, x2: number, y2: number, color?: number): void
+    function line(x1: number, y1: number, x2: number, y2: number, color?: number | string): void
     /**
      * Sets the thickness of lines
      *
@@ -344,7 +356,13 @@ declare global {
      * @param [color=3] the color index
      * @param [fontStyle="normal"] can be "normal" (default), "italic" and/or "bold"
      */
-    function text(x: number, y: number, message: string, color?: number, fontStyle?: string): void
+    function text(
+        x: number,
+        y: number,
+        message: string,
+        color?: number | string,
+        fontStyle?: string
+    ): void
     /**
      * Set the font family
      *
@@ -498,13 +516,13 @@ declare global {
      *
      * @param color
      */
-    function fill(color: number): void
+    function fill(color?: number | string): void
     /**
      * Outlines the current path with a given color.
      *
      * @param color
      */
-    function stroke(color: number): void
+    function stroke(color?: number | string): void
     /**
      * Turns a path (in the callback) into the current clipping region.
      *

package/types/types.d.ts

@@ -210,7 +210,7 @@ type LitecanvasInstance = {
      *
      * @param color The background color index or `null`
      */
-    cls(color: number | null): void
+    cls(color?: number | string): void
 
     /**
      * Draw a rectangle outline
@@ -229,7 +229,7 @@ type LitecanvasInstance = {
         y: number,
         width: number,
         height: number,
-        color?: number,
+        color?: number | string,
         radii?: number | number[]
     ): void
     /**
@@ -247,7 +247,7 @@ type LitecanvasInstance = {
         y: number,
         width: number,
         height: number,
-        color?: number,
+        color?: number | string,
         radii?: number | number[]
     ): void
     /**
@@ -258,7 +258,7 @@ type LitecanvasInstance = {
      * @param radius
      * @param [color=0] the color index
      */
-    circ(x: number, y: number, radius: number, color?: number): void
+    circ(x: number, y: number, radius: number, color?: number | string): void
     /**
      * Draw a color-filled circle
      *
@@ -267,7 +267,7 @@ type LitecanvasInstance = {
      * @param radius
      * @param [color=0] the color index
      */
-    circfill(x: number, y: number, radius: number, color?: number): void
+    circfill(x: number, y: number, radius: number, color?: number | string): void
     /**
      * Draw a ellipse outline
      *
@@ -277,7 +277,7 @@ type LitecanvasInstance = {
      * @param radiusY
      * @param [color=0] the color index
      */
-    oval(x: number, y: number, radiusX: number, radiusY: number, color?: number): void
+    oval(x: number, y: number, radiusX: number, radiusY: number, color?: number | string): void
     /**
      * Draw a color-filled ellipse
      *
@@ -287,7 +287,7 @@ type LitecanvasInstance = {
      * @param radiusY
      * @param [color=0] the color index
      */
-    ovalfill(x: number, y: number, radiusX: number, radiusY: number, color?: number): void
+    ovalfill(x: number, y: number, radiusX: number, radiusY: number, color?: number | string): void
     /**
      * Make a custom shape in the canvas context.
      * Then, just use `fill` or `stroke` to draw the shape.
@@ -304,7 +304,7 @@ type LitecanvasInstance = {
      * @param y2
      * @param [color=0] the color index
      */
-    line(x1: number, y1: number, x2: number, y2: number, color?: number): void
+    line(x1: number, y1: number, x2: number, y2: number, color?: number | string): void
     /**
      * Sets the thickness of lines
      *
@@ -332,7 +332,7 @@ type LitecanvasInstance = {
      * @param [color=3] the color index
      * @param [fontStyle="normal"] can be "normal" (default), "italic" and/or "bold"
      */
-    text(x: number, y: number, message: string, color?: number, fontStyle?: string): void
+    text(x: number, y: number, message: string, color?: number | string, fontStyle?: string): void
     /**
      * Set the font family
      *
@@ -486,13 +486,13 @@ type LitecanvasInstance = {
      *
      * @param color
      */
-    fill(color: number): void
+    fill(color?: number | string): void
     /**
      * Outlines the current path with a given color.
      *
      * @param color
      */
-    stroke(color: number): void
+    stroke(color?: number | string): void
     /**
      * Turns a path (in the callback) into the current clipping region.
      *