litecanvas 0.74.0 → 0.74.2

package/dist/dist.dev.js

@@ -68,7 +68,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, _lastFrameTime, _fixedDeltaTime, _accumulated, _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, _deltaTime, _accumulated = 0, _rafid, _fontFamily = "sans-serif", _fontSize = 32, _rng_seed = Date.now(), _global = settings.global, _events = {
       init: null,
       update: null,
       draw: null,
@@ -312,7 +312,7 @@
       },
       /** BASIC GRAPHICS API */
       /**
-       * Clear the game screen
+       * Clear the game screen with an optional color
        *
        * @param {number?} color The background color (index) or null (for transparent)
        */
@@ -320,14 +320,19 @@
         if (true) {
           assert(
             null == color || isFinite(color) && color >= 0,
-            "cls: 1st param must be a number"
+            "cls: 1st param must be a positive number or zero or null"
           );
         }
-        let width = _ctx.canvas.width, height = _ctx.canvas.height;
         if (null == color) {
-          _ctx.clearRect(0, 0, width, height);
+          _ctx.clearRect(0, 0, _ctx.canvas.width, _ctx.canvas.height);
         } else {
-          instance.rectfill(0, 0, width, height, color);
+          instance.rectfill(
+            0,
+            0,
+            _ctx.canvas.width,
+            _ctx.canvas.height,
+            color
+          );
         }
       },
       /**
@@ -593,11 +598,20 @@
       textalign(align, baseline) {
         if (true) {
           assert(
-            null == align || "string" === typeof align,
+            null == align || ["left", "right", "center", "start", "end"].includes(
+              align
+            ),
             "textalign: 1st param must be a string"
           );
           assert(
-            null == baseline || "string" === typeof baseline,
+            null == baseline || [
+              "top",
+              "bottom",
+              "middle",
+              "hanging",
+              "alphabetic",
+              "ideographic"
+            ].includes(baseline),
             "textalign: 2nd param must be a string"
           );
         }
@@ -672,8 +686,8 @@
       /**
        * Get or set the canvas context 2D
        *
-       * @param {CanvasRenderingContext2D} [context]
-       * @returns {CanvasRenderingContext2D}
+       * @param {CanvasRenderingContext2D|OffscreenCanvasRenderingContext2D} [context]
+       * @returns {CanvasRenderingContext2D|OffscreenCanvasRenderingContext2D}
        * @see https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D
        */
       ctx(context) {
@@ -857,7 +871,7 @@
           return false;
         }
         zzfxParams = zzfxParams || instance.DEFAULT_SFX;
