litecanvas 0.206.0 → 0.206.2

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.206.0";
+  var version = "0.206.2";
   function litecanvas(settings = {}) {
     const root = window,
       math = Math,
@@ -146,7 +146,8 @@
         keyboardEvents: true,
       };
     settings = Object.assign(defaults, settings);
-    let _initialized = false,
+    let _loop = settings.loop,
+      _initialized = false,
       _paused,
       _canvas,
       _canvasScale = 1,
@@ -449,102 +450,98 @@
         _ctx[radii ? "roundRect" : "rect"](~~x, ~~y, ~~width, ~~height, radii);
         instance.fill(color);
       },
-      circ(x, y, radius, color) {
+      oval(x, y, radiusX, radiusY, color) {
         DEV: assert(
           isNumber(x),
-          loggerPrefix + "circ() 1st param must be a number",
+          loggerPrefix + "oval() 1st param must be a number",
         );
         DEV: assert(
           isNumber(y),
-          loggerPrefix + "circ() 2nd param must be a number",
+          loggerPrefix + "oval() 2nd param must be a number",
         );
         DEV: assert(
-          isNumber(radius) && radius >= 0,
-          loggerPrefix + "circ() 3rd param must be a positive number or zero",
+          isNumber(radiusX) && radiusX >= 0,
+          loggerPrefix + "oval() 3rd param must be a positive number or zero",
+        );
+        DEV: assert(
+          isNumber(radiusY) && radiusY >= 0,
+          loggerPrefix + "oval() 4th param must be a positive number or zero",
         );
         DEV: assert(
           null == color || (isNumber(color) && color >= 0),
-          loggerPrefix + "circ() 4th param must be a positive number or zero",
+          loggerPrefix + "oval() 5th param must be a positive number or zero",
         );
         beginPath(_ctx);
-        _ctx.arc(~~x, ~~y, ~~radius, 0, TWO_PI);
+        _ctx.ellipse(~~x, ~~y, ~~radiusX, ~~radiusY, 0, 0, TWO_PI);
         instance.stroke(color);
       },
-      circfill(x, y, radius, color) {
+      ovalfill(x, y, radiusX, radiusY, color) {
         DEV: assert(
           isNumber(x),
-          loggerPrefix + "circfill() 1st param must be a number",
+          loggerPrefix + "ovalfill() 1st param must be a number",
         );
         DEV: assert(
           isNumber(y),
-          loggerPrefix + "circfill() 2nd param must be a number",
+          loggerPrefix + "ovalfill() 2nd param must be a number",
         );
         DEV: assert(
-          isNumber(radius) && radius >= 0,
+          isNumber(radiusX) && radiusX >= 0,
           loggerPrefix +
-            "circfill() 3rd param must be a positive number or zero",
+            "ovalfill() 3rd param must be a positive number or zero",
+        );
+        DEV: assert(
+          isNumber(radiusY) && radiusY >= 0,
+          loggerPrefix +
+            "ovalfill() 4th param must be a positive number or zero",
         );
         DEV: assert(
           null == color || (isNumber(color) && color >= 0),
           loggerPrefix +
-            "circfill() 4th param must be a positive number or zero",
+            "ovalfill() 5th param must be a positive number or zero",
         );
         beginPath(_ctx);
-        _ctx.arc(~~x, ~~y, ~~radius, 0, TWO_PI);
+        _ctx.ellipse(~~x, ~~y, ~~radiusX, ~~radiusY, 0, 0, TWO_PI);
         instance.fill(color);
       },
-      oval(x, y, radiusX, radiusY, color) {
+      circ(x, y, radius, color) {
         DEV: assert(
           isNumber(x),
-          loggerPrefix + "oval() 1st param must be a number",
+          loggerPrefix + "circ() 1st param must be a number",
         );
         DEV: assert(
           isNumber(y),
-          loggerPrefix + "oval() 2nd param must be a number",
-        );
-        DEV: assert(
-          isNumber(radiusX) && radiusX >= 0,
-          loggerPrefix + "oval() 3rd param must be a positive number or zero",
+          loggerPrefix + "circ() 2nd param must be a number",
         );
         DEV: assert(
-          isNumber(radiusY) && radiusY >= 0,
-          loggerPrefix + "oval() 4th param must be a positive number or zero",
+          isNumber(radius) && radius >= 0,
+          loggerPrefix + "circ() 3rd param must be a positive number or zero",
         );
         DEV: assert(
           null == color || (isNumber(color) && color >= 0),
-          loggerPrefix + "oval() 5th param must be a positive number or zero",
+          loggerPrefix + "circ() 4th param must be a positive number or zero",
         );
-        beginPath(_ctx);
-        _ctx.ellipse(~~x, ~~y, ~~radiusX, ~~radiusY, 0, 0, TWO_PI);
-        instance.stroke(color);
+        instance.oval(x, y, radius, radius, color);
       },
-      ovalfill(x, y, radiusX, radiusY, color) {
+      circfill(x, y, radius, color) {
         DEV: assert(
           isNumber(x),
-          loggerPrefix + "ovalfill() 1st param must be a number",
+          loggerPrefix + "circfill() 1st param must be a number",
         );
         DEV: assert(
           isNumber(y),
-          loggerPrefix + "ovalfill() 2nd param must be a number",
-        );
-        DEV: assert(
-          isNumber(radiusX) && radiusX >= 0,
-          loggerPrefix +
-            "ovalfill() 3rd param must be a positive number or zero",
+          loggerPrefix + "circfill() 2nd param must be a number",
         );
         DEV: assert(
-          isNumber(radiusY) && radiusY >= 0,
+          isNumber(radius) && radius >= 0,
           loggerPrefix +
-            "ovalfill() 4th param must be a positive number or zero",
+            "circfill() 3rd param must be a positive number or zero",
         );
         DEV: assert(
           null == color || (isNumber(color) && color >= 0),
           loggerPrefix +
-            "ovalfill() 5th param must be a positive number or zero",
+            "circfill() 4th param must be a positive number or zero",
         );
-        beginPath(_ctx);
-        _ctx.ellipse(~~x, ~~y, ~~radiusX, ~~radiusY, 0, 0, TWO_PI);
-        instance.fill(color);
+        instance.ovalfill(x, y, radius, radius, color);
       },
       shape(points) {
         DEV: assert(
@@ -844,17 +841,17 @@
         callback(_ctx);
         _ctx.clip();
       },
-      sfx(zzfxParams, pitchSlide = 0, volumeFactor = 1) {
+      sfx(zzfxParams, pitchSlide, volumeFactor) {
         DEV: assert(
           null == zzfxParams || Array.isArray(zzfxParams),
           loggerPrefix + "sfx() 1st param must be an array",
         );
         DEV: assert(
-          isNumber(pitchSlide),
+          null == pitchSlide || isNumber(pitchSlide),
           loggerPrefix + "sfx() 2nd param must be a number",
         );
         DEV: assert(
-          isNumber(volumeFactor),
+          null == volumeFactor || isNumber(volumeFactor),
           loggerPrefix + "sfx() 3rd param must be a number",
         );
         if (
@@ -863,10 +860,10 @@
         ) {
           return false;
         }
-        zzfxParams = zzfxParams || _defaultSound;
-        if (pitchSlide !== 0 || volumeFactor !== 1) {
+        zzfxParams ||= _defaultSound;
+        if (pitchSlide || volumeFactor) {
           zzfxParams = zzfxParams.slice();
-          zzfxParams[0] = volumeFactor * (zzfxParams[0] || 1);
+          zzfxParams[0] = (volumeFactor || 1) * (zzfxParams[0] || 1);
           zzfxParams[10] = ~~zzfxParams[10] + pitchSlide;
         }
         zzfx.apply(0, zzfxParams);
@@ -928,7 +925,7 @@
           eventName = lowerCase(eventName);
           triggerEvent("before:" + eventName, arg1, arg2, arg3, arg4);
           if (
-            !settings.loop &&
+            !_loop &&
             root[eventName] !== instance[eventName] &&
             "function" === typeof root[eventName]
           ) {
@@ -1347,10 +1344,9 @@
     DEV: console.info(loggerPrefix + `version ${version} started`);
     DEV: console.debug(loggerPrefix + `litecanvas() options =`, settings);
     setupCanvas();
-    if (settings.loop) {
-      for (const eventName in settings.loop) {
-        if (settings.loop[eventName])
-          instance.listen(eventName, settings.loop[eventName]);
+    if (_loop) {
+      for (const eventName in _loop) {
+        if (_loop[eventName]) instance.listen(eventName, _loop[eventName]);
       }
     }
     raf(init);

package/dist/dist.js

@@ -142,7 +142,8 @@
         keyboardEvents: true,
       };
     settings = Object.assign(defaults, settings);
-    let _initialized = false,
+    let _loop = settings.loop,
+      _initialized = false,
       _paused,
       _canvas,
       _canvasScale = 1,
@@ -241,16 +242,6 @@
         _ctx[radii ? "roundRect" : "rect"](~~x, ~~y, ~~width, ~~height, radii);
         instance.fill(color);
       },
-      circ(x, y, radius, color) {
-        beginPath(_ctx);
-        _ctx.arc(~~x, ~~y, ~~radius, 0, TWO_PI);
-        instance.stroke(color);
-      },
-      circfill(x, y, radius, color) {
-        beginPath(_ctx);
-        _ctx.arc(~~x, ~~y, ~~radius, 0, TWO_PI);
-        instance.fill(color);
-      },
       oval(x, y, radiusX, radiusY, color) {
         beginPath(_ctx);
         _ctx.ellipse(~~x, ~~y, ~~radiusX, ~~radiusY, 0, 0, TWO_PI);
@@ -261,6 +252,12 @@
         _ctx.ellipse(~~x, ~~y, ~~radiusX, ~~radiusY, 0, 0, TWO_PI);
         instance.fill(color);
       },
+      circ(x, y, radius, color) {
+        instance.oval(x, y, radius, radius, color);
+      },
+      circfill(x, y, radius, color) {
+        instance.ovalfill(x, y, radius, radius, color);
+      },
       shape(points) {
         beginPath(_ctx);
         for (let i = 0; i < points.length; i += 2) {
@@ -383,17 +380,17 @@
         callback(_ctx);
         _ctx.clip();
       },
-      sfx(zzfxParams, pitchSlide = 0, volumeFactor = 1) {
+      sfx(zzfxParams, pitchSlide, volumeFactor) {
         if (
           !root.zzfxV ||
           (navigator.userActivation && !navigator.userActivation.hasBeenActive)
         ) {
           return false;
         }
-        zzfxParams = zzfxParams || _defaultSound;
-        if (pitchSlide !== 0 || volumeFactor !== 1) {
+        zzfxParams ||= _defaultSound;
+        if (pitchSlide || volumeFactor) {
           zzfxParams = zzfxParams.slice();
-          zzfxParams[0] = volumeFactor * (zzfxParams[0] || 1);
+          zzfxParams[0] = (volumeFactor || 1) * (zzfxParams[0] || 1);
           zzfxParams[10] = ~~zzfxParams[10] + pitchSlide;
         }
         zzfx.apply(0, zzfxParams);
@@ -422,7 +419,7 @@
           eventName = lowerCase(eventName);
           triggerEvent("before:" + eventName, arg1, arg2, arg3, arg4);
           if (
-            !settings.loop &&
+            !_loop &&
             root[eventName] !== instance[eventName] &&
             "function" === typeof root[eventName]
           ) {
@@ -744,10 +741,9 @@
       root.ENGINE = instance;
     }
     setupCanvas();
-    if (settings.loop) {
-      for (const eventName in settings.loop) {
-        if (settings.loop[eventName])
-          instance.listen(eventName, settings.loop[eventName]);
+    if (_loop) {
+      for (const eventName in _loop) {
+        if (_loop[eventName]) instance.listen(eventName, _loop[eventName]);
       }
     }
     raf(init);

package/dist/dist.min.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "litecanvas",
-    "version": "0.206.0",
+    "version": "0.206.2",
     "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>",
@@ -34,9 +34,9 @@
     "devDependencies": {
         "@happy-dom/global-registrator": "^20.9.0",
         "@size-limit/preset-small-lib": "^12.1.0",
-        "@swc/core": "^1.15.32",
+        "@swc/core": "^1.15.33",
         "ava": "^7.0.0",
-        "esbuild": "^0.27.7",
+        "esbuild": "^0.28.0",
         "genversion": "^3.2.0",
         "gzip-size": "^7.0.0",
         "prettier": "^3.8.3",

package/src/index.js

@@ -11,8 +11,7 @@ import { version } from './version.js'
  * @returns {LitecanvasInstance}
  */
 export default function litecanvas(settings = {}) {
-    const /** @type {Window} */
-        root = window,
+    const root = window,
         math = Math,
         perf = performance,
         TWO_PI = math.PI * 2,
@@ -48,7 +47,8 @@ export default function litecanvas(settings = {}) {
     // setup the settings default values
     settings = Object.assign(defaults, settings)
 
-    let /** @type {boolean} */
+    let _loop = settings.loop,
+        /** @type {boolean} */
         _initialized = false,
         /** @type {boolean} */
         _paused,
@@ -459,56 +459,6 @@ export default function litecanvas(settings = {}) {
             instance.fill(color)
         },
 
-        /**
-         * Draw a circle outline
-         *
-         * @param {number} x
-         * @param {number} y
-         * @param {number} radius
-         * @param {number} [color=0] the color index
-         */
-        circ(x, y, radius, color) {
-            DEV: assert(isNumber(x), loggerPrefix + 'circ() 1st param must be a number')
-            DEV: assert(isNumber(y), loggerPrefix + 'circ() 2nd param must be a number')
-            DEV: assert(
-                isNumber(radius) && radius >= 0,
-                loggerPrefix + 'circ() 3rd param must be a positive number or zero'
-            )
-            DEV: assert(
-                null == color || (isNumber(color) && color >= 0),
-                loggerPrefix + 'circ() 4th param must be a positive number or zero'
-            )
-
-            beginPath(_ctx)
-            _ctx.arc(~~x, ~~y, ~~radius, 0, TWO_PI)
-            instance.stroke(color)
-        },
-
-        /**
-         * Draw a color-filled circle
-         *
-         * @param {number} x
-         * @param {number} y
-         * @param {number} radius
-         * @param {number} [color=0] the color index
-         */
-        circfill(x, y, radius, color) {
-            DEV: assert(isNumber(x), loggerPrefix + 'circfill() 1st param must be a number')
-            DEV: assert(isNumber(y), loggerPrefix + 'circfill() 2nd param must be a number')
-            DEV: assert(
-                isNumber(radius) && radius >= 0,
-                loggerPrefix + 'circfill() 3rd param must be a positive number or zero'
-            )
-            DEV: assert(
-                null == color || (isNumber(color) && color >= 0),
-                loggerPrefix + 'circfill() 4th param must be a positive number or zero'
-            )
-
-            beginPath(_ctx)
-            _ctx.arc(~~x, ~~y, ~~radius, 0, TWO_PI)
-            instance.fill(color)
-        },
-
         /**
          * Draw a ellipse outline
          *
@@ -569,6 +519,52 @@ export default function litecanvas(settings = {}) {
             instance.fill(color)
         },
 
+        /**
+         * Draw a circle outline
+         *
+         * @param {number} x
+         * @param {number} y
+         * @param {number} radius
+         * @param {number} [color=0] the color index
+         */
+        circ(x, y, radius, color) {
+            DEV: assert(isNumber(x), loggerPrefix + 'circ() 1st param must be a number')
+            DEV: assert(isNumber(y), loggerPrefix + 'circ() 2nd param must be a number')
+            DEV: assert(
+                isNumber(radius) && radius >= 0,
+                loggerPrefix + 'circ() 3rd param must be a positive number or zero'
+            )
+            DEV: assert(
+                null == color || (isNumber(color) && color >= 0),
+                loggerPrefix + 'circ() 4th param must be a positive number or zero'
+            )
+
+            instance.oval(x, y, radius, radius, color)
+        },
+
+        /**
+         * Draw a color-filled circle
+         *
+         * @param {number} x
+         * @param {number} y
+         * @param {number} radius
+         * @param {number} [color=0] the color index
+         */
+        circfill(x, y, radius, color) {
+            DEV: assert(isNumber(x), loggerPrefix + 'circfill() 1st param must be a number')
+            DEV: assert(isNumber(y), loggerPrefix + 'circfill() 2nd param must be a number')
+            DEV: assert(
+                isNumber(radius) && radius >= 0,
+                loggerPrefix + 'circfill() 3rd param must be a positive number or zero'
+            )
+            DEV: assert(
+                null == color || (isNumber(color) && color >= 0),
+                loggerPrefix + 'circfill() 4th param must be a positive number or zero'
+            )
+
+            instance.ovalfill(x, y, radius, radius, color)
+        },
+
         /**
          * Make a custom shape in the canvas context.
          * Then, just use `fill` or `stroke` to draw the shape.
@@ -1005,13 +1001,19 @@ export default function litecanvas(settings = {}) {
          *
          * @see https://github.com/KilledByAPixel/ZzFX
          */
-        sfx(zzfxParams, pitchSlide = 0, volumeFactor = 1) {
+        sfx(zzfxParams, pitchSlide, volumeFactor) {
             DEV: assert(
                 null == zzfxParams || Array.isArray(zzfxParams),
                 loggerPrefix + 'sfx() 1st param must be an array'
             )
-            DEV: assert(isNumber(pitchSlide), loggerPrefix + 'sfx() 2nd param must be a number')
-            DEV: assert(isNumber(volumeFactor), loggerPrefix + 'sfx() 3rd param must be a number')
+            DEV: assert(
+                null == pitchSlide || isNumber(pitchSlide),
+                loggerPrefix + 'sfx() 2nd param must be a number'
+            )
+            DEV: assert(
+                null == volumeFactor || isNumber(volumeFactor),
+                loggerPrefix + 'sfx() 3rd param must be a number'
+            )
 
             if (
                 !root.zzfxV ||
@@ -1020,12 +1022,12 @@ export default function litecanvas(settings = {}) {
                 return false
             }
 
-            zzfxParams = zzfxParams || _defaultSound
+            zzfxParams ||= _defaultSound
 
             // if has other arguments, copy the sound to not change the original
-            if (pitchSlide !== 0 || volumeFactor !== 1) {
+            if (pitchSlide || volumeFactor) {
                 zzfxParams = zzfxParams.slice()
-                zzfxParams[0] = volumeFactor * (zzfxParams[0] || 1)
+                zzfxParams[0] = (volumeFactor || 1) * (zzfxParams[0] || 1)
                 zzfxParams[10] = ~~zzfxParams[10] + pitchSlide
             }
 
@@ -1150,7 +1152,7 @@ export default function litecanvas(settings = {}) {
                 // calls a global function with the same name as the event,
                 // as long as it's not a global litecanvas function (to avoid infinite loops)
                 if (
-                    !settings.loop &&
+                    !_loop &&
                     root[eventName] !== instance[eventName] &&
                     'function' === typeof root[eventName] /* if is a function */
                 ) {
@@ -1865,9 +1867,9 @@ export default function litecanvas(settings = {}) {
     setupCanvas()
 
     // setup default event listeners
-    if (settings.loop) {
-        for (const eventName in settings.loop) {
-            if (settings.loop[eventName]) instance.listen(eventName, settings.loop[eventName])
+    if (_loop) {
+        for (const eventName in _loop) {
+            if (_loop[eventName]) instance.listen(eventName, _loop[eventName])
         }
     }
 

package/src/version.js

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