litecanvas 0.84.0 → 0.84.2

package/dist/dist.dev.js

@@ -33,10 +33,10 @@
 
   // src/index.js
   function litecanvas(settings = {}) {
-    const root = globalThis, math = Math, TWO_PI = math.PI * 2, raf = requestAnimationFrame, _browserEventListeners = [], on = (elem, evt, callback) => {
+    const root = window, math = Math, TWO_PI = math.PI * 2, raf = requestAnimationFrame, _browserEventListeners = [], on = (elem, evt, callback) => {
       elem.addEventListener(evt, callback, false);
       _browserEventListeners.push(() => elem.removeEventListener(evt, callback, false));
-    }, zzfx = setupZzFX(root), isNumber = Number.isFinite, defaults = {
+    }, isNumber = Number.isFinite, zzfx = setupZzFX(root), defaults = {
       width: null,
       height: null,
       autoscale: true,
@@ -556,8 +556,11 @@
        * @see https://developer.mozilla.org/en-US/docs/Web/API/OffscreenCanvas
        */
       paint(width, height, drawing, options = {}) {
-        DEV: assert(isNumber(width), "paint: 1st param must be a number");
-        DEV: assert(isNumber(height), "paint: 2nd param must be a number");
+        DEV: assert(isNumber(width) && width >= 1, "paint: 1st param must be a positive number");
+        DEV: assert(
+          isNumber(height) && height >= 1,
+          "paint: 2nd param must be a positive number"
+        );
         DEV: assert(
           "function" === typeof drawing || Array.isArray(drawing),
           "paint: 3rd param must be a function or array"
@@ -566,12 +569,16 @@
           options && !options.scale || isNumber(options.scale),
           "paint: 4th param (options.scale) must be a number"
         );
+        DEV: assert(
+          options && !options.canvas || options.canvas instanceof OffscreenCanvas,
+          "paint: 4th param (options.canvas) must be an OffscreenCanvas"
+        );
         const canvas = options.canvas || new OffscreenCanvas(1, 1), scale = options.scale || 1, contextOriginal = _ctx;
         canvas.width = width * scale;
         canvas.height = height * scale;
         _ctx = canvas.getContext("2d");
         _ctx.scale(scale, scale);
-        if (drawing.push) {
+        if (Array.isArray(drawing)) {
           let x = 0, y = 0;
           _ctx.imageSmoothingEnabled = false;
           for (const str of drawing) {
@@ -748,7 +755,10 @@
         );
         DEV: assert(isNumber(pitchSlide), "sfx: 2nd param must be a number");
         DEV: assert(isNumber(volumeFactor), "sfx: 3rd param must be a number");
-        if (root.zzfxV <= 0 || navigator.userActivation && !navigator.userActivation.hasBeenActive) {
+        if (
+          // @ts-ignore
+          root.zzfxV <= 0 || navigator.userActivation && !navigator.userActivation.hasBeenActive
+        ) {
           return false;
         }
         zzfxParams = zzfxParams || _defaultSound;
@@ -776,9 +786,7 @@
        *
        * @returns {HTMLCanvasElement}
        */
-      canvas() {
-        return _canvas;
-      },
+      canvas: () => _canvas,
       /**
        * Prepares a plugin to be loaded
        *
@@ -887,7 +895,7 @@
        * @returns {any}
        */
       stat(n) {
-        DEV: assert(isNumber(n) && n >= 0, "stat: 1st param must be a positive number");
+        DEV: assert(isNumber(n) && n >= 0, "stat: 1st param must be a number");
         const list = [
           // 0
           settings,
@@ -906,6 +914,7 @@
           // 7
           _timeScale,
           // 8
+          // @ts-ignore
           root.zzfxV || 1,
           // 9
           _rngSeed,
@@ -935,6 +944,7 @@
           }
           delete root.ENGINE;
         }
+        _initialized = false;
       }
     };
     for (const k of "PI,sin,cos,atan2,hypot,tan,abs,ceil,floor,trunc,min,max,pow,sqrt,sign,exp".split(",")) {
@@ -1199,7 +1209,6 @@
       }
       _canvas = _canvas || document.createElement("canvas");
       DEV: assert(_canvas && _canvas.tagName === "CANVAS", "Invalid canvas element");
-      instance.def("CANVAS", _canvas);
       _ctx = _canvas.getContext("2d");
       on(_canvas, "click", () => root.focus());
       _canvas.style = "";
@@ -1224,8 +1233,6 @@
       const width = settings.width || root.innerWidth, height = settings.height || settings.width || root.innerHeight;
       instance.def("W", _canvas.width = width);
       instance.def("H", _canvas.height = height);
-      instance.def("CX", instance.W / 2);
-      instance.def("CY", instance.H / 2);
       if (settings.autoscale) {
         if (!_canvas.style.display) {
           _canvas.style.display = "block";

package/dist/dist.js

@@ -28,10 +28,10 @@
 
   // src/index.js
   function litecanvas(settings = {}) {
-    const root = globalThis, math = Math, TWO_PI = math.PI * 2, raf = requestAnimationFrame, _browserEventListeners = [], on = (elem, evt, callback) => {
+    const root = window, math = Math, TWO_PI = math.PI * 2, raf = requestAnimationFrame, _browserEventListeners = [], on = (elem, evt, callback) => {
       elem.addEventListener(evt, callback, false);
       _browserEventListeners.push(() => elem.removeEventListener(evt, callback, false));
-    }, zzfx = setupZzFX(root), isNumber = Number.isFinite, defaults = {
+    }, isNumber = Number.isFinite, zzfx = setupZzFX(root), defaults = {
       width: null,
       height: null,
       autoscale: true,
@@ -417,7 +417,7 @@
         canvas.height = height * scale;
         _ctx = canvas.getContext("2d");
         _ctx.scale(scale, scale);
-        if (drawing.push) {
+        if (Array.isArray(drawing)) {
           let x = 0, y = 0;
           _ctx.imageSmoothingEnabled = false;
           for (const str of drawing) {
@@ -561,7 +561,10 @@
        * @see https://github.com/KilledByAPixel/ZzFX
        */
       sfx(zzfxParams, pitchSlide = 0, volumeFactor = 1) {
-        if (root.zzfxV <= 0 || navigator.userActivation && !navigator.userActivation.hasBeenActive) {
+        if (
+          // @ts-ignore
+          root.zzfxV <= 0 || navigator.userActivation && !navigator.userActivation.hasBeenActive
+        ) {
           return false;
         }
         zzfxParams = zzfxParams || _defaultSound;
@@ -588,9 +591,7 @@
        *
        * @returns {HTMLCanvasElement}
        */
-      canvas() {
-        return _canvas;
-      },
+      canvas: () => _canvas,
       /**
        * Prepares a plugin to be loaded
        *
@@ -696,6 +697,7 @@
           // 7
           _timeScale,
           // 8
+          // @ts-ignore
           root.zzfxV || 1,
           // 9
           _rngSeed,
@@ -725,6 +727,7 @@
           }
           delete root.ENGINE;
         }
+        _initialized = false;
       }
     };
     for (const k of "PI,sin,cos,atan2,hypot,tan,abs,ceil,floor,trunc,min,max,pow,sqrt,sign,exp".split(",")) {
@@ -976,7 +979,6 @@
         _canvas = document.querySelector(settings.canvas);
       }
       _canvas = _canvas || document.createElement("canvas");
-      instance.def("CANVAS", _canvas);
       _ctx = _canvas.getContext("2d");
       on(_canvas, "click", () => root.focus());
       _canvas.style = "";
@@ -989,8 +991,6 @@
       const width = settings.width || root.innerWidth, height = settings.height || settings.width || root.innerHeight;
       instance.def("W", _canvas.width = width);
       instance.def("H", _canvas.height = height);
-      instance.def("CX", instance.W / 2);
-      instance.def("CY", instance.H / 2);
       if (settings.autoscale) {
         if (!_canvas.style.display) {
           _canvas.style.display = "block";

package/dist/dist.min.js

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

package/package.json

@@ -1,19 +1,20 @@
 {
     "name": "litecanvas",
-    "version": "0.84.0",
+    "version": "0.84.2",
     "description": "Lightweight HTML5 canvas 2D game engine suitable for small projects and creative coding. Inspired by PICO-8 and P5/Processing.",
     "license": "MIT",
     "author": "Luiz Bills <luizbills@pm.me>",
     "contributors": [],
     "devDependencies": {
-        "@swc/core": "^1.12.5",
+        "@litecanvas/jsdom-extras": "^1.1.0",
+        "@swc/core": "^1.12.6",
+        "@types/jsdom": "^21.1.7",
         "ava": "^6.4.0",
         "esbuild": "^0.25.5",
         "gzip-size": "^7.0.0",
-        "prettier": "^3.5.3",
-        "tap-min": "^3.0.0",
-        "@types/jsdom": "^21.1.7",
-        "jsdom": "^26.1.0"
+        "jsdom": "^26.1.0",
+        "prettier": "^3.6.0",
+        "tap-min": "^3.0.0"
     },
     "homepage": "https://litecanvas.github.io/about.html",
     "repository": {
@@ -56,8 +57,10 @@
     ],
     "ava": {
         "files": [
-            "tests/**/*",
-            "!tests/_mocks"
+            "tests/**/*.js"
         ]
-    }
+    },
+    "trustedDependencies": [
+        "@swc/core"
+    ]
 }

package/src/index.js

@@ -10,20 +10,20 @@ import { assert } from './dev.js'
  * @returns {LitecanvasInstance}
  */
 export default function litecanvas(settings = {}) {
-    const /** @type {typeof globalThis} */
-        root = globalThis,
+    const /** @type {Window} */
+        root = window,
         math = Math,
         TWO_PI = math.PI * 2,
         raf = requestAnimationFrame,
         /** @type {Function[]} */
         _browserEventListeners = [],
-        /** @type {(elem:HTMLElement, evt:string, callback:(event:Event)=>void)=>void} */
+        /** @type {(elem: EventTarget, evt: string, callback: (event: Event) => void) => void} */
         on = (elem, evt, callback) => {
             elem.addEventListener(evt, callback, false)
             _browserEventListeners.push(() => elem.removeEventListener(evt, callback, false))
         },
-        zzfx = setupZzFX(root),
         isNumber = Number.isFinite,
+        zzfx = setupZzFX(root),
         /** @type {LitecanvasOptions} */
         defaults = {
             width: null,
@@ -649,8 +649,11 @@ export default function litecanvas(settings = {}) {
          * @see https://developer.mozilla.org/en-US/docs/Web/API/OffscreenCanvas
          */
         paint(width, height, drawing, options = {}) {
-            DEV: assert(isNumber(width), 'paint: 1st param must be a number')
-            DEV: assert(isNumber(height), 'paint: 2nd param must be a number')
+            DEV: assert(isNumber(width) && width >= 1, 'paint: 1st param must be a positive number')
+            DEV: assert(
+                isNumber(height) && height >= 1,
+                'paint: 2nd param must be a positive number'
+            )
             DEV: assert(
                 'function' === typeof drawing || Array.isArray(drawing),
                 'paint: 3rd param must be a function or array'
@@ -659,6 +662,10 @@ export default function litecanvas(settings = {}) {
                 (options && !options.scale) || isNumber(options.scale),
                 'paint: 4th param (options.scale) must be a number'
             )
+            DEV: assert(
+                (options && !options.canvas) || options.canvas instanceof OffscreenCanvas,
+                'paint: 4th param (options.canvas) must be an OffscreenCanvas'
+            )
 
             const /** @type {OffscreenCanvas} */
                 canvas = options.canvas || new OffscreenCanvas(1, 1),
@@ -667,19 +674,17 @@ export default function litecanvas(settings = {}) {
 
             canvas.width = width * scale
             canvas.height = height * scale
-            _ctx = canvas.getContext('2d')
 
+            _ctx = canvas.getContext('2d')
             _ctx.scale(scale, scale)
 
             // draw pixel art if `draw` is a array
-            // @ts-ignore
-            if (drawing.push) {
+            if (Array.isArray(drawing)) {
                 let x = 0,
                     y = 0
 
                 _ctx.imageSmoothingEnabled = false
 
-                // @ts-ignore
                 for (const str of drawing) {
                     for (const color of str) {
                         if (' ' !== color && '.' !== color) {
@@ -692,7 +697,6 @@ export default function litecanvas(settings = {}) {
                     x = 0
                 }
             } else {
-                // @ts-ignore
                 drawing(_ctx)
             }
 
@@ -880,6 +884,7 @@ export default function litecanvas(settings = {}) {
             DEV: assert(isNumber(volumeFactor), 'sfx: 3rd param must be a number')
 
             if (
+                // @ts-ignore
                 root.zzfxV <= 0 ||
                 (navigator.userActivation && !navigator.userActivation.hasBeenActive)
             ) {
@@ -909,6 +914,7 @@ export default function litecanvas(settings = {}) {
         volume(value) {
             DEV: assert(isNumber(value), 'volume: 1st param must be a number')
 
+            // @ts-ignore
             root.zzfxV = value
         },
 
@@ -918,9 +924,7 @@ export default function litecanvas(settings = {}) {
          *
          * @returns {HTMLCanvasElement}
          */
-        canvas() {
-            return _canvas
-        },
+        canvas: () => _canvas,
         /**
          * Prepares a plugin to be loaded
          *
@@ -1047,7 +1051,7 @@ export default function litecanvas(settings = {}) {
          * @returns {any}
          */
         stat(n) {
-            DEV: assert(isNumber(n) && n >= 0, 'stat: 1st param must be a positive number')
+            DEV: assert(isNumber(n) && n >= 0, 'stat: 1st param must be a number')
 
             const list = [
                 // 0
@@ -1067,6 +1071,7 @@ export default function litecanvas(settings = {}) {
                 // 7
                 _timeScale,
                 // 8
+                // @ts-ignore
                 root.zzfxV || 1,
                 // 9
                 _rngSeed,
@@ -1090,6 +1095,7 @@ export default function litecanvas(settings = {}) {
         quit() {
             // stop the game loop (update & draw)
             cancelAnimationFrame(_rafid)
+
             _rafid = 0
 
             // emit "quit" event to manual clean ups
@@ -1108,8 +1114,12 @@ export default function litecanvas(settings = {}) {
                 for (const key in instance) {
                     delete root[key]
                 }
+                // @ts-ignore
                 delete root.ENGINE
             }
+
+            // unset that flag
+            _initialized = false
         },
     }
 
@@ -1133,7 +1143,6 @@ export default function litecanvas(settings = {}) {
 
         // listen window resize event when "autoscale" is enabled
         if (settings.autoscale) {
-            // @ts-ignore
             on(root, 'resize', resizeCanvas)
         }
 
@@ -1306,7 +1315,6 @@ export default function litecanvas(settings = {}) {
             on(_canvas, 'touchend', _touchEndHandler)
             on(_canvas, 'touchcancel', _touchEndHandler)
 
-            // @ts-ignore
             on(root, 'blur', () => {
                 _pressingMouse = false
                 for (const [id, tap] of _taps) {
@@ -1333,7 +1341,6 @@ export default function litecanvas(settings = {}) {
                 return !key ? keySet.size > 0 : keySet.has('space' === key ? ' ' : key)
             }
 
-            // @ts-ignore
             on(root, 'keydown', (/** @type {KeyboardEvent} */ event) => {
                 const key = event.key.toLowerCase()
                 if (!_keysDown.has(key)) {
@@ -1342,12 +1349,10 @@ export default function litecanvas(settings = {}) {
                 }
             })
 
-            // @ts-ignore
             on(root, 'keyup', (/** @type {KeyboardEvent} */ event) => {
                 _keysDown.delete(event.key.toLowerCase())
             })
 
-            // @ts-ignore
             on(root, 'blur', () => _keysDown.clear())
             instance.listen('after:update', () => _keysPress.clear())
 
@@ -1448,7 +1453,6 @@ export default function litecanvas(settings = {}) {
 
         DEV: assert(_canvas && _canvas.tagName === 'CANVAS', 'Invalid canvas element')
 
-        instance.def('CANVAS', _canvas)
         _ctx = _canvas.getContext('2d')
 
         on(_canvas, 'click', () => root.focus())
@@ -1483,9 +1487,6 @@ export default function litecanvas(settings = {}) {
         instance.def('W', (_canvas.width = width))
         instance.def('H', (_canvas.height = height))
 
-        instance.def('CX', instance.W / 2)
-        instance.def('CY', instance.H / 2)
-
         if (settings.autoscale) {
             if (!_canvas.style.display) {
                 _canvas.style.display = 'block'
@@ -1525,7 +1526,6 @@ export default function litecanvas(settings = {}) {
      */
     function triggerEvent(eventName, arg1, arg2, arg3, arg4) {
         if (!_events[eventName]) return
-        // @ts-ignore
         for (const callback of _events[eventName]) {
             callback(arg1, arg2, arg3, arg4)
         }
@@ -1550,17 +1550,18 @@ export default function litecanvas(settings = {}) {
     }
 
     if (settings.global) {
+        // @ts-ignore
         if (root.ENGINE) {
             throw new Error('two global litecanvas detected')
         }
         Object.assign(root, instance)
+        // @ts-ignore
         root.ENGINE = instance
     }
 
     setupCanvas()
 
     if ('loading' === document.readyState) {
-        // @ts-ignore
         on(root, 'DOMContentLoaded', () => raf(init))
     } else {
         raf(init)

package/src/zzfx.js

@@ -1,7 +1,7 @@
 // ZzFXMicro - Zuper Zmall Zound Zynth - v1.3.0 by Frank Force | https://github.com/KilledByAPixel/ZzFX
 // prettier-ignore
 /**
- * @param {typeof globalThis} global
+ * @param {Window} global
  * @returns {Function} the `zzfx()` function
  */
 export const setupZzFX = (global) => {

package/types/index.d.ts

@@ -515,7 +515,7 @@ declare global {
      * @param callback the function that is called when the event occurs
      * @returns a function to remove the listener
      */
-    function listen(event: string, callback: Function): Function | null
+    function listen(event: string, callback: Function): Function
     /**
      * Call all listeners attached to a game event
      *

package/types/types.d.ts

@@ -502,7 +502,7 @@ type LitecanvasInstance = {
      * @param callback the function that is called when the event occurs
      * @returns a function to remove the listener
      */
-    listen(event: string, callback: Function): Function | null
+    listen(event: string, callback: Function): Function
     /**
      * Call all listeners attached to a game event
      *
@@ -645,6 +645,6 @@ type LitecanvasGameLoop = {
     tapping?: (tapX: number, tapY: number, tapId: number) => void
 }
 
-type drawCallback = (context: CanvasRenderingContext2D | OffscreenCanvasRenderingContext2D) => void
+type drawCallback = (context: OffscreenCanvasRenderingContext2D) => void
 
 type pluginCallback = (instance: LitecanvasInstance, config?: any) => any