-        if (pitchSlide > 0 || volumeFactor !== 1) {
+        if (pitchSlide !== 0 || volumeFactor !== 1) {
           zzfxParams = zzfxParams.slice();
           zzfxParams[0] = volumeFactor * (zzfxParams[0] || 1);
           zzfxParams[10] = ~~zzfxParams[10] + pitchSlide;
@@ -924,7 +938,7 @@
           assert(isFinite(y2), "colcirc: 5th param must be a number");
           assert(isFinite(r2), "colcirc: 6th param must be a number");
         }
-        return (x2 - x1) ** 2 + (y2 - y1) ** 2 <= (r1 + r2) ** 2;
+        return (x2 - x1) * (x2 - x1) + (y2 - y1) * (y2 - y1) <= (r1 + r2) * (r1 + r2);
       },
       /** PLUGINS API */
       /**
@@ -1015,7 +1029,6 @@
             "setvar: 1st param must be a string"
           );
           if (value == null) {
-            console.warn(`setvar: key "${key}" was defined as ${value}`);
           }
         }
         instance[key] = value;
@@ -1063,8 +1076,7 @@
             "setfps: 1st param must be a positive number"
           );
         }
-        _fixedDeltaTime = 1 / ~~value;
-        _accumulated = 0;
+        _deltaTime = 1 / ~~value;
       },
       /**
        * Stops the litecanvas instance and remove all event listeners.
@@ -1074,7 +1086,8 @@
         for (const removeListener of _browserEventListeners) {
           removeListener();
         }
-        _focused = _events = false;
+        cancelAnimationFrame(_rafid);
+        _events = false;
         if (_global) {
           for (const key in instance) {
             delete root[key];
@@ -1231,38 +1244,42 @@
       }
       if (settings.pauseOnBlur) {
         on(root, "blur", () => {
-          _focused = false;
+          _rafid = cancelAnimationFrame(_rafid);
         });
         on(root, "focus", () => {
-          _focused = true;
-          raf(drawFrame);
+          if (!_rafid) {
+            _lastFrameTime = performance.now();
+            _rafid = raf(drawFrame);
+          }
         });
       }
       instance.setfps(60);
       instance.emit("init", instance);
       _lastFrameTime = performance.now();
-      raf(drawFrame);
+      _rafid = raf(drawFrame);
     }
     function drawFrame(now) {
-      let shouldRender = !_animated, frameTime = (now - _lastFrameTime) / 1e3, frameTimeMax = _fixedDeltaTime * 5;
-      _accumulated += frameTime > frameTimeMax ? frameTimeMax : frameTime;
+      if (_animated) {
+        _rafid = raf(drawFrame);
+      }
+      let updated = 0, frameTime = (now - _lastFrameTime) / 1e3;
+      _accumulated += frameTime;
       _lastFrameTime = now;
-      while (_accumulated >= _fixedDeltaTime) {
-        instance.emit("update", _fixedDeltaTime * _timeScale);
+      if (!_animated) {
+        _accumulated = _deltaTime;
+      }
+      for (; _accumulated >= _deltaTime; _accumulated -= _deltaTime) {
+        instance.emit("update", _deltaTime * _timeScale);
         instance.setvar(
           "ELAPSED",
-          instance.ELAPSED + _fixedDeltaTime * _timeScale
+          instance.ELAPSED + _deltaTime * _timeScale
         );
-        _accumulated -= _fixedDeltaTime;
-        shouldRender = true;
+        updated++;
       }
-      if (shouldRender) {
+      if (updated) {
         instance.textalign("start", "top");
         instance.emit("draw");
       }
-      if (_focused && _animated) {
-        raf(drawFrame);
-      }
     }
     function setupCanvas() {
       _canvas = "string" === typeof _canvas ? document.querySelector(_canvas) : _canvas;

package/dist/dist.js

@@ -63,7 +63,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, _lastFrameTime, _fixedDeltaTime, _accumulated, _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, _deltaTime, _accumulated = 0, _rafid, _fontFamily = "sans-serif", _fontSize = 32, _rng_seed = Date.now(), _global = settings.global, _events = {
       init: null,
       update: null,
       draw: null,
@@ -307,7 +307,7 @@
       },
       /** BASIC GRAPHICS API */
       /**
-       * Clear the game screen
+       * Clear the game screen with an optional color
        *
        * @param {number?} color The background color (index) or null (for transparent)
        */
@@ -315,14 +315,19 @@
         if (false) {
           assert(
             null == color || isFinite(color) && color >= 0,
-            "cls: 1st param must be a number"
+            "cls: 1st param must be a positive number or zero or null"
           );
         }
-        let width = _ctx.canvas.width, height = _ctx.canvas.height;
         if (null == color) {
-          _ctx.clearRect(0, 0, width, height);
+          _ctx.clearRect(0, 0, _ctx.canvas.width, _ctx.canvas.height);
         } else {
-          instance.rectfill(0, 0, width, height, color);
+          instance.rectfill(
+            0,
+            0,
+            _ctx.canvas.width,
+            _ctx.canvas.height,
+            color
+          );
         }
       },
       /**
@@ -588,11 +593,20 @@
       textalign(align, baseline) {
         if (false) {
           assert(
-            null == align || "string" === typeof align,
+            null == align || ["left", "right", "center", "start", "end"].includes(
+              align
+            ),
             "textalign: 1st param must be a string"
           );
           assert(
-            null == baseline || "string" === typeof baseline,
+            null == baseline || [
+              "top",
+              "bottom",
+              "middle",
+              "hanging",
+              "alphabetic",
+              "ideographic"
+            ].includes(baseline),
             "textalign: 2nd param must be a string"
           );
         }
@@ -667,8 +681,8 @@
       /**
        * Get or set the canvas context 2D
        *
-       * @param {CanvasRenderingContext2D} [context]
-       * @returns {CanvasRenderingContext2D}
+       * @param {CanvasRenderingContext2D|OffscreenCanvasRenderingContext2D} [context]
+       * @returns {CanvasRenderingContext2D|OffscreenCanvasRenderingContext2D}
        * @see https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D
        */
       ctx(context) {
@@ -852,7 +866,7 @@
           return false;
         }
         zzfxParams = zzfxParams || instance.DEFAULT_SFX;
