litecanvas 0.75.1 → 0.76.0

package/README.md

@@ -32,7 +32,7 @@ npm install
 npm run dev
 ```
 
-If you prefer, you can manually install the package via NPM:
+If you prefer, you can manually install via [NPM](https://www.npmjs.com/package/litecanvas):
 
 ```
 npm install litecanvas

package/dist/dist.dev.js

@@ -36,7 +36,6 @@
         () => elem.removeEventListener(evt, callback, false)
       );
     }, isFinite = Number.isFinite, defaults = {
-      fullscreen: true,
       width: null,
       height: null,
       autoscale: true,
@@ -51,7 +50,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, _deltaTime, _accumulated = 0, _rafid, _fontFamily = "sans-serif", _fontSize = 32, _rng_seed = Date.now(), _global = settings.global, _events = {
+    let _initialized = false, _plugins = [], _canvas = settings.canvas || document.createElement("canvas"), _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,
@@ -894,9 +893,11 @@
           "string" === typeof eventName,
           "emit: 1st param must be a string"
         );
-        triggerEvent("before:" + eventName, arg1, arg2, arg3, arg4);
-        triggerEvent(eventName, arg1, arg2, arg3, arg4);
-        triggerEvent("after:" + eventName, arg1, arg2, arg3, arg4);
+        if (_initialized) {
+          triggerEvent("before:" + eventName, arg1, arg2, arg3, arg4);
+          triggerEvent(eventName, arg1, arg2, arg3, arg4);
+          triggerEvent("after:" + eventName, arg1, arg2, arg3, arg4);
+        }
       },
       /**
        * Get a color by index
@@ -937,11 +938,19 @@
        * @param {number} height
        */
       resize(width, height) {
-        DEV: assert(isFinite(width), "resize: 1st param must be a number");
-        DEV: assert(isFinite(height), "resize: 2nd param must be a number");
+        DEV: assert(
+          isFinite(width) && width > 0,
+          "resize: 1st param must be a number"
+        );
+        DEV: assert(
+          isFinite(height) && height > 0,
+          "resize: 2nd param must be a number"
+        );
         instance.setvar("WIDTH", _canvas.width = width);
         instance.setvar("HEIGHT", _canvas.height = height);
-        pageResized();
+        instance.setvar("CENTERX", instance.WIDTH / 2);
+        instance.setvar("CENTERY", instance.HEIGHT / 2);
+        onResize();
       },
       /**
        * The scale of the game's delta time (dt).
@@ -999,10 +1008,9 @@
       for (const [callback, config] of _plugins) {
         loadPlugin(callback, config);
       }
-      if (_fullscreen || _autoscale) {
-        on(root, "resize", pageResized);
+      if (_autoscale) {
+        on(root, "resize", onResize);
       }
-      pageResized();
       if (settings.tapEvents) {
         const _getXY = (pageX, pageY) => [
           (pageX - _canvas.offsetLeft) / _scale,
@@ -1139,21 +1147,23 @@
       }
       let updated = 0, frameTime = (now - _lastFrameTime) / 1e3;
       _lastFrameTime = now;
-      if (frameTime > _deltaTime * 30)
-        return console.log("skipping too long frame");
-      _accumulated += frameTime;
-      if (!_animated) {
-        _accumulated = _deltaTime;
-      }
-      for (; _accumulated >= _deltaTime; _accumulated -= _deltaTime) {
-        instance.emit("update", _deltaTime * _timeScale);
-        instance.setvar(
-          "ELAPSED",
-          instance.ELAPSED + _deltaTime * _timeScale
-        );
-        updated++;
+      if (frameTime > _deltaTime * 30) {
+        console.log("skipping too long frame");
+      } else {
+        _accumulated += frameTime;
+        if (!_animated) {
+          _accumulated = _deltaTime;
+        }
+        for (; _accumulated >= _deltaTime; _accumulated -= _deltaTime) {
+          instance.emit("update", _deltaTime * _timeScale);
+          instance.setvar(
+            "ELAPSED",
+            instance.ELAPSED + _deltaTime * _timeScale
+          );
+          updated++;
+        }
       }
-      if (updated) {
+      if (updated || !_animated) {
         instance.textalign("start", "top");
         instance.emit("draw");
       }
@@ -1165,44 +1175,43 @@
         "Invalid canvas element"
       );
       DEV: assert(
-        null === instance.WIDTH || instance.WIDTH > 0,
+        null == instance.WIDTH || instance.WIDTH > 0,
         `Litecanvas' "width" option should be null or a positive number`
       );
       DEV: assert(
-        null === instance.HEIGHT || instance.HEIGHT > 0,
+        null == instance.HEIGHT || instance.HEIGHT > 0,
         `Litecanvas' "width" option should be null or a positive number`
       );
+      DEV: assert(
+        null == instance.HEIGHT || instance.WIDTH > 0 && instance.HEIGHT > 0,
+        `Litecanvas' "width" is required when "heigth" is passed`
+      );
       instance.setvar("CANVAS", _canvas);
       _ctx = _canvas.getContext("2d");
       on(_canvas, "click", () => root.focus());
-      if (instance.WIDTH > 0) {
-        _fullscreen = false;
-      }
       _canvas.style = "";
-      _canvas.width = instance.WIDTH;
-      _canvas.height = instance.HEIGHT || instance.WIDTH;
+      if (!instance.WIDTH) {
+        instance.WIDTH = root.innerWidth;
+        instance.HEIGHT = root.innerHeight;
+      }
+      instance.resize(instance.WIDTH, instance.HEIGHT, false);
       if (!_canvas.parentNode) document.body.appendChild(_canvas);
     }
-    function pageResized() {
-      const pageWidth = root.innerWidth, pageHeight = root.innerHeight, styles = _canvas.style;
-      styles.display = "block";
-      if (_fullscreen) {
-        styles.position = "absolute";
-        styles.inset = 0;
-        instance.setvar("WIDTH", _canvas.width = pageWidth);
-        instance.setvar("HEIGHT", _canvas.height = pageHeight);
-      } else if (_autoscale) {
-        styles.margin = "auto";
+    function onResize() {
+      const styles = _canvas.style;
+      if (_autoscale) {
+        if (!styles.display) {
+          styles.display = "block";
+          styles.margin = "auto";
+        }
         _scale = Math.min(
-          pageWidth / instance.WIDTH,
-          pageHeight / instance.HEIGHT
+          root.innerWidth / instance.WIDTH,
+          root.innerHeight / instance.HEIGHT
         );
         _scale = (settings.pixelart ? ~~_scale : _scale) || 1;
         styles.width = instance.WIDTH * _scale + "px";
         styles.height = instance.HEIGHT * _scale + "px";
       }
-      instance.setvar("CENTERX", instance.WIDTH / 2);
-      instance.setvar("CENTERY", instance.HEIGHT / 2);
       if (!settings.antialias || settings.pixelart) {
         _ctx.imageSmoothingEnabled = false;
         styles.imageRendering = "pixelated";

package/dist/dist.js

@@ -31,7 +31,6 @@
         () => elem.removeEventListener(evt, callback, false)
       );
     }, isFinite = Number.isFinite, defaults = {
-      fullscreen: true,
       width: null,
       height: null,
       autoscale: true,
@@ -46,7 +45,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, _deltaTime, _accumulated = 0, _rafid, _fontFamily = "sans-serif", _fontSize = 32, _rng_seed = Date.now(), _global = settings.global, _events = {
+    let _initialized = false, _plugins = [], _canvas = settings.canvas || document.createElement("canvas"), _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,
@@ -637,9 +636,11 @@
        * @param {*} [arg4] any data to be passed over the listeners
        */
       emit(eventName, arg1, arg2, arg3, arg4) {
-        triggerEvent("before:" + eventName, arg1, arg2, arg3, arg4);
-        triggerEvent(eventName, arg1, arg2, arg3, arg4);
-        triggerEvent("after:" + eventName, arg1, arg2, arg3, arg4);
+        if (_initialized) {
+          triggerEvent("before:" + eventName, arg1, arg2, arg3, arg4);
+          triggerEvent(eventName, arg1, arg2, arg3, arg4);
+          triggerEvent("after:" + eventName, arg1, arg2, arg3, arg4);
+        }
       },
       /**
        * Get a color by index
@@ -673,7 +674,9 @@
       resize(width, height) {
         instance.setvar("WIDTH", _canvas.width = width);
         instance.setvar("HEIGHT", _canvas.height = height);
-        pageResized();
+        instance.setvar("CENTERX", instance.WIDTH / 2);
+        instance.setvar("CENTERY", instance.HEIGHT / 2);
+        onResize();
       },
       /**
        * The scale of the game's delta time (dt).
@@ -723,10 +726,9 @@
       for (const [callback, config] of _plugins) {
         loadPlugin(callback, config);
       }
-      if (_fullscreen || _autoscale) {
-        on(root, "resize", pageResized);
+      if (_autoscale) {
+        on(root, "resize", onResize);
       }
-      pageResized();
       if (settings.tapEvents) {
         const _getXY = (pageX, pageY) => [
           (pageX - _canvas.offsetLeft) / _scale,
@@ -859,21 +861,22 @@
       }
       let updated = 0, frameTime = (now - _lastFrameTime) / 1e3;
       _lastFrameTime = now;
-      if (frameTime > _deltaTime * 30)
-        return void 0;
-      _accumulated += frameTime;
-      if (!_animated) {
-        _accumulated = _deltaTime;
-      }
-      for (; _accumulated >= _deltaTime; _accumulated -= _deltaTime) {
-        instance.emit("update", _deltaTime * _timeScale);
-        instance.setvar(
-          "ELAPSED",
-          instance.ELAPSED + _deltaTime * _timeScale
-        );
-        updated++;
+      if (frameTime > _deltaTime * 30) {
+      } else {
+        _accumulated += frameTime;
+        if (!_animated) {
+          _accumulated = _deltaTime;
+        }
+        for (; _accumulated >= _deltaTime; _accumulated -= _deltaTime) {
+          instance.emit("update", _deltaTime * _timeScale);
+          instance.setvar(
+            "ELAPSED",
+            instance.ELAPSED + _deltaTime * _timeScale
+          );
+          updated++;
+        }
       }
-      if (updated) {
+      if (updated || !_animated) {
         instance.textalign("start", "top");
         instance.emit("draw");
       }
@@ -883,34 +886,29 @@
       instance.setvar("CANVAS", _canvas);
       _ctx = _canvas.getContext("2d");
       on(_canvas, "click", () => root.focus());
-      if (instance.WIDTH > 0) {
-        _fullscreen = false;
-      }
       _canvas.style = "";
-      _canvas.width = instance.WIDTH;
-      _canvas.height = instance.HEIGHT || instance.WIDTH;
+      if (!instance.WIDTH) {
+        instance.WIDTH = root.innerWidth;
+        instance.HEIGHT = root.innerHeight;
+      }
+      instance.resize(instance.WIDTH, instance.HEIGHT, false);
       if (!_canvas.parentNode) document.body.appendChild(_canvas);
     }
-    function pageResized() {
-      const pageWidth = root.innerWidth, pageHeight = root.innerHeight, styles = _canvas.style;
-      styles.display = "block";
-      if (_fullscreen) {
-        styles.position = "absolute";
-        styles.inset = 0;
-        instance.setvar("WIDTH", _canvas.width = pageWidth);
-        instance.setvar("HEIGHT", _canvas.height = pageHeight);
-      } else if (_autoscale) {
-        styles.margin = "auto";
+    function onResize() {
+      const styles = _canvas.style;
+      if (_autoscale) {
+        if (!styles.display) {
+          styles.display = "block";
+          styles.margin = "auto";
+        }
         _scale = Math.min(
-          pageWidth / instance.WIDTH,
-          pageHeight / instance.HEIGHT
+          root.innerWidth / instance.WIDTH,
+          root.innerHeight / instance.HEIGHT
         );
         _scale = (settings.pixelart ? ~~_scale : _scale) || 1;
         styles.width = instance.WIDTH * _scale + "px";
         styles.height = instance.HEIGHT * _scale + "px";
       }
-      instance.setvar("CENTERX", instance.WIDTH / 2);
-      instance.setvar("CENTERY", instance.HEIGHT / 2);
       if (!settings.antialias || settings.pixelart) {
         _ctx.imageSmoothingEnabled = false;
         styles.imageRendering = "pixelated";

package/dist/dist.min.js

@@ -1 +1 @@
-(()=>{var e=new AudioContext,t=(t=1,a=.05,l=220,n=0,i=0,o=.1,r=0,s=1,c=0,f=0,u=0,d=0,p=0,h=0,g=0,m=0,v=0,E=1,b=0,w=0,T=0)=>{let x=Math,H=2*x.PI,y=c*=500*H/44100/44100,I=l*=(1-a+2*a*x.random(a=[]))*H/44100,D=0,S=0,A=0,k=1,C=0,L=0,X=0,P=T<0?-1:1,z=H*P*T*2/44100,M=x.cos(z),O=x.sin,Y=O(z)/4,F=1+Y,W=-2*M/F,_=(1-Y)/F,R=(1+P*M)/2/F,G=-(P+M)/F,N=0,B=0,U=0,q=0;for(n=44100*n+9,b*=44100,i*=44100,o*=44100,v*=44100,f*=500*H/85766121e6,g*=H/44100,u*=H/44100,d*=44100,p=44100*p|0,t*=.3*(globalThis.zzfxV||1),P=n+b+i+o+v|0;A<P;a[A++]=X*t)++L%(100*m|0)||(X=r?1<r?2<r?3<r?O(D*D):x.max(x.min(x.tan(D),1),-1):1-(2*D/H%2+2)%2:1-4*x.abs(x.round(D/H)-D/H):O(D),X=(p?1-w+w*O(H*A/p):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<P-v?(P-A-v)/o*E:0),X=v?X/2+(v>A?0:(A<P-v?1:(P-A)/v)*a[A-v|0]/2/t):X,T&&(X=q=R*N+G*(N=B)+R*(B=X)-_*U-W*(U=q))),D+=(z=(l+=c+=f)*x.cos(g*S++))+z*h*O(A**5),k&&++k>d&&(l+=u,I+=u,k=0),!p||++C%p||(l=I,c=y,k=k||1);(t=e.createBuffer(1,P,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,o=requestAnimationFrame,r=[],s=(e,t,a)=>{e.addEventListener(t,a,!1),r.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"),d=e.fullscreen,p=e.autoscale,h=e.animate,g=1,m,v=.5,E=1,b,w,T=0,x,H="sans-serif",y=32,I=Date.now(),D=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],TWO_PI:i,HALF_PI:n/2,lerp:(e,t,a)=>a*(t-e)+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 o=(e-t)/(a-t)*(n-l)+l;return i?k.clamp(o,l,n):o},norm:(e,t,a)=>k.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(k.rand(e,t+1)),seed:e=>null==e?I:I=~~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),o=.5*(0!==v&&~~t==~~l);m.moveTo(~~e+i,~~t+o),m.lineTo(~~a+i,~~l+o),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} ${y}px ${H}`,m.fillStyle=k.getcolor(l),m.fillText(a,~~e,~~t)},textfont(e){H=e},textsize(e){y=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,o=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=o,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,o,r)=>e<n+o&&e+a>n&&t<i+r&&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){P("before:"+e,t,a,l,n),P(e,t,a,l,n),P("after:"+e,t,a,l,n)},getcolor:e=>a[~~e%a.length],setvar(e,t){k[e]=t,D&&(l[e]=t)},resize(e,t){k.setvar("WIDTH",u.width=e),k.setvar("HEIGHT",u.height=t),X()},timescale(e){E=e},setfps(e){w=1/~~e},quit(){for(let e of(k.emit("quit"),r))e();if(cancelAnimationFrame(x),S=!1,D){for(let e in k)delete l[e];delete l.__litecanvas}}};for(let e of"PI,sin,cos,atan2,hypot,tan,abs,ceil,round,floor,trunc,min,max,pow,sqrt,sign,exp".split(","))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((d||p)&&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,o=e=>e.preventDefault(),r=!1;s(u,"mousedown",t=>{if(0===t.button){o(t);let[l,n]=e(t.pageX,t.pageY);k.emit("tap",l,n,0),a(0,l,n),r=!0}}),s(u,"mouseup",a=>{if(0===a.button){o(a);let l=t.get(0),[n,s]=e(a.pageX,a.pageY);i(l)&&k.emit("tapped",l.startX,l.startY,0),k.emit("untap",n,s,0),t.delete(0),r=!1}}),s(u,"mousemove",t=>{o(t);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(u,"touchstart",t=>{for(let l of(o(t),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(u,"touchmove",t=>{for(let a of(o(t),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 c=e=>{o(e);let a=[];if(e.targetTouches.length>0)for(let t of e.targetTouches)a.push(t.identifier+1);for(let[e,l]of t)a.includes(e)||(i(l)&&k.emit("tapped",l.startX,l.startY,e),k.emit("untap",l.x,l.y,e),t.delete(e))};s(u,"touchend",c),s(u,"touchcancel",c),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||(x=o(L))})),k.setfps(60),k.emit("init",k),b=performance.now(),x=o(L)}function L(e){h&&(x=o(L));let t=0,a=(e-b)/1e3;if(b=e,!(a>30*w)){for(T+=a,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=u.style;n.display="block",d?(n.position="absolute",n.inset=0,k.setvar("WIDTH",u.width=t),k.setvar("HEIGHT",u.height=a)):p&&(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,n.imageRendering="pixelated"),k.emit("resized",g),h||o(L)}function P(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);for(let e in a)k.setvar(e,a[e])}if(D){if(l.__litecanvas)throw"global litecanvas already instantiated";Object.assign(l,k),l.__litecanvas=k}return u="string"==typeof u?document.querySelector(u):u,k.setvar("CANVAS",u),m=u.getContext("2d"),s(u,"click",()=>l.focus()),k.WIDTH>0&&(d=!1),u.style="",u.width=k.WIDTH,u.height=k.HEIGHT||k.WIDTH,u.parentNode||document.body.appendChild(u),"loading"===document.readyState?s(l,"DOMContentLoaded",()=>o(C)):o(C),k}})();
+(()=>{var e=new AudioContext,t=(t=1,a=.05,l=220,n=0,i=0,o=.1,r=0,s=1,c=0,f=0,d=0,p=0,u=0,h=0,g=0,m=0,v=0,E=1,b=0,x=0,T=0)=>{let w=Math,y=2*w.PI,H=c*=500*y/44100/44100,I=l*=(1-a+2*a*w.random(a=[]))*y/44100,S=0,D=0,A=0,k=1,C=0,L=0,X=0,z=T<0?-1:1,P=y*z*T*2/44100,M=w.cos(P),O=w.sin,Y=O(P)/4,F=1+Y,W=-2*M/F,_=(1-Y)/F,R=(1+z*M)/2/F,G=-(z+M)/F,N=0,B=0,U=0,q=0;for(n=44100*n+9,b*=44100,i*=44100,o*=44100,v*=44100,f*=500*y/85766121e6,g*=y/44100,d*=y/44100,p*=44100,u=44100*u|0,t*=.3*(globalThis.zzfxV||1),z=n+b+i+o+v|0;A<z;a[A++]=X*t)++L%(100*m|0)||(X=r?1<r?2<r?3<r?O(S*S):w.max(w.min(w.tan(S),1),-1):1-(2*S/y%2+2)%2:1-4*w.abs(w.round(S/y)-S/y):O(S),X=(u?1-x+x*O(y*A/u):1)*(X<0?-1:1)*w.abs(X)**s*(A<n?A/n:A<n+b?1-(A-n)/b*(1-E):A<n+b+i?E:A<z-v?(z-A-v)/o*E:0),X=v?X/2+(v>A?0:(A<z-v?1:(z-A)/v)*a[A-v|0]/2/t):X,T&&(X=q=R*N+G*(N=B)+R*(B=X)-_*U-W*(U=q))),S+=(P=(l+=c+=f)*w.cos(g*D++))+P*h*O(A**5),k&&++k>p&&(l+=d,I+=d,k=0),!u||++C%u||(l=I,c=H,k=k||1);(t=e.createBuffer(1,z,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,o=requestAnimationFrame,r=[],s=(e,t,a)=>{e.addEventListener(t,a,!1),r.push(()=>e.removeEventListener(t,a,!1))};e=Object.assign({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=[],d=e.canvas||document.createElement("canvas"),p=e.autoscale,u=e.animate,h=1,g,m=.5,v=1,E,b,x=0,T,w="sans-serif",y=32,H=Date.now(),I=e.global,S={init:null,update:null,draw:null,resized:null,tap:null,untap:null,tapping:null,tapped:null},D={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],TWO_PI:i,HALF_PI:n/2,lerp:(e,t,a)=>a*(t-e)+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 o=(e-t)/(a-t)*(n-l)+l;return i?A.clamp(o,l,n):o},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){null==e?g.clearRect(0,0,g.canvas.width,g.canvas.height):A.rectfill(0,0,g.canvas.width,g.canvas.height,e)},rect(e,t,a,l,n,i=null){g.beginPath(),g[i?"roundRect":"rect"](~~e-m,~~t-m,~~a+2*m,~~l+2*m,i),A.stroke(n)},rectfill(e,t,a,l,n,i=null){g.beginPath(),g[i?"roundRect":"rect"](~~e,~~t,~~a,~~l,i),A.fill(n)},circ(e,t,a,l){g.beginPath(),g.arc(~~e,~~t,~~a,0,i),A.stroke(l)},circfill(e,t,a,l){g.beginPath(),g.arc(~~e,~~t,~~a,0,i),A.fill(l)},line(e,t,a,l,n){g.beginPath();let i=.5*(0!==m&&~~e==~~a),o=.5*(0!==m&&~~t==~~l);g.moveTo(~~e+i,~~t+o),g.lineTo(~~a+i,~~l+o),A.stroke(n)},linewidth(e){g.lineWidth=~~e,m=.5*(~~e%2!=0)},linedash(e,t=0){g.setLineDash(e),g.lineDashOffset=t},text(e,t,a,l=3,n="normal"){g.font=`${n} ${y}px ${w}`,g.fillStyle=A.getcolor(l),g.fillText(a,~~e,~~t)},textfont(e){w=e},textsize(e){y=e},textalign(e,t){e&&(g.textAlign=e),t&&(g.textBaseline=t)},image(e,t,a){g.drawImage(a,~~e,~~t)},paint(e,t,a,l={}){let n=l.canvas||new OffscreenCanvas(1,1),i=l.scale||1,o=g;if(n.width=e*i,n.height=t*i,(g=n.getContext("2d")).scale(i,i),a.push){let e=0,t=0;for(let l of(g.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(g);return g=o,n},ctx:e=>(e&&(g=e),g),push:()=>g.save(),pop:()=>g.restore(),translate:(e,t)=>g.translate(~~e,~~t),scale:(e,t)=>g.scale(e,t||e),rotate:e=>g.rotate(e),alpha(e){g.globalAlpha=A.clamp(e,0,1)},path:e=>new Path2D(e),fill(e,t){g.fillStyle=A.getcolor(e),t?g.fill(t):g.fill()},stroke(e,t){g.strokeStyle=A.getcolor(e),t?g.stroke(t):g.stroke()},clip(e){g.clip(e)},sfx:(e,a=0,n=1)=>!(l.zzfxV<=0)&&(!navigator.userActivation||!!navigator.userActivation.hasBeenActive)&&(e=e||A.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,o,r)=>e<n+o&&e+a>n&&t<i+r&&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){c&&(X("before:"+e,t,a,l,n),X(e,t,a,l,n),X("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",d.width=e),A.setvar("HEIGHT",d.height=t),A.setvar("CENTERX",A.WIDTH/2),A.setvar("CENTERY",A.HEIGHT/2),L()},timescale(e){v=e},setfps(e){b=1/~~e},quit(){for(let e of(A.emit("quit"),r))e();if(cancelAnimationFrame(T),S=!1,I){for(let e in A)delete l[e];delete l.__litecanvas}}};for(let e of"PI,sin,cos,atan2,hypot,tan,abs,ceil,round,floor,trunc,min,max,pow,sqrt,sign,exp".split(","))A[e]=Math[e];function k(){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&&s(l,"resize",L),e.tapEvents){let e=(e,t)=>[(e-d.offsetLeft)/h,(t-d.offsetTop)/h],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,o=e=>e.preventDefault(),r=!1;s(d,"mousedown",t=>{if(0===t.button){o(t);let[l,n]=e(t.pageX,t.pageY);A.emit("tap",l,n,0),a(0,l,n),r=!0}}),s(d,"mouseup",a=>{if(0===a.button){o(a);let l=t.get(0),[n,s]=e(a.pageX,a.pageY);i(l)&&A.emit("tapped",l.startX,l.startY,0),A.emit("untap",n,s,0),t.delete(0),r=!1}}),s(d,"mousemove",t=>{o(t);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(d,"touchstart",t=>{for(let l of(o(t),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(d,"touchmove",t=>{for(let a of(o(t),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 c=e=>{o(e);let a=[];if(e.targetTouches.length>0)for(let t of e.targetTouches)a.push(t.identifier+1);for(let[e,l]of t)a.includes(e)||(i(l)&&A.emit("tapped",l.startX,l.startY,e),A.emit("untap",l.x,l.y,e),t.delete(e))};s(d,"touchend",c),s(d,"touchcancel",c),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",()=>{T=cancelAnimationFrame(T)}),s(l,"focus",()=>{T||(T=o(C))})),A.setfps(60),A.emit("init",A),E=performance.now(),T=o(C)}function C(e){u&&(T=o(C));let t=0,a=(e-E)/1e3;if(E=e,a>30*b);else for(x+=a,u||(x=b);x>=b;x-=b)A.emit("update",b*v),A.setvar("ELAPSED",A.ELAPSED+b*v),t++;(t||!u)&&(A.textalign("start","top"),A.emit("draw"))}function L(){let t=d.style;p&&(t.display||(t.display="block",t.margin="auto"),h=Math.min(l.innerWidth/A.WIDTH,l.innerHeight/A.HEIGHT),h=(e.pixelart?~~h:h)||1,t.width=A.WIDTH*h+"px",t.height=A.HEIGHT*h+"px"),(!e.antialias||e.pixelart)&&(g.imageSmoothingEnabled=!1,t.imageRendering="pixelated"),A.emit("resized",h),u||o(C)}function X(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,D,t);for(let e in a)A.setvar(e,a[e])}if(I){if(l.__litecanvas)throw"global litecanvas already instantiated";Object.assign(l,A),l.__litecanvas=A}return d="string"==typeof d?document.querySelector(d):d,A.setvar("CANVAS",d),g=d.getContext("2d"),s(d,"click",()=>l.focus()),d.style="",A.WIDTH||(A.WIDTH=l.innerWidth,A.HEIGHT=l.innerHeight),A.resize(A.WIDTH,A.HEIGHT,!1),d.parentNode||document.body.appendChild(d),"loading"===document.readyState?s(l,"DOMContentLoaded",()=>o(k)):o(k),A}})();

package/package.json

@@ -1,14 +1,14 @@
 {
     "name": "litecanvas",
-    "version": "0.75.1",
+    "version": "0.76.0",
     "description": "Lightweight HTML5 canvas game engine suitable for small projects and creative coding. Inspired by PICO-8 and P5/Processing.",
     "license": "MIT",
     "author": "Luiz Bills <luizbills@pm.me>",
     "contributors": [],
     "devDependencies": {
-        "@swc/core": "^1.11.7",
+        "@swc/core": "^1.11.8",
         "ava": "^6.2.0",
-        "esbuild": "^0.25.0",
+        "esbuild": "^0.25.1",
         "gzip-size": "^7.0.0",
         "prettier": "^3.5.3"
     },

package/src/index.js

@@ -26,7 +26,6 @@ export default function litecanvas(settings = {}) {
         isFinite = Number.isFinite,
         /** @type {LitecanvasOptions} */
         defaults = {
-            fullscreen: true,
             width: null,
             height: null,
             autoscale: true,
@@ -51,8 +50,6 @@ export default function litecanvas(settings = {}) {
         /** @type {HTMLCanvasElement|string} _canvas */
         _canvas = settings.canvas || document.createElement('canvas'),
         /** @type {boolean} */
-        _fullscreen = settings.fullscreen,
-        /** @type {boolean} */
         _autoscale = settings.autoscale,
         /** @type {boolean} */
         _animated = settings.animate,
@@ -1069,10 +1066,11 @@ export default function litecanvas(settings = {}) {
                 'string' === typeof eventName,
                 'emit: 1st param must be a string'
             )
-
-            triggerEvent('before:' + eventName, arg1, arg2, arg3, arg4)
-            triggerEvent(eventName, arg1, arg2, arg3, arg4)
-            triggerEvent('after:' + eventName, arg1, arg2, arg3, arg4)
+            if (_initialized) {
+                triggerEvent('before:' + eventName, arg1, arg2, arg3, arg4)
+                triggerEvent(eventName, arg1, arg2, arg3, arg4)
+                triggerEvent('after:' + eventName, arg1, arg2, arg3, arg4)
+            }
         },
 
         /**
@@ -1118,12 +1116,22 @@ export default function litecanvas(settings = {}) {
          * @param {number} height
          */
         resize(width, height) {
-            DEV: assert(isFinite(width), 'resize: 1st param must be a number')
-            DEV: assert(isFinite(height), 'resize: 2nd param must be a number')
+            DEV: assert(
+                isFinite(width) && width > 0,
+                'resize: 1st param must be a number'
+            )
+            DEV: assert(
+                isFinite(height) && height > 0,
+                'resize: 2nd param must be a number'
+            )
 
             instance.setvar('WIDTH', (_canvas.width = width))
             instance.setvar('HEIGHT', (_canvas.height = height))
-            pageResized()
+
+            instance.setvar('CENTERX', instance.WIDTH / 2)
+            instance.setvar('CENTERY', instance.HEIGHT / 2)
+
+            onResize()
         },
 
         /**
@@ -1184,7 +1192,7 @@ export default function litecanvas(settings = {}) {
     function init() {
         _initialized = true
 
-        // add listeners for default events
+        // setup default event listeners
         const source = settings.loop ? settings.loop : root
         for (const event in _events) {
             if (source[event]) instance.listen(event, source[event])
@@ -1195,13 +1203,11 @@ export default function litecanvas(settings = {}) {
             loadPlugin(callback, config)
         }
 
-        // listen window resize event
-        if (_fullscreen || _autoscale) {
-            on(root, 'resize', pageResized)
+        // listen window resize event when "autoscale" is enabled
+        if (_autoscale) {
+            on(root, 'resize', onResize)
         }
 
-        pageResized()
-
         // default mouse/touch handlers
         if (settings.tapEvents) {
             const _getXY = (pageX, pageY) => [
@@ -1395,25 +1401,26 @@ export default function litecanvas(settings = {}) {
 
         _lastFrameTime = now
 
-        if (frameTime > _deltaTime * 30)
-            return console.log('skipping too long frame')
-
-        _accumulated += frameTime
+        if (frameTime > _deltaTime * 30) {
+            console.log('skipping too long frame')
+        } else {
+            _accumulated += frameTime
 
-        if (!_animated) {
-            _accumulated = _deltaTime
-        }
+            if (!_animated) {
+                _accumulated = _deltaTime
+            }
 
-        for (; _accumulated >= _deltaTime; _accumulated -= _deltaTime) {
-            instance.emit('update', _deltaTime * _timeScale)
-            instance.setvar(
-                'ELAPSED',
-                instance.ELAPSED + _deltaTime * _timeScale
-            )
-            updated++
+            for (; _accumulated >= _deltaTime; _accumulated -= _deltaTime) {
+                instance.emit('update', _deltaTime * _timeScale)
+                instance.setvar(
+                    'ELAPSED',
+                    instance.ELAPSED + _deltaTime * _timeScale
+                )
+                updated++
+            }
         }
 
-        if (updated) {
+        if (updated || !_animated) {
             instance.textalign('start', 'top') // default values for textAlign & textBaseline
             instance.emit('draw')
         }
@@ -1431,57 +1438,56 @@ export default function litecanvas(settings = {}) {
             'Invalid canvas element'
         )
         DEV: assert(
-            null === instance.WIDTH || instance.WIDTH > 0,
+            null == instance.WIDTH || instance.WIDTH > 0,
             'Litecanvas\' "width" option should be null or a positive number'
         )
         DEV: assert(
-            null === instance.HEIGHT || instance.HEIGHT > 0,
+            null == instance.HEIGHT || instance.HEIGHT > 0,
             'Litecanvas\' "width" option should be null or a positive number'
         )
+        DEV: assert(
+            null == instance.HEIGHT ||
+                (instance.WIDTH > 0 && instance.HEIGHT > 0),
+            'Litecanvas\' "width" is required when "heigth" is passed'
+        )
 
         instance.setvar('CANVAS', _canvas)
         _ctx = _canvas.getContext('2d')
 
         on(_canvas, 'click', () => root.focus())
 
-        // disable fullscreen if a width is specified
-        if (instance.WIDTH > 0) {
-            _fullscreen = false
+        _canvas.style = ''
+
+        // If width is not set, the canvas will have the size of the page width.
+        if (!instance.WIDTH) {
+            instance.WIDTH = root.innerWidth
+            instance.HEIGHT = root.innerHeight
         }
 
-        _canvas.style = ''
-        _canvas.width = instance.WIDTH
-        _canvas.height = instance.HEIGHT || instance.WIDTH
+        instance.resize(instance.WIDTH, instance.HEIGHT, false)
 
         if (!_canvas.parentNode) document.body.appendChild(_canvas)
     }
 
-    function pageResized() {
-        const pageWidth = root.innerWidth,
-            pageHeight = root.innerHeight,
-            styles = _canvas.style
+    function onResize() {
+        const styles = _canvas.style
 
-        styles.display = 'block'
+        if (_autoscale) {
+            if (!styles.display) {
+                styles.display = 'block'
+                styles.margin = 'auto'
+            }
 
-        if (_fullscreen) {
-            styles.position = 'absolute'
-            styles.inset = 0
-            instance.setvar('WIDTH', (_canvas.width = pageWidth))
-            instance.setvar('HEIGHT', (_canvas.height = pageHeight))
-        } else if (_autoscale) {
-            styles.margin = 'auto'
             _scale = Math.min(
-                pageWidth / instance.WIDTH,
-                pageHeight / instance.HEIGHT
+                root.innerWidth / instance.WIDTH,
+                root.innerHeight / instance.HEIGHT
             )
             _scale = (settings.pixelart ? ~~_scale : _scale) || 1
+
             styles.width = instance.WIDTH * _scale + 'px'
             styles.height = instance.HEIGHT * _scale + 'px'
         }
 
-        instance.setvar('CENTERX', instance.WIDTH / 2)
-        instance.setvar('CENTERY', instance.HEIGHT / 2)
-
         // restore canvas image rendering properties
         if (!settings.antialias || settings.pixelart) {
             _ctx.imageSmoothingEnabled = false
@@ -1490,6 +1496,7 @@ export default function litecanvas(settings = {}) {
 
         instance.emit('resized', _scale)
 
+        // force redraw
         if (!_animated) {
             raf(drawFrame)
         }

package/src/types.js

@@ -1,8 +1,6 @@
 /**
  * @typedef LitecanvasOptions
  * @type {object}
- * @property {number} [fps=60]
- * @property {boolean} [fullscreen=true]
  * @property {number} [width]
  * @property {number} [height]
  * @property {boolean} [pauseOnBlur=true]

package/types/types.d.ts

@@ -579,15 +579,7 @@ type LitecanvasInstance = {
 
 type LitecanvasOptions = {
     /**
-     * target FPS
-     */
-    fps?: number
-    /**
-     * Makes the canvas fills the entire page. By default is `true`.
-     */
-    fullscreen?: boolean
-    /**
-     * The game screen width. If specified, disables fullscreen.
+     * The game screen width. If not set, the canvas will have the size of the webpage.
      */
     width?: number
     /**