litecanvas 0.92.3 → 0.93.1

package/dist/dist.dev.js

@@ -32,7 +32,7 @@
   };
 
   // src/version.js
-  var version = "0.92.3";
+  var version = "0.93.1";
 
   // src/index.js
   function litecanvas(settings = {}) {
@@ -44,7 +44,6 @@
       height: null,
       autoscale: true,
       pixelart: false,
-      antialias: false,
       canvas: null,
       global: true,
       loop: null,
@@ -53,7 +52,7 @@
       animate: true
     };
     settings = Object.assign(defaults, settings);
-    let _initialized = false, _plugins = [], _canvas, _scale = 1, _ctx, _outline_fix = 0.5, _timeScale = 1, _lastFrameTime, _deltaTime = 1 / 60, _accumulated = 0, _rafid, _fontFamily = "sans-serif", _fontSize = 20, _rngSeed = Date.now(), _colors = defaultPalette, _defaultSound = [0.5, 0, 1750, , , 0.3, 1, , , , 600, 0.1], _coreEvents = "init,update,draw,tap,untap,tapping,tapped,resized", _mathFunctions = "PI,sin,cos,atan2,hypot,tan,abs,ceil,floor,trunc,min,max,pow,sqrt,sign,exp", _eventListeners = {};
+    let _initialized = false, _plugins = [], _canvas, _scale = 1, _ctx, _outline_fix = 0.5, _timeScale = 1, _lastFrameTime, _deltaTime = 1 / 60, _accumulated, _rafid, _fontFamily = "sans-serif", _fontSize = 20, _rngSeed = Date.now(), _colors = defaultPalette, _defaultSound = [0.5, 0, 1750, , , 0.3, 1, , , , 600, 0.1], _coreEvents = "init,update,draw,tap,untap,tapping,tapped,resized", _mathFunctions = "PI,sin,cos,atan2,hypot,tan,abs,ceil,floor,trunc,min,max,pow,sqrt,sign,exp", _eventListeners = {};
     const instance = {
       /** @type {number} */
       W: 0,
@@ -811,7 +810,7 @@
         );
         DEV: assert(isNumber(pitchSlide), "[litecanvas] sfx() 2nd param must be a number");
         DEV: assert(isNumber(volumeFactor), "[litecanvas] sfx() 3rd param must be a number");
-        if (root.zzfxV <= 0 || navigator.userActivation && !navigator.userActivation.hasBeenActive) {
+        if (!root.zzfxV || navigator.userActivation && !navigator.userActivation.hasBeenActive) {
           return false;
         }
         zzfxParams = zzfxParams || _defaultSound;
@@ -830,7 +829,10 @@
        * @param {number} value
        */
       volume(value) {
-        DEV: assert(isNumber(value), "[litecanvas] volume() 1st param must be a number");
+        DEV: assert(
+          isNumber(value) && value >= 0,
+          "[litecanvas] volume() 1st param must be a positive number or zero"
+        );
         root.zzfxV = value;
       },
       /** PLUGINS API */
@@ -1025,7 +1027,9 @@
        * Resumes (if paused) the engine loop.
        */
       resume() {
-        if (!_rafid && _initialized) {
+        if (_initialized && !_rafid) {
+          _accumulated = 0;
+          _lastFrameTime = performance.now();
           _rafid = raf(drawFrame);
         }
       },
@@ -1274,14 +1278,20 @@
           }
         );
       }
+      on(root, "focus", () => {
+        DEV: console.warn('[litecanvas] engine loop restarted on "focus" event');
+        instance.pause();
+        instance.resume();
+      });
       _initialized = true;
       instance.emit("init", instance);
-      _lastFrameTime = performance.now();
       instance.resume();
     }
     function drawFrame(now) {
       if (!settings.animate) {
         return instance.emit("draw");
+      } else if (_rafid) {
+        _rafid = raf(drawFrame);
       }
       let updated = 0;
       let frameTime = (now - _lastFrameTime) / 1e3;
@@ -1298,9 +1308,6 @@
       if (updated) {
         instance.emit("draw");
       }
-      if (_rafid) {
-        _rafid = raf(drawFrame);
-      }
     }
     function setupCanvas() {
       if ("string" === typeof settings.canvas) {
@@ -1318,7 +1325,7 @@
         '[litecanvas] litecanvas() option "canvas" should be a canvas element or string (CSS selector)'
       );
       _ctx = _canvas.getContext("2d");
-      on(_canvas, "click", () => root.focus());
+      on(_canvas, "click", () => focus());
       _canvas.style = "";
       resizeCanvas();
       if (!_canvas.parentNode) {
@@ -1339,7 +1346,7 @@
         null == settings.height || settings.width > 0 && settings.height > 0,
         '[litecanvas] litecanvas() option "width" is required when the option "height" is defined'
       );
-      const width = settings.width || root.innerWidth, height = settings.height || settings.width || root.innerHeight;
+      const width = settings.width > 0 ? settings.width : innerWidth, height = settings.width > 0 ? settings.height || settings.width : innerHeight;
       instance.def("W", width);
       instance.def("H", height);
       _canvas.width = width;
@@ -1350,13 +1357,12 @@
           _canvas.style.display = "block";
           _canvas.style.margin = "auto";
         }