-        if (pitchSlide > 0 || volumeFactor !== 1) {
+        if (pitchSlide !== 0 || volumeFactor !== 1) {
           zzfxParams = zzfxParams.slice();
           zzfxParams[0] = volumeFactor * (zzfxParams[0] || 1);
           zzfxParams[10] = ~~zzfxParams[10] + pitchSlide;
@@ -919,7 +933,7 @@
           assert(isFinite(y2), "colcirc: 5th param must be a number");
           assert(isFinite(r2), "colcirc: 6th param must be a number");
         }
-        return (x2 - x1) ** 2 + (y2 - y1) ** 2 <= (r1 + r2) ** 2;
+        return (x2 - x1) * (x2 - x1) + (y2 - y1) * (y2 - y1) <= (r1 + r2) * (r1 + r2);
       },
       /** PLUGINS API */
       /**
@@ -1010,7 +1024,6 @@
             "setvar: 1st param must be a string"
           );
           if (value == null) {
-            console.warn(`setvar: key "${key}" was defined as ${value}`);
           }
         }
         instance[key] = value;
@@ -1058,8 +1071,7 @@
             "setfps: 1st param must be a positive number"
           );
         }
-        _fixedDeltaTime = 1 / ~~value;
-        _accumulated = 0;
+        _deltaTime = 1 / ~~value;
       },
       /**
        * Stops the litecanvas instance and remove all event listeners.
@@ -1069,7 +1081,8 @@
         for (const removeListener of _browserEventListeners) {
           removeListener();
         }
-        _focused = _events = false;
+        cancelAnimationFrame(_rafid);
+        _events = false;
         if (_global) {
           for (const key in instance) {
             delete root[key];
@@ -1226,38 +1239,42 @@
       }
       if (settings.pauseOnBlur) {
         on(root, "blur", () => {
-          _focused = false;
+          _rafid = cancelAnimationFrame(_rafid);
         });
         on(root, "focus", () => {
-          _focused = true;
-          raf(drawFrame);
+          if (!_rafid) {
+            _lastFrameTime = performance.now();
+            _rafid = raf(drawFrame);
+          }
         });
       }
       instance.setfps(60);
       instance.emit("init", instance);
       _lastFrameTime = performance.now();
-      raf(drawFrame);
+      _rafid = raf(drawFrame);
     }
     function drawFrame(now) {
-      let shouldRender = !_animated, frameTime = (now - _lastFrameTime) / 1e3, frameTimeMax = _fixedDeltaTime * 5;
-      _accumulated += frameTime > frameTimeMax ? frameTimeMax : frameTime;
+      if (_animated) {
+        _rafid = raf(drawFrame);
+      }
+      let updated = 0, frameTime = (now - _lastFrameTime) / 1e3;
+      _accumulated += frameTime;
       _lastFrameTime = now;
-      while (_accumulated >= _fixedDeltaTime) {
-        instance.emit("update", _fixedDeltaTime * _timeScale);
+      if (!_animated) {
+        _accumulated = _deltaTime;
+      }
+      for (; _accumulated >= _deltaTime; _accumulated -= _deltaTime) {
+        instance.emit("update", _deltaTime * _timeScale);
         instance.setvar(
           "ELAPSED",
-          instance.ELAPSED + _fixedDeltaTime * _timeScale
+          instance.ELAPSED + _deltaTime * _timeScale
         );
-        _accumulated -= _fixedDeltaTime;
-        shouldRender = true;
+        updated++;
       }
-      if (shouldRender) {
+      if (updated) {
         instance.textalign("start", "top");
         instance.emit("draw");
       }
-      if (_focused && _animated) {
-        raf(drawFrame);
-      }
     }
     function setupCanvas() {
       _canvas = "string" === typeof _canvas ? document.querySelector(_canvas) : _canvas;

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,u=0,p=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,u*=y/44100,p*=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>p&&(l+=u,H+=u,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({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=[],u=e.canvas||document.createElement("canvas"),p=e.fullscreen,d=e.autoscale,h=e.animate,g=1,m,v=.5,E=1,b,T,w,x=!0,y="sans-serif",D=32,H=Date.now(),I=e.global,S={init:null,update:null,draw:null,resized:null,tap:null,untap:null,tapping:null,tapped:null},k={settings:Object.assign({},e),colors:a},A={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?A.clamp(r,l,n):r},norm:(e,t,a)=>A.map(e,t,a,0,1),rand:(e=0,t=1)=>(H=(1664525*H+0x3c6ef35f)%0x100000000)/0x100000000*(t-e)+e,randi:(e=0,t=1)=>Math.floor(A.rand(e,t+1)),seed:e=>null==e?H:H=~~e,cls(e){let t=m.canvas.width,a=m.canvas.height;null==e?m.clearRect(0,0,t,a):A.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),A.stroke(n)},rectfill(e,t,a,l,n,i=null){m.beginPath(),m[i?"roundRect":"rect"](~~e,~~t,~~a,~~l,i),A.fill(n)},circ(e,t,a,l){m.beginPath(),m.arc(~~e,~~t,~~a,0,i),A.stroke(l)},circfill(e,t,a,l){m.beginPath(),m.arc(~~e,~~t,~~a,0,i),A.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),A.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} ${D}px ${y}`,m.fillStyle=A.getcolor(l),m.fillText(a,~~e,~~t)},textfont(e){y=e},textsize(e){D=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&&A.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=A.clamp(e,0,1)},path:e=>new Path2D(e),fill(e,t){m.fillStyle=A.getcolor(e),t?m.fill(t):m.fill()},stroke(e,t){m.strokeStyle=A.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||A.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?z(e,t):f.push([e,t])},listen:(e,t)=>(S[e]=S[e]||new Set,S[e].add(t),()=>S[e].delete(t)),emit(e,t,a,l,n){O("before:"+e,t,a,l,n),O(e,t,a,l,n),O("after:"+e,t,a,l,n)},getcolor:e=>a[~~e%a.length],setvar(e,t){A[e]=t,I&&(l[e]=t)},resize(e,t){A.setvar("WIDTH",u.width=e),A.setvar("HEIGHT",u.height=t),X()},timescale(e){E=e},setfps(e){T=1/~~e,w=0},quit(){for(let e of(A.emit("quit"),o))e();if(x=S=!1,I){for(let e in A)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"])A[e]=Math[e];function C(){c=!0;let t=e.loop?e.loop:l;for(let e in S)t[e]&&A.listen(e,t[e]);for(let[e,t]of f)z(e,t);if((p||d)&&s(l,"resize",X),X(),e.tapEvents){let e=(e,t)=>[(e-u.offsetLeft)/g,(t-u.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(u,"mousedown",t=>{t.preventDefault();let[l,n]=e(t.pageX,t.pageY);A.emit("tap",l,n,0),a(0,l,n),r=!0}),s(u,"mousemove",t=>{t.preventDefault();let[a,l]=e(t.pageX,t.pageY);A.setvar("MOUSEX",a),A.setvar("MOUSEY",l),r&&(A.emit("tapping",a,l,0),n(0,a,l))}),s(u,"mouseup",a=>{a.preventDefault();let l=t.get(0),[n,o]=e(a.pageX,a.pageY);i(l)&&A.emit("tapped",l.startX,l.startY,0),A.emit("untap",n,o,0),t.delete(0),r=!1}),s(u,"touchstart",t=>{for(let l of(t.preventDefault(),t.changedTouches)){let[t,n]=e(l.pageX,l.pageY);A.emit("tap",t,n,l.identifier+1),a(l.identifier+1,t,n)}}),s(u,"touchmove",t=>{for(let a of(t.preventDefault(),t.changedTouches)){let[t,l]=e(a.pageX,a.pageY);A.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)&&A.emit("tapped",l.startX,l.startY,e),A.emit("untap",l.x,l.y,e),t.delete(e))};s(u,"touchend",o),s(u,"touchcancel",o),s(l,"blur",()=>{for(let[e,a]of(r=!1,t))A.emit("untap",a.x,a.y,e),t.delete(e)})}if(e.keyboardEvents){let e=new Set;A.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",()=>{x=!1}),s(l,"focus",()=>{x=!0,r(L)})),A.setfps(60),A.emit("init",A),b=performance.now(),r(L)}function L(e){let t=!h,a=(e-b)/1e3,l=5*T;for(w+=a>l?l:a,b=e;w>=T;)A.emit("update",T*E),A.setvar("ELAPSED",A.ELAPSED+T*E),w-=T,t=!0;t&&(A.textalign("start","top"),A.emit("draw")),x&&h&&r(L)}function X(){let t=l.innerWidth,a=l.innerHeight,n=u.style;n.display="block",p?(n.position="absolute",n.inset=0,A.setvar("WIDTH",u.width=t),A.setvar("HEIGHT",u.height=a)):d&&(n.margin="auto",g=Math.min(t/A.WIDTH,a/A.HEIGHT),g=(e.pixelart?~~g:g)||1,n.width=A.WIDTH*g+"px",n.height=A.HEIGHT*g+"px"),A.setvar("CENTERX",A.WIDTH/2),A.setvar("CENTERY",A.HEIGHT/2),(!e.antialias||e.pixelart)&&(m.imageSmoothingEnabled=!1,u.style.imageRendering="pixelated"),A.emit("resized",g),h||r(L)}function O(e,t,a,l,n){if(S[e])for(let i of S[e])i(t,a,l,n)}function z(e,t){let a=e(A,k,t);if("object"==typeof a)for(let e of Object.keys(a))A.setvar(e,a[e])}if(I){if(l.__litecanvas)throw"global litecanvas already instantiated";Object.assign(l,A),l.__litecanvas=A}return u="string"==typeof u?document.querySelector(u):u,A.setvar("CANVAS",u),m=u.getContext("2d"),s(u,"click",()=>l.focus()),A.WIDTH>0&&(p=!1),u.style="",u.width=A.WIDTH,u.height=A.HEIGHT||A.WIDTH,u.parentNode||document.body.appendChild(u),"loading"===document.readyState?s(l,"DOMContentLoaded",()=>r(C)):r(C),A}})();
+(()=>{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,w=0,T=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,A=0,k=1,C=0,L=0,X=0,O=T<0?-1:1,z=y*O*T*2/44100,M=x.cos(z),P=x.sin,Y=P(z)/4,F=1+Y,W=-2*M/F,_=(1-Y)/F,R=(1+O*M)/2/F,G=-(O+M)/F,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;A<O;a[A++]=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-w+w*P(y*A/d):1)*(X<0?-1:1)*x.abs(X)**s*(A<n?A/n:A<n+b?1-(A-n)/b*(1-E):A<n+b+i?E:A<O-v?(O-A-v)/r*E:0),X=v?X/2+(v>A?0:(A<O-v?1:(O-A)/v)*a[A-v|0]/2/t):X,T&&(X=j=R*N+G*(N=B)+R*(B=X)-_*U-W*(U=j))),I+=(z=(l+=c+=f)*x.cos(g*S++))+z*h*P(A**5),k&&++k>u&&(l+=p,H+=p,k=0),!d||++C%d||(l=H,c=D,k=k||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({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,w,T=0,x,y="sans-serif",D=32,H=Date.now(),I=e.global,S={init:null,update:null,draw:null,resized:null,tap:null,untap:null,tapping:null,tapped:null},A={settings:Object.assign({},e),colors:a},k={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?k.clamp(r,l,n):r},norm:(e,t,a)=>k.map(e,t,a,0,1),rand:(e=0,t=1)=>(H=(1664525*H+0x3c6ef35f)%0x100000000)/0x100000000*(t-e)+e,randi:(e=0,t=1)=>Math.floor(k.rand(e,t+1)),seed:e=>null==e?H:H=~~e,cls(e){null==e?m.clearRect(0,0,m.canvas.width,m.canvas.height):k.rectfill(0,0,m.canvas.width,m.canvas.height,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),k.stroke(n)},rectfill(e,t,a,l,n,i=null){m.beginPath(),m[i?"roundRect":"rect"](~~e,~~t,~~a,~~l,i),k.fill(n)},circ(e,t,a,l){m.beginPath(),m.arc(~~e,~~t,~~a,0,i),k.stroke(l)},circfill(e,t,a,l){m.beginPath(),m.arc(~~e,~~t,~~a,0,i),k.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),k.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} ${D}px ${y}`,m.fillStyle=k.getcolor(l),m.fillText(a,~~e,~~t)},textfont(e){y=e},textsize(e){D=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&&k.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=k.clamp(e,0,1)},path:e=>new Path2D(e),fill(e,t){m.fillStyle=k.getcolor(e),t?m.fill(t):m.fill()},stroke(e,t){m.strokeStyle=k.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||k.DEFAULT_SFX,(0!==a||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)*(l-e)+(n-t)*(n-t)<=(a+i)*(a+i),use(e,t={}){c?z(e,t):f.push([e,t])},listen:(e,t)=>(S[e]=S[e]||new Set,S[e].add(t),()=>S[e].delete(t)),emit(e,t,a,l,n){O("before:"+e,t,a,l,n),O(e,t,a,l,n),O("after:"+e,t,a,l,n)},getcolor:e=>a[~~e%a.length],setvar(e,t){k[e]=t,I&&(l[e]=t)},resize(e,t){k.setvar("WIDTH",p.width=e),k.setvar("HEIGHT",p.height=t),X()},timescale(e){E=e},setfps(e){w=1/~~e},quit(){for(let e of(k.emit("quit"),o))e();if(cancelAnimationFrame(x),S=!1,I){for(let e in k)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"])k[e]=Math[e];function C(){c=!0;let t=e.loop?e.loop:l;for(let e in S)t[e]&&k.listen(e,t[e]);for(let[e,t]of f)z(e,t);if((u||d)&&s(l,"resize",X),X(),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);k.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);k.setvar("MOUSEX",a),k.setvar("MOUSEY",l),r&&(k.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)&&k.emit("tapped",l.startX,l.startY,0),k.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);k.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);k.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)&&k.emit("tapped",l.startX,l.startY,e),k.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))k.emit("untap",a.x,a.y,e),t.delete(e)})}if(e.keyboardEvents){let e=new Set;k.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",()=>{x=cancelAnimationFrame(x)}),s(l,"focus",()=>{x||(b=performance.now(),x=r(L))})),k.setfps(60),k.emit("init",k),b=performance.now(),x=r(L)}function L(e){h&&(x=r(L));let t=0;for(T+=(e-b)/1e3,b=e,h||(T=w);T>=w;T-=w)k.emit("update",w*E),k.setvar("ELAPSED",k.ELAPSED+w*E),t++;t&&(k.textalign("start","top"),k.emit("draw"))}function X(){let t=l.innerWidth,a=l.innerHeight,n=p.style;n.display="block",u?(n.position="absolute",n.inset=0,k.setvar("WIDTH",p.width=t),k.setvar("HEIGHT",p.height=a)):d&&(n.margin="auto",g=Math.min(t/k.WIDTH,a/k.HEIGHT),g=(e.pixelart?~~g:g)||1,n.width=k.WIDTH*g+"px",n.height=k.HEIGHT*g+"px"),k.setvar("CENTERX",k.WIDTH/2),k.setvar("CENTERY",k.HEIGHT/2),(!e.antialias||e.pixelart)&&(m.imageSmoothingEnabled=!1,p.style.imageRendering="pixelated"),k.emit("resized",g),h||r(L)}function O(e,t,a,l,n){if(S[e])for(let i of S[e])i(t,a,l,n)}function z(e,t){let a=e(k,A,t);if("object"==typeof a)for(let e of Object.keys(a))k.setvar(e,a[e])}if(I){if(l.__litecanvas)throw"global litecanvas already instantiated";Object.assign(l,k),l.__litecanvas=k}return p="string"==typeof p?document.querySelector(p):p,k.setvar("CANVAS",p),m=p.getContext("2d"),s(p,"click",()=>l.focus()),k.WIDTH>0&&(u=!1),p.style="",p.width=k.WIDTH,p.height=k.HEIGHT||k.WIDTH,p.parentNode||document.body.appendChild(p),"loading"===document.readyState?s(l,"DOMContentLoaded",()=>r(C)):r(C),k}})();

package/package.json

@@ -1,16 +1,16 @@
 {
     "name": "litecanvas",
-    "version": "0.74.0",
+    "version": "0.74.2",
     "description": "Lightweight HTML5 canvas engine suitable for small games and animations.",
     "license": "MIT",
     "author": "Luiz Bills <luizbills@pm.me>",
     "contributors": [],
     "devDependencies": {
-        "@swc/core": "^1.10.16",
+        "@swc/core": "^1.11.4",
         "ava": "^6.2.0",
         "esbuild": "^0.25.0",
         "gzip-size": "^7.0.0",
-        "prettier": "^3.5.1"
+        "prettier": "^3.5.2"
     },
     "homepage": "https://litecanvas.github.io/about.html",
     "repository": {

package/src/index.js

@@ -67,11 +67,11 @@ export default function litecanvas(settings = {}) {
         /** @type {number} */
         _lastFrameTime,
         /** @type {number} */
