litecanvas 0.73.2 → 0.73.3

package/dist/dist.dev.js

@@ -69,7 +69,7 @@
       animate: true
     };
     settings = Object.assign(defaults, settings);
-    let _initialized = false, _plugins = [], _canvas = settings.canvas || document.createElement("canvas"), _fullscreen = settings.fullscreen, _autoscale = settings.autoscale, _animated = settings.animate, _scale = 1, _ctx, _outline_fix = 0.5, _timeScale = 1, _lastFrame, _step, _stepMs, _accumulated = 0, _focused = true, _fontFamily = "sans-serif", _fontSize = 32, _rng_seed = Date.now(), _global = settings.global, _events = {
+    let _initialized = false, _plugins = [], _canvas = settings.canvas || document.createElement("canvas"), _fullscreen = settings.fullscreen, _autoscale = settings.autoscale, _animated = settings.animate, _scale = 1, _ctx, _outline_fix = 0.5, _timeScale = 1, _lastFrameTime, _step, _stepMs, _accumulated = 0, _focused = true, _fontFamily = "sans-serif", _fontSize = 32, _rng_seed = Date.now(), _global = settings.global, _events = {
       init: null,
       update: null,
       draw: null,
@@ -591,14 +591,14 @@
        *
        * @param {number} x
        * @param {number} y
-       * @param {OffscreenCanvas|HTMLImageElement|HTMLCanvasElement} image
+       * @param {OffscreenCanvas|HTMLImageElement|HTMLCanvasElement} source
        */
-      image(x, y, image) {
+      image(x, y, source) {
         if (true) {
           assert(isFinite(x), "image: 1st param must be a number");
           assert(isFinite(y), "image: 2nd param must be a number");
         }
-        _ctx.drawImage(image, ~~x, ~~y);
+        _ctx.drawImage(source, ~~x, ~~y);
       },
       /**
        * Creates a offscreen canvas to draw on it
@@ -1222,13 +1222,13 @@
       }
       instance.setfps(settings.fps);
       instance.emit("init", instance);
-      _lastFrame = performance.now();
+      _lastFrameTime = performance.now();
       raf(drawFrame);
     }
     function drawFrame(now) {
-      let shouldRender = !_animated, delta = now - _lastFrame;
-      _accumulated += delta > 100 ? _stepMs : delta;
-      _lastFrame = now;
+      let shouldRender = !_animated, delta = now - _lastFrameTime;
+      _accumulated += delta > 100 ? 100 : delta;
+      _lastFrameTime = now;
       while (_accumulated >= _stepMs) {
         instance.emit("update", _step * _timeScale);
         instance.setvar("ELAPSED", instance.ELAPSED + _step * _timeScale);

package/dist/dist.js

@@ -64,7 +64,7 @@
       animate: true
     };
     settings = Object.assign(defaults, settings);
-    let _initialized = false, _plugins = [], _canvas = settings.canvas || document.createElement("canvas"), _fullscreen = settings.fullscreen, _autoscale = settings.autoscale, _animated = settings.animate, _scale = 1, _ctx, _outline_fix = 0.5, _timeScale = 1, _lastFrame, _step, _stepMs, _accumulated = 0, _focused = true, _fontFamily = "sans-serif", _fontSize = 32, _rng_seed = Date.now(), _global = settings.global, _events = {
+    let _initialized = false, _plugins = [], _canvas = settings.canvas || document.createElement("canvas"), _fullscreen = settings.fullscreen, _autoscale = settings.autoscale, _animated = settings.animate, _scale = 1, _ctx, _outline_fix = 0.5, _timeScale = 1, _lastFrameTime, _step, _stepMs, _accumulated = 0, _focused = true, _fontFamily = "sans-serif", _fontSize = 32, _rng_seed = Date.now(), _global = settings.global, _events = {
       init: null,
       update: null,
       draw: null,
@@ -586,14 +586,14 @@
        *
        * @param {number} x
        * @param {number} y
-       * @param {OffscreenCanvas|HTMLImageElement|HTMLCanvasElement} image
+       * @param {OffscreenCanvas|HTMLImageElement|HTMLCanvasElement} source
        */
-      image(x, y, image) {
+      image(x, y, source) {
         if (false) {
           assert(isFinite(x), "image: 1st param must be a number");
           assert(isFinite(y), "image: 2nd param must be a number");
         }
-        _ctx.drawImage(image, ~~x, ~~y);
+        _ctx.drawImage(source, ~~x, ~~y);
       },
       /**
        * Creates a offscreen canvas to draw on it
@@ -1217,13 +1217,13 @@
       }
       instance.setfps(settings.fps);
       instance.emit("init", instance);
-      _lastFrame = performance.now();
+      _lastFrameTime = performance.now();
       raf(drawFrame);
     }
     function drawFrame(now) {
-      let shouldRender = !_animated, delta = now - _lastFrame;
-      _accumulated += delta > 100 ? _stepMs : delta;
-      _lastFrame = now;
+      let shouldRender = !_animated, delta = now - _lastFrameTime;
+      _accumulated += delta > 100 ? 100 : delta;
+      _lastFrameTime = now;
       while (_accumulated >= _stepMs) {
         instance.emit("update", _step * _timeScale);
         instance.setvar("ELAPSED", instance.ELAPSED + _step * _timeScale);

package/dist/dist.min.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "litecanvas",
-    "version": "0.73.2",
+    "version": "0.73.3",
     "description": "Lightweight HTML5 canvas engine suitable for small games and animations.",
     "license": "MIT",
     "author": "Luiz Bills <luizbills@pm.me>",

package/src/index.js

@@ -66,7 +66,7 @@ export default function litecanvas(settings = {}) {
         /** @type {number} */
         _timeScale = 1,
         /** @type {number} */
-        _lastFrame,
+        _lastFrameTime,
         /** @type {number} */
         _step,
         /** @type {number} */
@@ -666,14 +666,14 @@ export default function litecanvas(settings = {}) {
          *
          * @param {number} x
          * @param {number} y
-         * @param {OffscreenCanvas|HTMLImageElement|HTMLCanvasElement} image
+         * @param {OffscreenCanvas|HTMLImageElement|HTMLCanvasElement} source
          */
-        image(x, y, image) {
+        image(x, y, source) {
             if (DEV_BUILD) {
                 assert(isFinite(x), 'image: 1st param must be a number')
                 assert(isFinite(y), 'image: 2nd param must be a number')
             }
-            _ctx.drawImage(image, ~~x, ~~y)
+            _ctx.drawImage(source, ~~x, ~~y)
         },
 
         /**
@@ -1408,7 +1408,7 @@ export default function litecanvas(settings = {}) {
         // start the game loop
         instance.emit('init', instance)
 
-        _lastFrame = performance.now()
+        _lastFrameTime = performance.now()
         raf(drawFrame)
     }
 
@@ -1417,10 +1417,10 @@ export default function litecanvas(settings = {}) {
      */
     function drawFrame(now) {
         let shouldRender = !_animated,
-            delta = now - _lastFrame
+            delta = now - _lastFrameTime
 
-        _accumulated += delta > 100 ? _stepMs : delta
-        _lastFrame = now
+        _accumulated += delta > 100 ? 100 : delta
+        _lastFrameTime = now
 
         while (_accumulated >= _stepMs) {
             instance.emit('update', _step * _timeScale)

package/src/types.js

@@ -37,7 +37,7 @@
 
 /**
  * @callback drawCallback
- * @param {CanvasRenderingContext2D} context
+ * @param {CanvasRenderingContext2D|OffscreenCanvasRenderingContext2D} context
  * @returns {void}
  */
 
@@ -45,12 +45,13 @@
  * @typedef LitecanvasPluginHelpers
  * @type {object}
  * @property {string[]} colors The instance color palette
- * @property {LitecanvasOptions} settings An copy of this instance settings
+ * @property {LitecanvasOptions} settings Litecanvas instance settings (read-only)
  */
 
 /**
  * @callback pluginCallback
  * @param {LitecanvasInstance} instance The litecanvas instance
  * @param {LitecanvasPluginHelpers} helpers
+ * @param {any?} [config] - option plugin configuration
  * @returns
  */

package/types/index.d.ts

@@ -318,16 +318,16 @@ declare global {
      *
      * @param x
      * @param y
-     * @param text the text message
+     * @param message the text message
      * @param [color=3] the color index
-     * @param [style="normal"] can be "normal" (default), "italic" and/or "bold"
+     * @param [fontStyle="normal"] can be "normal" (default), "italic" and/or "bold"
      */
     function text(
         x: number,
         y: number,
-        text: string,
+        message: string,
         color?: number,
-        style?: string
+        fontStyle?: string
     ): void
     /**
      * Set the font family
@@ -357,26 +357,26 @@ declare global {
      *
      * @param x
      * @param y
-     * @param image
+     * @param source
      */
     function image(
         x: number,
         y: number,
-        image: OffscreenCanvas | HTMLImageElement | HTMLCanvasElement
+        source: OffscreenCanvas | HTMLImageElement | HTMLCanvasElement
     ): void
     /**
      * Creates a offscreen canvas to draw on it
      *
      * @param width
      * @param height
-     * @param draw
+     * @param drawing
      * @param [options]
      * @see https://developer.mozilla.org/en-US/docs/Web/API/OffscreenCanvas
      */
     function paint(
         width: number,
         height: number,
-        draw: string[] | drawCallback,
+        drawing: string[] | drawCallback,
         options?: {
             scale?: number
             canvas?: HTMLCanvasElement | OffscreenCanvas
@@ -425,10 +425,10 @@ declare global {
     /**
      * Sets the alpha (transparency) value to apply when drawing new shapes and images
      *
-     * @param alpha float from 0 to 1 (e.g: 0.5 = 50% transparent)
+     * @param value float from 0 to 1 (e.g: 0.5 = 50% transparent)
      * @see https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/globalAlpha
      */
-    function alpha(alpha: number): void
+    function alpha(value: number): void
     /**
      * Returns a newly instantiated Path2D object, optionally with another
      * path as an argument (creates a copy), or optionally with a string

package/types/types.d.ts

@@ -296,16 +296,16 @@ type LitecanvasInstance = {
      *
      * @param x
      * @param y
-     * @param text the text message
+     * @param message the text message
      * @param [color=3] the color index
-     * @param [style="normal"] can be "normal" (default), "italic" and/or "bold"
+     * @param [fontStyle="normal"] can be "normal" (default), "italic" and/or "bold"
      */
     text(
         x: number,
         y: number,
-        text: string,
+        message: string,
         color?: number,
-        style?: string
+        fontStyle?: string
     ): void
     /**
      * Set the font family
@@ -335,26 +335,26 @@ type LitecanvasInstance = {
      *
      * @param x
      * @param y
-     * @param image
+     * @param source
      */
     image(
         x: number,
         y: number,
-        image: OffscreenCanvas | HTMLImageElement | HTMLCanvasElement
+        source: OffscreenCanvas | HTMLImageElement | HTMLCanvasElement
     ): void
     /**
      * Creates a offscreen canvas to draw on it
      *
      * @param width
      * @param height
-     * @param draw
+     * @param drawing
      * @param [options]
      * @see https://developer.mozilla.org/en-US/docs/Web/API/OffscreenCanvas
      */
     paint(
         width: number,
         height: number,
-        draw: string[] | drawCallback,
+        drawing: string[] | drawCallback,
         options?: {
             scale?: number
             canvas?: HTMLCanvasElement | OffscreenCanvas
@@ -403,10 +403,10 @@ type LitecanvasInstance = {
     /**
      * Sets the alpha (transparency) value to apply when drawing new shapes and images
      *
-     * @param alpha float from 0 to 1 (e.g: 0.5 = 50% transparent)
+     * @param value float from 0 to 1 (e.g: 0.5 = 50% transparent)
      * @see https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/globalAlpha
      */
-    alpha(alpha: number): void
+    alpha(value: number): void
     /**
      * Returns a newly instantiated Path2D object, optionally with another
      * path as an argument (creates a copy), or optionally with a string
@@ -668,7 +668,9 @@ type LitecanvasGameLoop = {
     tapping?: (tapX: number, tapY: number, tapId: number) => void
 }
 
-type drawCallback = (context: CanvasRenderingContext2D) => void
+type drawCallback = (
+    context: CanvasRenderingContext2D | OffscreenCanvasRenderingContext2D
+) => void
 
 type LitecanvasPluginHelpers = {
     /**
@@ -676,12 +678,13 @@ type LitecanvasPluginHelpers = {
      */
     colors: string[]
     /**
-     * An instance settings/options (read-only)
+     * Litecanvas instance settings (read-only)
      */
     settings: LitecanvasOptions
 }
 
 type pluginCallback = (
     instance: LitecanvasInstance,
-    helpers: LitecanvasPluginHelpers
+    helpers: LitecanvasPluginHelpers,
+    config?: any
 ) => any