-        _scale = math.min(root.innerWidth / width, root.innerHeight / height);
+        _scale = math.min(innerWidth / width, innerHeight / height);
         _scale = maxScale > 1 && _scale > maxScale ? maxScale : _scale;
-        _scale = (settings.pixelart ? ~~_scale : _scale) || 1;
         _canvas.style.width = width * _scale + "px";
         _canvas.style.height = height * _scale + "px";
       }
-      if (!settings.antialias || settings.pixelart) {
+      if (settings.pixelart) {
         _ctx.imageSmoothingEnabled = false;
         _canvas.style.imageRendering = "pixelated";
       }

package/dist/dist.js

@@ -36,7 +36,6 @@
       height: null,
       autoscale: true,
       pixelart: false,
-      antialias: false,
       canvas: null,
       global: true,
       loop: null,
@@ -45,7 +44,7 @@
       animate: true
     };
     settings = Object.assign(defaults, settings);
-    let _initialized = false, _plugins = [], _canvas, _scale = 1, _ctx, _outline_fix = 0.5, _timeScale = 1, _lastFrameTime, _deltaTime = 1 / 60, _accumulated = 0, _rafid, _fontFamily = "sans-serif", _fontSize = 20, _rngSeed = Date.now(), _colors = defaultPalette, _defaultSound = [0.5, 0, 1750, , , 0.3, 1, , , , 600, 0.1], _coreEvents = "init,update,draw,tap,untap,tapping,tapped,resized", _mathFunctions = "PI,sin,cos,atan2,hypot,tan,abs,ceil,floor,trunc,min,max,pow,sqrt,sign,exp", _eventListeners = {};
+    let _initialized = false, _plugins = [], _canvas, _scale = 1, _ctx, _outline_fix = 0.5, _timeScale = 1, _lastFrameTime, _deltaTime = 1 / 60, _accumulated, _rafid, _fontFamily = "sans-serif", _fontSize = 20, _rngSeed = Date.now(), _colors = defaultPalette, _defaultSound = [0.5, 0, 1750, , , 0.3, 1, , , , 600, 0.1], _coreEvents = "init,update,draw,tap,untap,tapping,tapped,resized", _mathFunctions = "PI,sin,cos,atan2,hypot,tan,abs,ceil,floor,trunc,min,max,pow,sqrt,sign,exp", _eventListeners = {};
     const instance = {
       /** @type {number} */
       W: 0,
@@ -558,7 +557,7 @@
        * @see https://github.com/KilledByAPixel/ZzFX
        */
       sfx(zzfxParams, pitchSlide = 0, volumeFactor = 1) {
-        if (root.zzfxV <= 0 || navigator.userActivation && !navigator.userActivation.hasBeenActive) {
+        if (!root.zzfxV || navigator.userActivation && !navigator.userActivation.hasBeenActive) {
           return false;
         }
         zzfxParams = zzfxParams || _defaultSound;
@@ -732,7 +731,9 @@
        * Resumes (if paused) the engine loop.
        */
       resume() {
-        if (!_rafid && _initialized) {
+        if (_initialized && !_rafid) {
+          _accumulated = 0;
+          _lastFrameTime = performance.now();
           _rafid = raf(drawFrame);
         }
       },
@@ -970,14 +971,19 @@
           }
         );
       }
+      on(root, "focus", () => {
+        instance.pause();
+        instance.resume();
+      });
       _initialized = true;
       instance.emit("init", instance);
-      _lastFrameTime = performance.now();
       instance.resume();
     }
     function drawFrame(now) {
       if (!settings.animate) {
         return instance.emit("draw");
+      } else if (_rafid) {
+        _rafid = raf(drawFrame);
       }
       let updated = 0;
       let frameTime = (now - _lastFrameTime) / 1e3;
@@ -994,9 +1000,6 @@
       if (updated) {
         instance.emit("draw");
       }
-      if (_rafid) {
-        _rafid = raf(drawFrame);
-      }
     }
     function setupCanvas() {
       if ("string" === typeof settings.canvas) {
@@ -1006,7 +1009,7 @@
       }
       _canvas = _canvas || document.createElement("canvas");
       _ctx = _canvas.getContext("2d");
-      on(_canvas, "click", () => root.focus());
+      on(_canvas, "click", () => focus());
       _canvas.style = "";
       resizeCanvas();
       if (!_canvas.parentNode) {
@@ -1015,7 +1018,7 @@
       _canvas.oncontextmenu = () => false;
     }
     function resizeCanvas() {
-      const width = settings.width || root.innerWidth, height = settings.height || settings.width || root.innerHeight;
+      const width = settings.width > 0 ? settings.width : innerWidth, height = settings.width > 0 ? settings.height || settings.width : innerHeight;
       instance.def("W", width);
       instance.def("H", height);
       _canvas.width = width;
@@ -1026,13 +1029,12 @@
           _canvas.style.display = "block";
           _canvas.style.margin = "auto";
         }
-        _scale = math.min(root.innerWidth / width, root.innerHeight / height);
+        _scale = math.min(innerWidth / width, innerHeight / height);
         _scale = maxScale > 1 && _scale > maxScale ? maxScale : _scale;
-        _scale = (settings.pixelart ? ~~_scale : _scale) || 1;
         _canvas.style.width = width * _scale + "px";
         _canvas.style.height = height * _scale + "px";
       }