-        _fixedDeltaTime,
+        _deltaTime,
         /** @type {number} */
-        _accumulated,
+        _accumulated = 0,
         /** @type {number} */
-        _focused = true,
+        _rafid,
         /** @type {string} */
         _fontFamily = 'sans-serif',
         /** @type {number} */
@@ -361,7 +361,7 @@ export default function litecanvas(settings = {}) {
 
         /** BASIC GRAPHICS API */
         /**
-         * Clear the game screen
+         * Clear the game screen with an optional color
          *
          * @param {number?} color The background color (index) or null (for transparent)
          */
@@ -369,15 +369,19 @@ export default function litecanvas(settings = {}) {
             if (DEV_BUILD) {
                 assert(
                     null == color || (isFinite(color) && color >= 0),
-                    'cls: 1st param must be a number'
+                    'cls: 1st param must be a positive number or zero or null'
                 )
             }
-            let width = _ctx.canvas.width,
-                height = _ctx.canvas.height
             if (null == color) {
-                _ctx.clearRect(0, 0, width, height)
+                _ctx.clearRect(0, 0, _ctx.canvas.width, _ctx.canvas.height)
             } else {
-                instance.rectfill(0, 0, width, height, color)
+                instance.rectfill(
+                    0,
+                    0,
+                    _ctx.canvas.width,
+                    _ctx.canvas.height,
+                    color
+                )
             }
         },
 
@@ -665,11 +669,22 @@ export default function litecanvas(settings = {}) {
         textalign(align, baseline) {
             if (DEV_BUILD) {
                 assert(
-                    null == align || 'string' === typeof align,
+                    null == align ||
+                        ['left', 'right', 'center', 'start', 'end'].includes(
+                            align
+                        ),
                     'textalign: 1st param must be a string'
                 )
                 assert(
-                    null == baseline || 'string' === typeof baseline,
+                    null == baseline ||
+                        [
+                            'top',
+                            'bottom',
+                            'middle',
+                            'hanging',
+                            'alphabetic',
+                            'ideographic',
+                        ].includes(baseline),
                     'textalign: 2nd param must be a string'
                 )
             }
@@ -759,8 +774,8 @@ export default function litecanvas(settings = {}) {
         /**
          * Get or set the canvas context 2D
          *
-         * @param {CanvasRenderingContext2D} [context]
-         * @returns {CanvasRenderingContext2D}
+         * @param {CanvasRenderingContext2D|OffscreenCanvasRenderingContext2D} [context]
+         * @returns {CanvasRenderingContext2D|OffscreenCanvasRenderingContext2D}
          * @see https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D
          */
         ctx(context) {
@@ -965,7 +980,7 @@ export default function litecanvas(settings = {}) {
             zzfxParams = zzfxParams || instance.DEFAULT_SFX
 
             // if has other arguments, copy the sound to not change the original
-            if (pitchSlide > 0 || volumeFactor !== 1) {
+            if (pitchSlide !== 0 || volumeFactor !== 1) {
                 zzfxParams = zzfxParams.slice()
                 zzfxParams[0] = volumeFactor * (zzfxParams[0] || 1)
                 zzfxParams[10] = ~~zzfxParams[10] + pitchSlide
@@ -1037,7 +1052,10 @@ export default function litecanvas(settings = {}) {
                 assert(isFinite(y2), 'colcirc: 5th param must be a number')
                 assert(isFinite(r2), 'colcirc: 6th param must be a number')
             }
-            return (x2 - x1) ** 2 + (y2 - y1) ** 2 <= (r1 + r2) ** 2
+            return (
+                (x2 - x1) * (x2 - x1) + (y2 - y1) * (y2 - y1) <=
+                (r1 + r2) * (r1 + r2)
+            )
         },
 
         /** PLUGINS API */
@@ -1188,8 +1206,7 @@ export default function litecanvas(settings = {}) {
                     'setfps: 1st param must be a positive number'
                 )
             }
-            _fixedDeltaTime = 1 / ~~value
-            _accumulated = 0
+            _deltaTime = 1 / ~~value
         },
 
         /**
@@ -1200,7 +1217,8 @@ export default function litecanvas(settings = {}) {
             for (const removeListener of _browserEventListeners) {
                 removeListener()
             }
-            _focused = _events = false
+            cancelAnimationFrame(_rafid)
+            _events = false
             if (_global) {
                 for (const key in instance) {
                     delete root[key]
@@ -1410,12 +1428,14 @@ export default function litecanvas(settings = {}) {
         // listen browser focus/blur events and pause the update/draw loop
         if (settings.pauseOnBlur) {
             on(root, 'blur', () => {
-                _focused = false
+                _rafid = cancelAnimationFrame(_rafid)
             })
 
             on(root, 'focus', () => {
-                _focused = true
-                raf(drawFrame)
+                if (!_rafid) {
+                    _lastFrameTime = performance.now()
+                    _rafid = raf(drawFrame)
+                }
             })
         }
 
@@ -1425,37 +1445,40 @@ export default function litecanvas(settings = {}) {
         instance.emit('init', instance)
 
         _lastFrameTime = performance.now()
-        raf(drawFrame)
+        _rafid = raf(drawFrame)
     }
 
     /**
-     * @param {number} now
+     * @param {DOMHighResTimeStamp} now
      */
     function drawFrame(now) {
-        let shouldRender = !_animated,
-            frameTime = (now - _lastFrameTime) / 1000,
-            frameTimeMax = _fixedDeltaTime * 5
+        if (_animated) {
+            _rafid = raf(drawFrame)
+        }
+
+        let updated = 0,
+            frameTime = (now - _lastFrameTime) / 1000
 
-        _accumulated += frameTime > frameTimeMax ? frameTimeMax : frameTime
+        _accumulated += frameTime
         _lastFrameTime = now
 
-        while (_accumulated >= _fixedDeltaTime) {
-            instance.emit('update', _fixedDeltaTime * _timeScale)
+        if (!_animated) {
+            _accumulated = _deltaTime
+        }
+
+        for (; _accumulated >= _deltaTime; _accumulated -= _deltaTime) {
+            instance.emit('update', _deltaTime * _timeScale)
             instance.setvar(
                 'ELAPSED',
-                instance.ELAPSED + _fixedDeltaTime * _timeScale
+                instance.ELAPSED + _deltaTime * _timeScale
             )
-            _accumulated -= _fixedDeltaTime
-            shouldRender = true
+            updated++
         }
 
-        if (shouldRender) {
+        if (updated) {
             instance.textalign('start', 'top') // default values for textAlign & textBaseline
             instance.emit('draw')
-        }
-
-        if (_focused && _animated) {
-            raf(drawFrame)
+            console.log(updated)
         }
     }
 

package/types/index.d.ts

@@ -214,7 +214,7 @@ declare global {
 
     /** BASIC GRAPHICS API */
     /**
-     * Clear the game screen
+     * Clear the game screen with an optional color
      *
      * @param color The background color index or `null`
      */

package/types/types.d.ts

@@ -203,7 +203,7 @@ type LitecanvasInstance = {
 
     /** BASIC GRAPHICS API */
     /**
-     * Clear the game screen
+     * Clear the game screen with an optional color
      *
      * @param color The background color index or `null`
      */