litecanvas 0.207.2 → 0.209.0

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.207.2";
+  var version = "0.209.0";
   function litecanvas(settings = {}) {
     const root = window,
       math = Math,
@@ -146,7 +146,7 @@
       };
     DEV: assert(
       null == settings || "object" === typeof settings,
-      "litecanvas() 1st parameter must be a object or null",
+      "litecanvas() 1st parameter must be a object",
     );
     settings = Object.assign(defaults, settings);
     let _loop = settings.loop,
@@ -192,11 +192,19 @@
         DEV: assert(isNumber(rads), "rad2deg() 1st parameter must be a number");
         return (180 / math.PI) * rads;
       },
+      mod(a, b) {
+        DEV: assert(isNumber(a), "mod() 1st parameter must be a number");
+        DEV: assert(
+          isNumber(b) && b >= 0,
+          "mod() 2nd parameter must be a non-negative number",
+        );
+        return ((a % b) + b) % b || 0;
+      },
       round: (n, precision = 0) => {
         DEV: assert(isNumber(n), "round() 1st parameter must be a number");
         DEV: assert(
           isNumber(precision) && precision >= 0,
-          "round() 2nd parameter must be a positive number or zero",
+          "round() 2nd parameter must be a non-negative number",
         );
         if (!precision) {
           return math.round(n);
@@ -282,14 +290,14 @@
       rseed(value) {
         DEV: assert(
           isNumber(value) && value >= 0,
-          "rseed() 1st parameter must be a positive integer or zero",
+          "rseed() 1st parameter must be a non-negative integer",
         );
         _rngSeed = ~~value;
       },
       cls(color) {
         DEV: assert(
           null == color || (isNumber(color) && color >= 0),
-          "cls() 1st parameter must be a positive number or zero or undefined",
+          "cls() 1st parameter must be a non-negative number",
         );
         if (null == color) {
           _ctx.clearRect(0, 0, instance.W, instance.H);
@@ -306,11 +314,11 @@
         );
         DEV: assert(
           isNumber(height) && height >= 0,
-          "rect() 4th parameter must be a positive number or zero",
+          "rect() 4th parameter must be a non-negative number",
         );
         DEV: assert(
           null == color || (isNumber(color) && color >= 0),
-          "rect() 5th parameter must be a positive number or zero",
+          "rect() 5th parameter must be a non-negative number",
         );
         DEV: assert(
           null == radii ||
@@ -333,15 +341,15 @@
         DEV: assert(isNumber(y), "rectfill() 2nd parameter must be a number");
         DEV: assert(
           isNumber(width) && width >= 0,
-          "rectfill() 3rd parameter must be a positive number or zero",
+          "rectfill() 3rd parameter must be a non-negative number",
         );
         DEV: assert(
           isNumber(height) && height >= 0,
-          "rectfill() 4th parameter must be a positive number or zero",
+          "rectfill() 4th parameter must be a non-negative number",
         );
         DEV: assert(
           null == color || (isNumber(color) && color >= 0),
-          "rectfill() 5th parameter must be a positive number or zero",
+          "rectfill() 5th parameter must be a non-negative number",
         );
         DEV: assert(
           null == radii ||
@@ -358,15 +366,15 @@
         DEV: assert(isNumber(y), "oval() 2nd parameter must be a number");
         DEV: assert(
           isNumber(radiusX) && radiusX >= 0,
-          "oval() 3rd parameter must be a positive number or zero",
+          "oval() 3rd parameter must be a non-negative number",
         );
         DEV: assert(
           isNumber(radiusY) && radiusY >= 0,
-          "oval() 4th parameter must be a positive number or zero",
+          "oval() 4th parameter must be a non-negative number",
         );
         DEV: assert(
           null == color || (isNumber(color) && color >= 0),
-          "oval() 5th parameter must be a positive number or zero",
+          "oval() 5th parameter must be a non-negative number",
         );
         beginPath(_ctx);
         _ctx.ellipse(~~x, ~~y, ~~radiusX, ~~radiusY, 0, 0, TWO_PI);
@@ -377,15 +385,15 @@
         DEV: assert(isNumber(y), "ovalfill() 2nd parameter must be a number");
         DEV: assert(
           isNumber(radiusX) && radiusX >= 0,
-          "ovalfill() 3rd parameter must be a positive number or zero",
+          "ovalfill() 3rd parameter must be a non-negative number",
         );
         DEV: assert(
           isNumber(radiusY) && radiusY >= 0,
-          "ovalfill() 4th parameter must be a positive number or zero",
+          "ovalfill() 4th parameter must be a non-negative number",
         );
         DEV: assert(
           null == color || (isNumber(color) && color >= 0),
-          "ovalfill() 5th parameter must be a positive number or zero",
+          "ovalfill() 5th parameter must be a non-negative number",
         );
         beginPath(_ctx);
         _ctx.ellipse(~~x, ~~y, ~~radiusX, ~~radiusY, 0, 0, TWO_PI);
@@ -396,11 +404,11 @@
         DEV: assert(isNumber(y), "circ() 2nd parameter must be a number");
         DEV: assert(
           isNumber(radius) && radius >= 0,
-          "circ() 3rd parameter must be a positive number or zero",
+          "circ() 3rd parameter must be a non-negative number",
         );
         DEV: assert(
           null == color || (isNumber(color) && color >= 0),
-          "circ() 4th parameter must be a positive number or zero",
+          "circ() 4th parameter must be a non-negative number",
         );
         instance.oval(x, y, radius, radius, color);
       },
@@ -409,11 +417,11 @@
         DEV: assert(isNumber(y), "circfill() 2nd parameter must be a number");
         DEV: assert(
           isNumber(radius) && radius >= 0,
-          "circfill() 3rd parameter must be a positive number or zero",
+          "circfill() 3rd parameter must be a non-negative number",
         );
         DEV: assert(
           null == color || (isNumber(color) && color >= 0),
-          "circfill() 4th parameter must be a positive number or zero",
+          "circfill() 4th parameter must be a non-negative number",
         );
         instance.ovalfill(x, y, radius, radius, color);
       },
@@ -428,10 +436,10 @@
         );
         beginPath(_ctx);
         for (let i = 0; i < points.length; i += 2) {
-          if (0 === i) {
-            _ctx.moveTo(~~points[i], ~~points[i + 1]);
-          } else {
+          if (i) {
             _ctx.lineTo(~~points[i], ~~points[i + 1]);
+          } else {
+            _ctx.moveTo(~~points[i], ~~points[i + 1]);
           }
         }
         _ctx.lineTo(~~points[0], ~~points[1]);
@@ -441,19 +449,19 @@
         DEV: assert(isNumber(y1), "line() 2nd parameter must be a number");
         DEV: assert(
           isNumber(x2),
-          "line() 3rd parameter must be a positive number or zero",
+          "line() 3rd parameter must be a non-negative number",
         );
         DEV: assert(
           isNumber(y2),
-          "line() 4th parameter must be a positive number or zero",
+          "line() 4th parameter must be a non-negative number",
         );
         DEV: assert(
           null == color || (isNumber(color) && color >= 0),
-          "line() 5th parameter must be a positive number or zero",
+          "line() 5th parameter must be a non-negative number",
         );
         beginPath(_ctx);
-        let xfix = _outline_fix !== 0 && ~~x1 === ~~x2 ? 0.5 : 0;
-        let yfix = _outline_fix !== 0 && ~~y1 === ~~y2 ? 0.5 : 0;
+        let xfix = _outline_fix && ~~x1 === ~~x2 ? 0.5 : 0;
+        let yfix = _outline_fix && ~~y1 === ~~y2 ? 0.5 : 0;
         _ctx.moveTo(~~x1 + xfix, ~~y1 + yfix);
         _ctx.lineTo(~~x2 + xfix, ~~y2 + yfix);
         instance.stroke(color);
@@ -461,10 +469,10 @@
       linewidth(value) {
         DEV: assert(
           isNumber(value) && value >= 0,
-          "linewidth() 1st parameter must be a positive number or zero",
+          "linewidth() 1st parameter must be a non-negative integer",
         );
         _ctx.lineWidth = ~~value;
-        _outline_fix = 0 === ~~value % 2 ? 0 : 0.5;
+        _outline_fix = ~~value % 2 ? 0.5 : 0;
       },
       linedash(segments, offset = 0) {
         DEV: assert(
@@ -483,7 +491,7 @@
         DEV: assert(isNumber(y), "text() 2nd parameter must be a number");
         DEV: assert(
           null == color || (isNumber(color) && color >= 0),
-          "text() 4th parameter must be a positive number or zero",
+          "text() 4th parameter must be a non-negative number",
         );
         DEV: assert(
           "string" === typeof fontStyle,
@@ -554,18 +562,19 @@
           "string" === typeof pixels,
           "spr() 3rd parameter must be a string",
         );
-        const rows = pixels.trim().split("\n");
-        for (let row = 0; row < rows.length; row++) {
-          const chars = rows[row].trim();
-          for (let col = 0; col < chars.length; col++) {
-            const char = chars[col];
-            if (char !== "." && char !== " ") {
+        const rows = pixels
+          .replace(/[^\w.\n]/g, "")
+          .split("\n")
+          .filter((s) => s);
+        for (let i = 0; i < rows.length; i++) {
+          for (let j = 0; j < rows[i].length; j++) {
+            if (rows[i][j] !== ".") {
               instance.rectfill(
-                x + col,
-                y + row,
+                x + j,
+                y + i,
                 1,
                 1,
-                parseInt(char, 36) || 0,
+                parseInt(rows[i][j], 36) || 0,
               );
             }
           }
@@ -617,8 +626,31 @@
         }
         return _ctx;
       },
-      push() {
+      push(
+        translateX = 0,
+        translateY = translateX,
+        rotation = 0,
+        scaleX = 1,
+        scaleY = scaleX,
+      ) {
+        DEV: assert(
+          isNumber(translateX),
+          "push() 1st parameter must be a number",
+        );
+        DEV: assert(
+          isNumber(translateY),
+          "push() 2nd parameter must be a number",
+        );
+        DEV: assert(
+          isNumber(rotation),
+          "push() 3rd parameter must be a number",
+        );
+        DEV: assert(isNumber(scaleX), "push() 4th parameter must be a number");
+        DEV: assert(isNumber(scaleY), "push() 5th parameter must be a number");
         _ctx.save();
+        instance.translate(translateX, translateY);
+        instance.rotate(rotation);
+        instance.scale(scaleX, scaleY);
       },
       pop() {
         _ctx.restore();
@@ -647,7 +679,7 @@
       fill(color) {
         DEV: assert(
           null == color || (isNumber(color) && color >= 0),
-          "fill() 1st parameter must be a positive number or zero",
+          "fill() 1st parameter must be a non-negative number",
         );
         _ctx.fillStyle = getColor(color);
         _ctx.fill();
@@ -655,7 +687,7 @@
       stroke(color) {
         DEV: assert(
           null == color || (isNumber(color) && color >= 0),
-          "stroke() 1st parameter must be a positive number or zero",
+          "stroke() 1st parameter must be a non-negative number",
         );
         _ctx.strokeStyle = getColor(color);
         _ctx.stroke();
@@ -700,7 +732,7 @@
       volume(value) {
         DEV: assert(
           isNumber(value) && value >= 0,
-          "volume() 1st parameter must be a positive number or zero",
+          "volume() 1st parameter must be a non-negative number",
         );
         root.zzfxV = value;
       },
@@ -770,7 +802,7 @@
         );
         DEV: assert(
           isNumber(textColor) && textColor >= 0,
-          "pal() 2nd parameter must be a positive number or zero",
+          "pal() 2nd parameter must be a non-negative number",
         );
         _colorPalette = colors || defaultPalette;
         _colorPaletteState = [];
@@ -786,7 +818,7 @@
           isNumber(a) ? isNumber(b) && b >= 0 : null == b,
           "palc() 2nd parameter must be a positive number",
         );
-        if (a == null) {
+        if (null == a) {
           _colorPaletteState = [];
         } else {
           _colorPaletteState[a] = b;
@@ -810,7 +842,7 @@
       timescale(value) {
         DEV: assert(
           isNumber(value) && value >= 0,
-          "timescale() 1st parameter must be a positive number or zero",
+          "timescale() 1st parameter must be a non-negative number",
         );
         _timeScale = value;
       },
@@ -921,7 +953,7 @@
           _checkTapped = (tap) => tap && perf.now() - tap.t <= 300;
         let _pressingMouse = false;
         on(_canvas, "mousedown", (ev) => {
-          if (ev.button === 0) {
+          if (!ev.button) {
             preventDefault(ev);
             const [x, y] = _getXY(ev);
             instance.emit("tap", x, y, 0);
@@ -930,7 +962,7 @@
           }
         });
         on(_canvas, "mouseup", (ev) => {
-          if (ev.button === 0) {
+          if (!ev.button) {
             preventDefault(ev);
             const tap = _taps.get(0);
             const [x, y] = _getXY(ev);

package/dist/dist.js

@@ -179,6 +179,9 @@
       rad2deg: (rads) => {
         return (180 / math.PI) * rads;
       },
+      mod(a, b) {
+        return ((a % b) + b) % b || 0;
+      },
       round: (n, precision = 0) => {
         if (!precision) {
           return math.round(n);
@@ -260,25 +263,25 @@
       shape(points) {
         beginPath(_ctx);
         for (let i = 0; i < points.length; i += 2) {
-          if (0 === i) {
-            _ctx.moveTo(~~points[i], ~~points[i + 1]);
-          } else {
+          if (i) {
             _ctx.lineTo(~~points[i], ~~points[i + 1]);
+          } else {
+            _ctx.moveTo(~~points[i], ~~points[i + 1]);
           }
         }
         _ctx.lineTo(~~points[0], ~~points[1]);
       },
       line(x1, y1, x2, y2, color) {
         beginPath(_ctx);
-        let xfix = _outline_fix !== 0 && ~~x1 === ~~x2 ? 0.5 : 0;
-        let yfix = _outline_fix !== 0 && ~~y1 === ~~y2 ? 0.5 : 0;
+        let xfix = _outline_fix && ~~x1 === ~~x2 ? 0.5 : 0;
+        let yfix = _outline_fix && ~~y1 === ~~y2 ? 0.5 : 0;
         _ctx.moveTo(~~x1 + xfix, ~~y1 + yfix);
         _ctx.lineTo(~~x2 + xfix, ~~y2 + yfix);
         instance.stroke(color);
       },
       linewidth(value) {
         _ctx.lineWidth = ~~value;
-        _outline_fix = 0 === ~~value % 2 ? 0 : 0.5;
+        _outline_fix = ~~value % 2 ? 0.5 : 0;
       },
       linedash(segments, offset = 0) {
         _ctx.setLineDash(segments);
@@ -313,18 +316,19 @@
         _ctx.drawImage(source, ~~x, ~~y);
       },
       spr(x, y, pixels) {
-        const rows = pixels.trim().split("\n");
-        for (let row = 0; row < rows.length; row++) {
-          const chars = rows[row].trim();
-          for (let col = 0; col < chars.length; col++) {
-            const char = chars[col];
-            if (char !== "." && char !== " ") {
+        const rows = pixels
+          .replace(/[^\w.\n]/g, "")
+          .split("\n")
+          .filter((s) => s);
+        for (let i = 0; i < rows.length; i++) {
+          for (let j = 0; j < rows[i].length; j++) {
+            if (rows[i][j] !== ".") {
               instance.rectfill(
-                x + col,
-                y + row,
+                x + j,
+                y + i,
                 1,
                 1,
-                parseInt(char, 36) || 0,
+                parseInt(rows[i][j], 36) || 0,
               );
             }
           }
@@ -348,8 +352,17 @@
         }
         return _ctx;
       },
-      push() {
+      push(
+        translateX = 0,
+        translateY = translateX,
+        rotation = 0,
+        scaleX = 1,
+        scaleY = scaleX,
+      ) {
         _ctx.save();
+        instance.translate(translateX, translateY);
+        instance.rotate(rotation);
+        instance.scale(scaleX, scaleY);
       },
       pop() {
         _ctx.restore();
@@ -436,7 +449,7 @@
         instance.emit("pal", _colorPalette, _defaultTextColor);
       },
       palc(a, b) {
-        if (a == null) {
+        if (null == a) {
           _colorPaletteState = [];
         } else {
           _colorPaletteState[a] = b;
@@ -541,7 +554,7 @@
           _checkTapped = (tap) => tap && perf.now() - tap.t <= 300;
         let _pressingMouse = false;
         on(_canvas, "mousedown", (ev) => {
-          if (ev.button === 0) {
+          if (!ev.button) {
             preventDefault(ev);
             const [x, y] = _getXY(ev);
             instance.emit("tap", x, y, 0);
@@ -550,7 +563,7 @@
           }
         });
         on(_canvas, "mouseup", (ev) => {
-          if (ev.button === 0) {
+          if (!ev.button) {
             preventDefault(ev);
             const tap = _taps.get(0);
             const [x, y] = _getXY(ev);

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,p=0,u=0,h=0,m=0,g=0,v=1,x=0,w=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,P=0,C=0,I=1,L=0,D=0,A=0,S=y<0?-1:1,H=z*S*y*2/44100,M=b.cos(H),N=b.sin,W=N(H)/4,X=1+W,q=-2*M/X,B=(1-W)/X,V=(1+S*M)/2/X,O=-(S+M)/X,R=0,F=0,G=0,Y=0;for(l=44100*l+9,x*=44100,n*=44100,i*=44100,g*=44100,f*=500*z/85766121e6,h*=z/44100,d*=z/44100,c*=44100,p=44100*p|0,e*=.3*zzfxV,S=l+x+n+i+g|0;C<S;t[C++]=A*e)++D%(100*m|0)||(A=o?1<o?2<o?3<o?N(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):N(T),A=(p?1-w+w*N(z*C/p):1)*(A<0?-1:1)*b.abs(A)**r*(C<l?C/l:C<l+x?1-(C-l)/x*(1-v):C<l+x+n?v:C<S-g?(S-C-g)/i*v:0),A=g?A/2+(g>C?0:(C<S-g?1:(S-C)/g)*t[C-g|0]/2/e):A,y&&(A=Y=V*R+O*(R=F)+V*(F=A)-B*G-q*(G=Y))),T+=(H=(a+=s+=f)*b.cos(h*P++))+H*u*N(C**5),I&&++I>c&&(a+=d,E+=d,I=0),!p||++L%p||(a=E,s=k,I=I||1);(e=zzfxX.createBuffer(1,S,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,p=!1,u,h,m=1,g,v=.5,x=1,w,y=1e3/60,b,z=0,k=3,E="sans-serif",T=20,P=1.2,C=Date.now(),I=e,L=[],D=[.5,0,1750,,,.3,1,,,,600,.1],A={},S={W:0,H:0,T:0,MX:-1,MY:-1,TWO_PI:o,HALF_PI:o/4,lerp:(e,t,a)=>e+a*(t-e),deg2rad:e=>n.PI/180*e,rad2deg:e=>180/n.PI*e,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?S.clamp(o,l,n):o},norm:(e,t,a)=>S.map(e,t,a,0,1),rand:(e=0,t=1)=>(C=(1664525*C+0x3c6ef35f)%0x100000000)/0x100000000*(t-e)+e,randi:(e=0,t=1)=>~~S.rand(e,t+1),rseed(e){C=~~e},cls(e){null==e?g.clearRect(0,0,S.W,S.H):S.rectfill(0,0,S.W,S.H,e)},rect(e,t,a,l,n,i){g.beginPath(),g[i?"roundRect":"rect"](~~e-v,~~t-v,~~a+2*v,~~l+2*v,i),S.stroke(n)},rectfill(e,t,a,l,n,i){g.beginPath(),g[i?"roundRect":"rect"](~~e,~~t,~~a,~~l,i),S.fill(n)},oval(e,t,a,l,n){g.beginPath(),g.ellipse(~~e,~~t,~~a,~~l,0,0,o),S.stroke(n)},ovalfill(e,t,a,l,n){g.beginPath(),g.ellipse(~~e,~~t,~~a,~~l,0,0,o),S.fill(n)},circ(e,t,a,l){S.oval(e,t,a,a,l)},circfill(e,t,a,l){S.ovalfill(e,t,a,a,l)},shape(e){g.beginPath();for(let t=0;t<e.length;t+=2)0===t?g.moveTo(~~e[t],~~e[t+1]):g.lineTo(~~e[t],~~e[t+1]);g.lineTo(~~e[0],~~e[1])},line(e,t,a,l,n){g.beginPath();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),S.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=k,n="normal"){g.font=`${n} ${T}px ${E}`,g.fillStyle=X(l);let i=(""+a).split("\n");for(let a=0;a<i.length;a++)g.fillText(i[a],~~e,~~t+T*P*a)},textgap(e){P=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.trim().split("\n");for(let a=0;a<l.length;a++){let n=l[a].trim();for(let l=0;l<n.length;l++){let i=n[l];"."!==i&&" "!==i&&S.rectfill(e+l,t+a,1,1,parseInt(i,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(){g.save()},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=S.clamp(e,0,1)},fill(e){g.fillStyle=X(e),g.fill()},stroke(e){g.strokeStyle=X(e),g.stroke()},clip(e){g.beginPath(),e(g),g.clip()},sfx:(e,t,a)=>!!l.zzfxV&&(!navigator.userActivation||!!navigator.userActivation.hasBeenActive)&&(e||=D,(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(S,l);for(let e in n)S.def(e,n[e])},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)=>(p&&(W("before:"+(e=e.toLowerCase()),t,a,n,i),c||l[e]===S[e]||"function"!=typeof l[e]||l[e](t,a,n,i),W(e,t,a,n,i),W("after:"+e,t,a,n,i)),t),pal(t,a=3){I=t||e,L=[],k=a,S.emit("pal",I,k)},palc(e,t){null==e?L=[]:L[e]=t},def(e,a){S[e]=a,t.global&&(l[e]=a)},timescale(e){x=e},framerate(e){y=1e3/~~e},stat:e=>[t,p,y/1e3,m,A,I,D,x,l.zzfxV,C,T,E,L,P][e],pause(){u||(u=!0,z=~~cancelAnimationFrame(z),S.emit("paused"))},resume(){p&&u&&(H(),u=!1,S.emit("resumed"))},ispaused:()=>u,quit(){for(let e of(S.emit("quit"),S.pause(),p=!1,A={},s))e();if(t.global){for(let e in S)delete l[e];delete l.ENGINE}}};for(let e of"PI,sin,cos,atan2,hypot,tan,abs,ceil,floor,trunc,min,max,pow,sqrt,sign,exp".split(","))S[e]=n[e];function H(){z||(b=0,w=i.now(),z=r(M))}function M(){z=r(M);let e=i.now(),t=0,a=e-w;for(w=e,b+=a<100?a:y;b>=y;){t++,b-=y;let e=y/1e3*x;S.emit("update",e,t),S.def("T",S.T+e)}t&&(S.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(S.def("W",e),S.def("H",a),h.width=e,h.height=a,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,S.textalign("start","top"),S.emit("resized",m)}function W(e,t,a,l,n){if(A[e])for(let i of A[e])i(t,a,l,n)}function X(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,S),l.ENGINE=S}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()),N(),h.parentNode||a.body.appendChild(h),h.style.imageRendering="pixelated",h.oncontextmenu=()=>!1,c)for(let e in c)c[e]&&S.listen(e,c[e]);return r(function(){if(t.autoscale&&f(l,"resize",N),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(0===t.button){t.preventDefault();let[l,n]=e(t);S.emit("tap",l,n,0),a(0,l,n),r=!0}}),f(h,"mouseup",a=>{if(0===a.button){a.preventDefault();let l=t.get(0),[n,i]=e(a);o(l)&&S.emit("tapped",l.xi,l.yi,0),S.emit("untap",n,i,0),t.delete(0),r=!1}}),f(l,"mousemove",t=>{t.preventDefault();let[a,l]=e(t);S.def("MX",a),S.def("MY",l),r&&(S.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);S.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);S.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)&&S.emit("tapped",l.xi,l.yi,e),S.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))S.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()),S.listen("after:update",()=>t.clear()),S.def("iskeydown",t=>a(e,t)),S.def("iskeypressed",e=>a(t,e)),S.def("lastkey",()=>n)}p=!0,S.emit("init",S),u||H()}),S}})();
+(()=>{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,p=0,u=0,h=0,m=0,g=0,v=1,w=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,P=0,C=0,I=1,L=0,D=0,A=0,S=y<0?-1:1,H=z*S*y*2/44100,M=b.cos(H),N=b.sin,W=N(H)/4,X=1+W,q=-2*M/X,B=(1-W)/X,V=(1+S*M)/2/X,O=-(S+M)/X,R=0,F=0,G=0,Y=0;for(l=44100*l+9,w*=44100,n*=44100,i*=44100,g*=44100,f*=500*z/85766121e6,h*=z/44100,d*=z/44100,c*=44100,p=44100*p|0,e*=.3*zzfxV,S=l+w+n+i+g|0;C<S;t[C++]=A*e)++D%(100*m|0)||(A=o?1<o?2<o?3<o?N(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):N(T),A=(p?1-x+x*N(z*C/p):1)*(A<0?-1:1)*b.abs(A)**r*(C<l?C/l:C<l+w?1-(C-l)/w*(1-v):C<l+w+n?v:C<S-g?(S-C-g)/i*v:0),A=g?A/2+(g>C?0:(C<S-g?1:(S-C)/g)*t[C-g|0]/2/e):A,y&&(A=Y=V*R+O*(R=F)+V*(F=A)-B*G-q*(G=Y))),T+=(H=(a+=s+=f)*b.cos(h*P++))+H*u*N(C**5),I&&++I>c&&(a+=d,E+=d,I=0),!p||++L%p||(a=E,s=k,I=I||1);(e=zzfxX.createBuffer(1,S,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,p=!1,u,h,m=1,g,v=.5,w=1,x,y=1e3/60,b,z=0,k=3,E="sans-serif",T=20,P=1.2,C=Date.now(),I=e,L=[],D=[.5,0,1750,,,.3,1,,,,600,.1],A={},S={W:0,H:0,T:0,MX:-1,MY:-1,TWO_PI:o,HALF_PI:o/4,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?S.clamp(o,l,n):o},norm:(e,t,a)=>S.map(e,t,a,0,1),rand:(e=0,t=1)=>(C=(1664525*C+0x3c6ef35f)%0x100000000)/0x100000000*(t-e)+e,randi:(e=0,t=1)=>~~S.rand(e,t+1),rseed(e){C=~~e},cls(e){null==e?g.clearRect(0,0,S.W,S.H):S.rectfill(0,0,S.W,S.H,e)},rect(e,t,a,l,n,i){g.beginPath(),g[i?"roundRect":"rect"](~~e-v,~~t-v,~~a+2*v,~~l+2*v,i),S.stroke(n)},rectfill(e,t,a,l,n,i){g.beginPath(),g[i?"roundRect":"rect"](~~e,~~t,~~a,~~l,i),S.fill(n)},oval(e,t,a,l,n){g.beginPath(),g.ellipse(~~e,~~t,~~a,~~l,0,0,o),S.stroke(n)},ovalfill(e,t,a,l,n){g.beginPath(),g.ellipse(~~e,~~t,~~a,~~l,0,0,o),S.fill(n)},circ(e,t,a,l){S.oval(e,t,a,a,l)},circfill(e,t,a,l){S.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=v&&~~e==~~a?.5:0,o=v&&~~t==~~l?.5:0;g.moveTo(~~e+i,~~t+o),g.lineTo(~~a+i,~~l+o),S.stroke(n)},linewidth(e){g.lineWidth=~~e,v=~~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=X(l);let i=(""+a).split("\n");for(let a=0;a<i.length;a++)g.fillText(i[a],~~e,~~t+T*P*a)},textgap(e){P=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]&&S.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(),S.translate(e,t),S.rotate(a),S.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=S.clamp(e,0,1)},fill(e){g.fillStyle=X(e),g.fill()},stroke(e){g.strokeStyle=X(e),g.stroke()},clip(e){g.beginPath(),e(g),g.clip()},sfx:(e,t,a)=>!!l.zzfxV&&(!navigator.userActivation||!!navigator.userActivation.hasBeenActive)&&(e||=D,(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(S,l);for(let e in n)S.def(e,n[e])},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)=>(p&&(W("before:"+(e=e.toLowerCase()),t,a,n,i),c||l[e]===S[e]||"function"!=typeof l[e]||l[e](t,a,n,i),W(e,t,a,n,i),W("after:"+e,t,a,n,i)),t),pal(t,a=3){I=t||e,L=[],k=a,S.emit("pal",I,k)},palc(e,t){null==e?L=[]:L[e]=t},def(e,a){S[e]=a,t.global&&(l[e]=a)},timescale(e){w=e},framerate(e){y=1e3/~~e},stat:e=>[t,p,y/1e3,m,A,I,D,w,l.zzfxV,C,T,E,L,P][e],pause(){u||(u=!0,z=~~cancelAnimationFrame(z),S.emit("paused"))},resume(){p&&u&&(H(),u=!1,S.emit("resumed"))},ispaused:()=>u,quit(){for(let e of(S.emit("quit"),S.pause(),p=!1,A={},s))e();if(t.global){for(let e in S)delete l[e];delete l.ENGINE}}};for(let e of"PI,sin,cos,atan2,hypot,tan,abs,ceil,floor,trunc,min,max,pow,sqrt,sign,exp".split(","))S[e]=n[e];function H(){z||(b=0,x=i.now(),z=r(M))}function M(){z=r(M);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*w;S.emit("update",e,t),S.def("T",S.T+e)}t&&(S.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(S.def("W",e),S.def("H",a),h.width=e,h.height=a,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,S.textalign("start","top"),S.emit("resized",m)}function W(e,t,a,l,n){if(A[e])for(let i of A[e])i(t,a,l,n)}function X(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,S),l.ENGINE=S}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()),N(),h.parentNode||a.body.appendChild(h),h.style.imageRendering="pixelated",h.oncontextmenu=()=>!1,c)for(let e in c)c[e]&&S.listen(e,c[e]);return r(function(){if(t.autoscale&&f(l,"resize",N),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);S.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)&&S.emit("tapped",l.xi,l.yi,0),S.emit("untap",n,i,0),t.delete(0),r=!1}}),f(l,"mousemove",t=>{t.preventDefault();let[a,l]=e(t);S.def("MX",a),S.def("MY",l),r&&(S.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);S.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);S.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)&&S.emit("tapped",l.xi,l.yi,e),S.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))S.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()),S.listen("after:update",()=>t.clear()),S.def("iskeydown",t=>a(e,t)),S.def("iskeypressed",e=>a(t,e)),S.def("lastkey",()=>n)}p=!0,S.emit("init",S),u||H()}),S}})();

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "litecanvas",
-    "version": "0.207.2",
+    "version": "0.209.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

@@ -45,7 +45,7 @@ export default function litecanvas(settings = {}) {
 
     DEV: assert(
         null == settings || 'object' === typeof settings,
-        'litecanvas() 1st parameter must be a object or null'
+        'litecanvas() 1st parameter must be a object'
     )
 
     // setup the settings default values
@@ -173,6 +173,25 @@ export default function litecanvas(settings = {}) {
             return (180 / math.PI) * rads
         },
 
+        /**
+         * Modulus (Euclidean division).
+         *
+         * Note: When `b == 0` returns `0`, rather than `NaN`.
+         *
+         * @param {number} a dividend
+         * @param {number} b divisor
+         * @returns {number} the remainder
+         * @example
+         *      mod(-1, 5) // => 4
+         *      -1 % 5 // => -1
+         */
+        mod(a, b) {
+            DEV: assert(isNumber(a), 'mod() 1st parameter must be a number')
+            DEV: assert(isNumber(b) && b >= 0, 'mod() 2nd parameter must be a non-negative number')
+
+            return ((a % b) + b) % b || 0
+        },
+
         /**
          * Returns the rounded value of an number to optional precision (number of digits after the decimal point).
          *
@@ -186,7 +205,7 @@ export default function litecanvas(settings = {}) {
             DEV: assert(isNumber(n), 'round() 1st parameter must be a number')
             DEV: assert(
                 isNumber(precision) && precision >= 0,
-                'round() 2nd parameter must be a positive number or zero'
+                'round() 2nd parameter must be a non-negative number'
             )
 
             if (!precision) {
@@ -347,7 +366,7 @@ export default function litecanvas(settings = {}) {
         rseed(value) {
             DEV: assert(
                 isNumber(value) && value >= 0,
-                'rseed() 1st parameter must be a positive integer or zero'
+                'rseed() 1st parameter must be a non-negative integer'
             )
 
             _rngSeed = ~~value
@@ -355,14 +374,14 @@ export default function litecanvas(settings = {}) {
 
         /** BASIC GRAPHICS API */
         /**
-         * Clear the game screen with an optional color
+         * Clear the game screen with an optional color.
          *
          * @param {number} [color] The background color (index) or null/undefined (for transparent)
          */
         cls(color) {
             DEV: assert(
                 null == color || (isNumber(color) && color >= 0),
-                'cls() 1st parameter must be a positive number or zero or undefined'
+                'cls() 1st parameter must be a non-negative number'
             )
 
             if (null == color) {
@@ -393,11 +412,11 @@ export default function litecanvas(settings = {}) {
             )
             DEV: assert(
                 isNumber(height) && height >= 0,
-                'rect() 4th parameter must be a positive number or zero'
+                'rect() 4th parameter must be a non-negative number'
             )
             DEV: assert(
                 null == color || (isNumber(color) && color >= 0),
-                'rect() 5th parameter must be a positive number or zero'
+                'rect() 5th parameter must be a non-negative number'
             )
             DEV: assert(
                 null == radii || isNumber(radii) || (Array.isArray(radii) && radii.length >= 1),
@@ -405,6 +424,7 @@ export default function litecanvas(settings = {}) {
             )
 
             beginPath(_ctx)
+
             _ctx[radii ? 'roundRect' : 'rect'](
                 ~~x - _outline_fix,
                 ~~y - _outline_fix,
@@ -430,15 +450,15 @@ export default function litecanvas(settings = {}) {
             DEV: assert(isNumber(y), 'rectfill() 2nd parameter must be a number')
             DEV: assert(
                 isNumber(width) && width >= 0,
-                'rectfill() 3rd parameter must be a positive number or zero'
+                'rectfill() 3rd parameter must be a non-negative number'
             )
             DEV: assert(
                 isNumber(height) && height >= 0,
-                'rectfill() 4th parameter must be a positive number or zero'
+                'rectfill() 4th parameter must be a non-negative number'
             )
             DEV: assert(
                 null == color || (isNumber(color) && color >= 0),
-                'rectfill() 5th parameter must be a positive number or zero'
+                'rectfill() 5th parameter must be a non-negative number'
             )
             DEV: assert(
                 null == radii || isNumber(radii) || (Array.isArray(radii) && radii.length >= 1),
@@ -447,6 +467,7 @@ export default function litecanvas(settings = {}) {
             )
 
             beginPath(_ctx)
+
             _ctx[radii ? 'roundRect' : 'rect'](~~x, ~~y, ~~width, ~~height, radii)
             instance.fill(color)
         },
@@ -465,18 +486,19 @@ export default function litecanvas(settings = {}) {
             DEV: assert(isNumber(y), 'oval() 2nd parameter must be a number')
             DEV: assert(
                 isNumber(radiusX) && radiusX >= 0,
-                'oval() 3rd parameter must be a positive number or zero'
+                'oval() 3rd parameter must be a non-negative number'
             )
             DEV: assert(
                 isNumber(radiusY) && radiusY >= 0,
-                'oval() 4th parameter must be a positive number or zero'
+                'oval() 4th parameter must be a non-negative number'
             )
             DEV: assert(
                 null == color || (isNumber(color) && color >= 0),
-                'oval() 5th parameter must be a positive number or zero'
+                'oval() 5th parameter must be a non-negative number'
             )
 
             beginPath(_ctx)
+
             _ctx.ellipse(~~x, ~~y, ~~radiusX, ~~radiusY, 0, 0, TWO_PI)
             instance.stroke(color)
         },
@@ -495,18 +517,19 @@ export default function litecanvas(settings = {}) {
             DEV: assert(isNumber(y), 'ovalfill() 2nd parameter must be a number')
             DEV: assert(
                 isNumber(radiusX) && radiusX >= 0,
-                'ovalfill() 3rd parameter must be a positive number or zero'
+                'ovalfill() 3rd parameter must be a non-negative number'
             )
             DEV: assert(
                 isNumber(radiusY) && radiusY >= 0,
-                'ovalfill() 4th parameter must be a positive number or zero'
+                'ovalfill() 4th parameter must be a non-negative number'
             )
             DEV: assert(
                 null == color || (isNumber(color) && color >= 0),
-                'ovalfill() 5th parameter must be a positive number or zero'
+                'ovalfill() 5th parameter must be a non-negative number'
             )
 
             beginPath(_ctx)
+
             _ctx.ellipse(~~x, ~~y, ~~radiusX, ~~radiusY, 0, 0, TWO_PI)
             instance.fill(color)
         },
@@ -524,11 +547,11 @@ export default function litecanvas(settings = {}) {
             DEV: assert(isNumber(y), 'circ() 2nd parameter must be a number')
             DEV: assert(
                 isNumber(radius) && radius >= 0,
-                'circ() 3rd parameter must be a positive number or zero'
+                'circ() 3rd parameter must be a non-negative number'
             )
             DEV: assert(
                 null == color || (isNumber(color) && color >= 0),
-                'circ() 4th parameter must be a positive number or zero'
+                'circ() 4th parameter must be a non-negative number'
             )
 
             instance.oval(x, y, radius, radius, color)
@@ -547,11 +570,11 @@ export default function litecanvas(settings = {}) {
             DEV: assert(isNumber(y), 'circfill() 2nd parameter must be a number')
             DEV: assert(
                 isNumber(radius) && radius >= 0,
-                'circfill() 3rd parameter must be a positive number or zero'
+                'circfill() 3rd parameter must be a non-negative number'
             )
             DEV: assert(
                 null == color || (isNumber(color) && color >= 0),
-                'circfill() 4th parameter must be a positive number or zero'
+                'circfill() 4th parameter must be a non-negative number'
             )
 
             instance.ovalfill(x, y, radius, radius, color)
@@ -567,15 +590,16 @@ export default function litecanvas(settings = {}) {
             DEV: assert(Array.isArray(points), 'shape() 1st parameter must be an array of numbers')
             DEV: assert(
                 points.length >= 6,
-
                 'shape() 1st parameter must be an array with at least 6 numbers (3 points)'
             )
+
             beginPath(_ctx)
+
             for (let i = 0; i < points.length; i += 2) {
-                if (0 === i) {
-                    _ctx.moveTo(~~points[i], ~~points[i + 1])
-                } else {
+                if (i) {
                     _ctx.lineTo(~~points[i], ~~points[i + 1])
+                } else {
+                    _ctx.moveTo(~~points[i], ~~points[i + 1])
                 }
             }
             _ctx.lineTo(~~points[0], ~~points[1])
@@ -593,17 +617,17 @@ export default function litecanvas(settings = {}) {
         line(x1, y1, x2, y2, color) {
             DEV: assert(isNumber(x1), 'line() 1st parameter must be a number')
             DEV: assert(isNumber(y1), 'line() 2nd parameter must be a number')
-            DEV: assert(isNumber(x2), 'line() 3rd parameter must be a positive number or zero')
-            DEV: assert(isNumber(y2), 'line() 4th parameter must be a positive number or zero')
+            DEV: assert(isNumber(x2), 'line() 3rd parameter must be a non-negative number')
+            DEV: assert(isNumber(y2), 'line() 4th parameter must be a non-negative number')
             DEV: assert(
                 null == color || (isNumber(color) && color >= 0),
-                'line() 5th parameter must be a positive number or zero'
+                'line() 5th parameter must be a non-negative number'
             )
 
             beginPath(_ctx)
 
-            let xfix = _outline_fix !== 0 && ~~x1 === ~~x2 ? 0.5 : 0
-            let yfix = _outline_fix !== 0 && ~~y1 === ~~y2 ? 0.5 : 0
+            let xfix = _outline_fix && ~~x1 === ~~x2 ? 0.5 : 0
+            let yfix = _outline_fix && ~~y1 === ~~y2 ? 0.5 : 0
 
             _ctx.moveTo(~~x1 + xfix, ~~y1 + yfix)
             _ctx.lineTo(~~x2 + xfix, ~~y2 + yfix)
@@ -620,11 +644,11 @@ export default function litecanvas(settings = {}) {
         linewidth(value) {
             DEV: assert(
                 isNumber(value) && value >= 0,
-                'linewidth() 1st parameter must be a positive number or zero'
+                'linewidth() 1st parameter must be a non-negative integer'
             )
 
             _ctx.lineWidth = ~~value
-            _outline_fix = 0 === ~~value % 2 ? 0 : 0.5
+            _outline_fix = ~~value % 2 ? 0.5 : 0
         },
 
         /**
@@ -661,7 +685,7 @@ export default function litecanvas(settings = {}) {
             DEV: assert(isNumber(y), 'text() 2nd parameter must be a number')
             DEV: assert(
                 null == color || (isNumber(color) && color >= 0),
-                'text() 4th parameter must be a positive number or zero'
+                'text() 4th parameter must be a non-negative number'
             )
             DEV: assert('string' === typeof fontStyle, 'text() 5th parameter must be a string')
 
@@ -752,7 +776,11 @@ export default function litecanvas(settings = {}) {
         },
 
         /**
-         * Draw a sprite pixel by pixel represented by a string. Each pixel must be a base 36 number (0-9 or a-z) or a dot.
+         * Draw a sprite, using a string of rows and columns representing a bitmask.
+         * - Each colored pixel must be a base 36 number (0-9 or a-z).
+         * - Use "." (dot) for transparent pixels.
+         * - Any other characters (like symbols) are ignored.
+         * - empty lines are ignored
          *
          * @param {number} x
          * @param {number} y
@@ -763,14 +791,15 @@ export default function litecanvas(settings = {}) {
             DEV: assert(isNumber(y), 'spr() 2nd parameter must be a number')
             DEV: assert('string' === typeof pixels, 'spr() 3rd parameter must be a string')
 
-            const rows = pixels.trim().split('\n')
+            const rows = pixels
+                .replace(/[^\w.\n]/g, '')
+                .split('\n')
+                .filter((s) => s)
 
-            for (let row = 0; row < rows.length; row++) {
-                const chars = rows[row].trim()
-                for (let col = 0; col < chars.length; col++) {
-                    const char = chars[col]
-                    if (char !== '.' && char !== ' ') {
-                        instance.rectfill(x + col, y + row, 1, 1, parseInt(char, 36) || 0)
+            for (let i = 0; i < rows.length; i++) {
+                for (let j = 0; j < rows[i].length; j++) {
+                    if (rows[i][j] !== '.') {
+                        instance.rectfill(x + j, y + i, 1, 1, parseInt(rows[i][j], 36) || 0)
                     }
                 }
             }
@@ -844,16 +873,32 @@ export default function litecanvas(settings = {}) {
             if (context) {
                 _ctx = context
             }
+
             return _ctx
         },
 
         /**
-         * saves the current drawing style settings and transformations
+         * Saves the current drawing style settings and, optionally, transforms (translate/rotate/scale) the canvas.
+         *
+         * @param {number} [translateX]
+         * @param {number} [translateY]
+         * @param {number} [rotation] in radians
+         * @param {number} [scaleX]
+         * @param {number} [scaleY]
          *
          * @see https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/save
          */
-        push() {
+        push(translateX = 0, translateY = translateX, rotation = 0, scaleX = 1, scaleY = scaleX) {
+            DEV: assert(isNumber(translateX), 'push() 1st parameter must be a number')
+            DEV: assert(isNumber(translateY), 'push() 2nd parameter must be a number')
+            DEV: assert(isNumber(rotation), 'push() 3rd parameter must be a number')
+            DEV: assert(isNumber(scaleX), 'push() 4th parameter must be a number')
+            DEV: assert(isNumber(scaleY), 'push() 5th parameter must be a number')
+
             _ctx.save()
+            instance.translate(translateX, translateY)
+            instance.rotate(rotation)
+            instance.scale(scaleX, scaleY)
         },
 
         /**
@@ -922,7 +967,7 @@ export default function litecanvas(settings = {}) {
         fill(color) {
             DEV: assert(
                 null == color || (isNumber(color) && color >= 0),
-                'fill() 1st parameter must be a positive number or zero'
+                'fill() 1st parameter must be a non-negative number'
             )
 
             _ctx.fillStyle = getColor(color)
@@ -937,7 +982,7 @@ export default function litecanvas(settings = {}) {
         stroke(color) {
             DEV: assert(
                 null == color || (isNumber(color) && color >= 0),
-                'stroke() 1st parameter must be a positive number or zero'
+                'stroke() 1st parameter must be a non-negative number'
             )
 
             _ctx.strokeStyle = getColor(color)
@@ -1017,7 +1062,7 @@ export default function litecanvas(settings = {}) {
         volume(value) {
             DEV: assert(
                 isNumber(value) && value >= 0,
-                'volume() 1st parameter must be a positive number or zero'
+                'volume() 1st parameter must be a non-negative number'
             )
 
             root.zzfxV = value
@@ -1137,7 +1182,7 @@ export default function litecanvas(settings = {}) {
             )
             DEV: assert(
                 isNumber(textColor) && textColor >= 0,
-                'pal() 2nd parameter must be a positive number or zero'
+                'pal() 2nd parameter must be a non-negative number'
             )
 
             _colorPalette = colors || defaultPalette
@@ -1167,7 +1212,7 @@ export default function litecanvas(settings = {}) {
                 'palc() 2nd parameter must be a positive number'
             )
 
-            if (a == null) {
+            if (null == a) {
                 _colorPaletteState = []
             } else {
                 _colorPaletteState[a] = b
@@ -1209,7 +1254,7 @@ export default function litecanvas(settings = {}) {
         timescale(value) {
             DEV: assert(
                 isNumber(value) && value >= 0,
-                'timescale() 1st parameter must be a positive number or zero'
+                'timescale() 1st parameter must be a non-negative number'
             )
 
             _timeScale = value
@@ -1391,6 +1436,9 @@ export default function litecanvas(settings = {}) {
                         (ev.pageX - _canvas.offsetLeft) / _canvasScale,
                         (ev.pageY - _canvas.offsetTop) / _canvasScale,
                     ],
+                /**
+                 * @type {Map<number,{x:number, y:number, xi: number, yi: number, t:number}>}
+                 */
                 _taps = new Map(),
                 _registerTap =
                     /**
@@ -1440,7 +1488,7 @@ export default function litecanvas(settings = {}) {
                  * @param {MouseEvent} ev
                  */
                 (ev) => {
-                    if (ev.button === 0) {
+                    if (!ev.button) {
                         preventDefault(ev)
                         const [x, y] = _getXY(ev)
                         instance.emit('tap', x, y, 0)
@@ -1457,7 +1505,7 @@ export default function litecanvas(settings = {}) {
                  * @param {MouseEvent} ev
                  */
                 (ev) => {
-                    if (ev.button === 0) {
+                    if (!ev.button) {
                         preventDefault(ev)
                         const tap = _taps.get(0)
                         const [x, y] = _getXY(ev)

package/src/version.js

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

package/types/global.d.ts

@@ -59,6 +59,19 @@ declare global {
      * @returns the value in degrees
      */
     function rad2deg(rads: number): number
+    /**
+     * Modulus (Euclidean division).
+     *
+     * Note: When `b == 0` returns `0`, rather than `NaN`.
+     *
+     * @param a dividend
+     * @param b divisor
+     * @returns the remainder
+     * @example
+     *      mod(-1, 5) // => 4
+     *      -1 % 5 // => -1
+     */
+    function mod(a: number, b: number): number
     /**
      * Returns the rounded value of an number to optional precision (number of digits after the decimal point).
      *
@@ -388,15 +401,32 @@ declare global {
      */
     function image(x: number, y: number, source: CanvasImageSource): void
     /**
-     * Draw a sprite pixel 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 are ignored and can be used to improve the visualization.
+     * Draw a sprite, using a string of rows and columns representing a bitmask.
+     * - Each colored pixel must be a base 36 number (0-9 or a-z).
+     * - Use "." (dot) for transparent pixels.
+     * - Any other characters (like symbols) are ignored.
+     * - empty lines are ignored
      *
-     * @param x the position X of the first pixel
-     * @param y the position Y of the first pixel
+     * @param x
+     * @param y
      * @param pixels
+     * @see https://litecanvas.js.org/tools/pixel-art-editor.html
+     * @example
+     * function draw() {
+     *   // a little white key 8x8 sprite
+     *   const littleKeySprite = `
+     *     ........
+     *     .3......
+     *     323.....
+     *     3.333333
+     *     3.322323
+     *     232..2.2
+     *     .2......
+     *     ........
+     *   `
+     *   // draw the sprite pixels at position x=10, y=10
+     *   spr(10, 10, littleKeySprite)
+     * }
      */
     function spr(x: number, y: number, pixels: string): void
     /**
@@ -430,10 +460,23 @@ declare global {
         context?: CanvasRenderingContext2D | OffscreenCanvasRenderingContext2D
     ): CanvasRenderingContext2D | OffscreenCanvasRenderingContext2D
     /**
-     * saves the current drawing style settings and transformations
+     * Saves the current drawing style settings and, optionally, transforms (translate/rotate/scale) the canvas.
+     *
+     * @param [translateX]
+     * @param [translateY]
+     * @param [rotation] in radians
+     * @param [scaleX]
+     * @param [scaleY]
+     *
      * @see https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/save
      */
-    function push(): void
+    function push(
+        translateX?: number,
+        translateY?: number,
+        rotation?: number,
+        scaleX?: number,
+        scaleY?: number
+    ): void
     /**
      * restores the drawing style settings and transformations
      * @see https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/restore

package/types/types.d.ts

@@ -5,9 +5,9 @@ type LitecanvasInstance = {
     H: number
     /** the amount of time (in seconds) since the game started */
     T: number
-    /** The current mouse's horizontal (X) position or -1 (if the mouse was not used or detected) */
+    /** The current mouse's horizontal (X) position or `-1` (if the mouse was not used or detected) */
     MX: number
-    /** The current mouse's vertical (Y) position or -1 (if the mouse was not used or detected) */
+    /** The current mouse's vertical (Y) position or `-1` (if the mouse was not used or detected) */
     MY: number
 
     /** MATH API */
@@ -53,6 +53,19 @@ type LitecanvasInstance = {
      * @returns the value in degrees
      */
     rad2deg(rads: number): number
+    /**
+     * Modulus (Euclidean division).
+     *
+     * Note: When `b == 0` returns `0`, rather than `NaN`.
+     *
+     * @param a dividend
+     * @param b divisor
+     * @returns the remainder
+     * @example
+     *      mod(-1, 5) // => 4
+     *      -1 % 5 // => -1
+     */
+    mod(a: number, b: number): number
     /**
      * Returns the rounded value of an number to optional precision (number of digits after the decimal point).
      *
@@ -376,15 +389,32 @@ type LitecanvasInstance = {
      */
     image(x: number, y: number, source: CanvasImageSource): void
     /**
-     * Draw a sprite pixel 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 are ignored and can be used to improve the visualization.
+     * Draw a sprite, using a string of rows and columns representing a bitmask.
+     * - Each colored pixel must be a base 36 number (0-9 or a-z).
+     * - Use "." (dot) for transparent pixels.
+     * - Any other characters (like symbols) are ignored.
+     * - empty lines are ignored
      *
-     * @param x the position X of the first pixel
-     * @param y the position Y of the first pixel
+     * @param x
+     * @param y
      * @param pixels
+     * @see https://litecanvas.js.org/tools/pixel-art-editor.html
+     * @example
+     * function draw() {
+     *   // a little white key 8x8 sprite
+     *   const littleKeySprite = `
+     *     ........
+     *     .3......
+     *     323.....
+     *     3.333333
+     *     3.322323
+     *     232..2.2
+     *     .2......
+     *     ........
+     *   `
+     *   // draw the sprite pixels at position x=10, y=10
+     *   spr(10, 10, littleKeySprite)
+     * }
      */
     spr(x: number, y: number, pixels: string): void
     /**
@@ -418,10 +448,23 @@ type LitecanvasInstance = {
         context?: CanvasRenderingContext2D | OffscreenCanvasRenderingContext2D
     ): CanvasRenderingContext2D | OffscreenCanvasRenderingContext2D
     /**
-     * saves the current drawing style settings and transformations
+     * Saves the current drawing style settings and, optionally, transforms (translate/rotate/scale) the canvas.
+     *
+     * @param [translateX]
+     * @param [translateY]
+     * @param [rotation] in radians
+     * @param [scaleX]
+     * @param [scaleY]
+     *
      * @see https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/save
      */
-    push(): void
+    push(
+        translateX?: number,
+        translateY?: number,
+        rotation?: number,
+        scaleX?: number,
+        scaleY?: number
+    ): void
     /**
      * restores the drawing style settings and transformations
      * @see https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/restore