-      if (!settings.antialias || settings.pixelart) {
+      if (settings.pixelart) {
         _ctx.imageSmoothingEnabled = false;
         _canvas.style.imageRendering = "pixelated";
       }

package/dist/dist.min.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "litecanvas",
-    "version": "0.92.3",
+    "version": "0.93.1",
     "description": "Lightweight HTML5 canvas 2D game engine suitable for small projects and creative coding. Inspired by PICO-8 and P5/Processing.",
     "license": "MIT",
     "author": "Luiz Bills <luizbills@pm.me>",
@@ -19,23 +19,24 @@
     "types": "./types/index.d.ts",
     "unpkg": "./dist/dist.dev.js",
     "keywords": [
-        "game engine",
-        "game development",
-        "2d",
+        "tiny",
+        "micro",
+        "javascript",
+        "html5",
         "canvas",
+        "2d",
+        "game",
         "gamedev",
         "js13k",
-        "creative-coding",
-        "pico-8",
-        "p5"
+        "creative coding"
     ],
     "devDependencies": {
-        "@litecanvas/jsdom-extras": "^2.0.0",
+        "@litecanvas/jsdom-extras": "^2.0.1",
         "@size-limit/preset-small-lib": "^11.2.0",
-        "@swc/core": "^1.12.11",
+        "@swc/core": "^1.13.1",
         "@types/jsdom": "^21.1.7",
         "ava": "^6.4.1",
-        "esbuild": "^0.25.6",
+        "esbuild": "^0.25.8",
         "genversion": "^3.2.0",
         "gzip-size": "^7.0.0",
         "jsdom": "^26.1.0",
@@ -52,7 +53,7 @@
         "prepublishOnly": "npm test",
         "test": "ava --timeout=1s --fast-fail --tap | tap-min",
         "test:watch": "ava --watch",
-        "dev": "esbuild src/web.js --bundle --watch --outfile=dist/dist.dev.js --servedir=.",
+        "dev": "esbuild src/web.js --bundle --watch --outfile=samples/dist.js --servedir=samples",
         "build": "npm run genversion && node script/build.js && size-limit",
         "format": "prettier -w src/* samples/* types/* script/* types/*",
         "check-types": "npx ts types/*",

package/src/index.js

@@ -33,7 +33,6 @@ export default function litecanvas(settings = {}) {
             height: null,
             autoscale: true,
             pixelart: false,
-            antialias: false,
             canvas: null,
             global: true,
             loop: null,
@@ -64,7 +63,7 @@ export default function litecanvas(settings = {}) {
         /** @type {number} duration of a frame at 60 FPS (default) */
         _deltaTime = 1 / 60,
         /** @type {number} */
-        _accumulated = 0,
+        _accumulated,
         /** @type {number?} */
         _rafid,
         /** @type {string} */
@@ -945,7 +944,7 @@ export default function litecanvas(settings = {}) {
             DEV: assert(isNumber(volumeFactor), '[litecanvas] sfx() 3rd param must be a number')
 
             if (
-                root.zzfxV <= 0 ||
+                !root.zzfxV ||
                 (navigator.userActivation && !navigator.userActivation.hasBeenActive)
             ) {
                 return false
@@ -972,7 +971,10 @@ export default function litecanvas(settings = {}) {
          * @param {number} value
          */
         volume(value) {
-            DEV: assert(isNumber(value), '[litecanvas] volume() 1st param must be a number')
+            DEV: assert(
+                isNumber(value) && value >= 0,
+                '[litecanvas] volume() 1st param must be a positive number or zero'
+            )
 
             root.zzfxV = value
         },
@@ -1207,7 +1209,9 @@ export default function litecanvas(settings = {}) {
          * Resumes (if paused) the engine loop.
          */
         resume() {
-            if (!_rafid && _initialized) {
+            if (_initialized && !_rafid) {
+                _accumulated = 0
+                _lastFrameTime = performance.now()
                 _rafid = raf(drawFrame)
             }
         },
@@ -1502,11 +1506,17 @@ export default function litecanvas(settings = {}) {
             )
         }
 
+        // this seems to solve a strange bug that drop the FPS
+        // when switching tabs in the browser
+        on(root, 'focus', () => {
+            DEV: console.warn('[litecanvas] engine loop restarted on "focus" event')
+            instance.pause()
+            instance.resume()
+        })
+
         // start the engine
         _initialized = true
         instance.emit('init', instance)
-
-        _lastFrameTime = performance.now()
         instance.resume()
     }
 
@@ -1517,6 +1527,11 @@ export default function litecanvas(settings = {}) {
         if (!settings.animate) {
             return instance.emit('draw')
         }
+        // request the next frame
+        // only when the engine loop are not paused (_rafid >= 1)
+        else if (_rafid) {
+            _rafid = raf(drawFrame)
+        }
 
         let updated = 0
         let frameTime = (now - _lastFrameTime) / 1000
@@ -1536,12 +1551,6 @@ export default function litecanvas(settings = {}) {
         if (updated) {
             instance.emit('draw')
         }
-
-        // request the next frame
-        // only when the engine loop are not paused (_rafid >= 1)
-        if (_rafid) {
-            _rafid = raf(drawFrame)
-        }
     }
 
     function setupCanvas() {
@@ -1564,7 +1573,7 @@ export default function litecanvas(settings = {}) {
 
         _ctx = _canvas.getContext('2d')
 
-        on(_canvas, 'click', () => root.focus())
+        on(_canvas, 'click', () => focus())
 
         /** @ts-ignore */
         _canvas.style = ''
@@ -1592,8 +1601,8 @@ export default function litecanvas(settings = {}) {
             '[litecanvas] litecanvas() option "width" is required when the option "height" is defined'
         )
 
-        const width = settings.width || root.innerWidth,
-            height = settings.height || settings.width || root.innerHeight
+        const width = settings.width > 0 ? settings.width : innerWidth,
+            height = settings.width > 0 ? settings.height || settings.width : innerHeight
 
         instance.def('W', width)
         instance.def('H', height)
@@ -1608,29 +1617,30 @@ export default function litecanvas(settings = {}) {
                 _canvas.style.margin = 'auto'
             }
 
-            _scale = math.min(root.innerWidth / width, root.innerHeight / height)
+            _scale = math.min(innerWidth / width, innerHeight / height)
             _scale = maxScale > 1 && _scale > maxScale ? maxScale : _scale
-            _scale = (settings.pixelart ? ~~_scale : _scale) || 1
 
             _canvas.style.width = width * _scale + 'px'
             _canvas.style.height = height * _scale + 'px'
         }
 
-        // restore canvas image rendering properties
-        if (!settings.antialias || settings.pixelart) {
+        // set canvas image rendering properties
+        if (settings.pixelart) {
             _ctx.imageSmoothingEnabled = false
             _canvas.style.imageRendering = 'pixelated'
         }
 
-        // reset the default text align and baseline
+        // set the default text align and baseline
         instance.textalign('start', 'top')
 
         // trigger "resized" event
+        // note: not triggered before the "init" event
         instance.emit('resized', _scale)
 
+        // paint a temporary background
         instance.cls(0)
 
-        // force redraw
+        // force redraw when the canvas is not animated
         if (!settings.animate) {
             raf(drawFrame)
         }

package/src/version.js

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

package/types/types.d.ts

@@ -594,19 +594,18 @@ type LitecanvasOptions = {
     canvas?: HTMLCanvasElement | string
     /**
      * If `true` (default) scales the canvas to fill the screen, but preserving the aspect ratio.
-     * Instead of `true`, you can pass a number to limit the maximum scale factor of the canvas.
+     * Instead of `true`, you can pass a number to determine the maximum scale.
      *
      * Note: Only works if the option "width" was specified.
      */
     autoscale?: boolean | number
     /**
      * If `true`, the pixel art images won't look blurry.
+     * Also, disables canvas built-in antialias.
+     *
+     * Default: `false`
      */
     pixelart?: boolean
-    /**
-     * If `false` (default), disable the canvas antialias.
-     */
-    antialias?: boolean
     /**
      * If `true` (default), all methods and properties of the engine will be exposed to the global scope (window).
      */