litecanvas 0.94.0 → 0.95.0

package/dist/dist.dev.js

@@ -32,18 +32,18 @@
   };
 
   // src/version.js
-  var version = "0.94.0";
+  var version = "0.95.0";
 
   // src/index.js
   function litecanvas(settings = {}) {
     const root = window, math = Math, TWO_PI = math.PI * 2, raf = requestAnimationFrame, _browserEventListeners = [], on = (elem, evt, callback) => {
       elem.addEventListener(evt, callback, false);
       _browserEventListeners.push(() => elem.removeEventListener(evt, callback, false));
-    }, beginPath = (c) => c.beginPath(), isNumber = Number.isFinite, zzfx = setupZzFX(root), defaults = {
+    }, preventDefault = (ev) => ev.preventDefault(), beginPath = (c) => c.beginPath(), isNumber = Number.isFinite, zzfx = setupZzFX(root), defaults = {
       width: null,
       height: null,
       autoscale: true,
-      pixelart: false,
+      pixelart: true,
       canvas: null,
       global: true,
       loop: null,
@@ -52,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, _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, _fpsInterval = 1e3 / 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,
@@ -958,7 +958,7 @@
           isNumber(value) && value >= 1,
           "[litecanvas] framerate() 1st param must be a positive number"
         );
-        _deltaTime = 1 / ~~value;
+        _fpsInterval = 1e3 / ~~value;
       },
       /**
        * Returns information about that engine instance.
@@ -974,7 +974,7 @@
           // 1
           _initialized,
           // 2
-          _deltaTime,
+          _fpsInterval / 1e3,
           // 3
           _scale,
           // 4
@@ -1028,8 +1028,8 @@
        */
       resume() {
         if (_initialized && !_rafid) {
-          _accumulated = _deltaTime;
-          _lastFrameTime = performance.now();
+          _accumulated = _fpsInterval;
+          _lastFrameTime = Date.now();
           _rafid = raf(drawFrame);
         }
       },
@@ -1085,7 +1085,7 @@
               // initial y
               yi: y,
               // timestamp
-              t: performance.now()
+              t: Date.now()
             };
             _taps.set(id, tap);
             return tap;
@@ -1105,12 +1105,7 @@
           /**
            * @param {{t: number}} tap
            */
-          (tap) => tap && performance.now() - tap.t <= 300
-        ), preventDefault = (
-          /**
-           * @param {Event} ev
-           */
-          (ev) => ev.preventDefault()
+          (tap) => tap && Date.now() - tap.t <= 300
         );
         let _pressingMouse = false;
         on(
@@ -1231,11 +1226,13 @@
           key = key.toLowerCase();
           return !key ? keySet.size > 0 : keySet.has("space" === key ? " " : key);
         };
+        let _lastKey = "";
         on(root, "keydown", (event) => {
           const key = event.key.toLowerCase();
           if (!_keysDown.has(key)) {
             _keysDown.add(key);
             _keysPress.add(key);
+            _lastKey = key === " " ? "space" : key;
           }
         });
         on(root, "keyup", (event) => {
@@ -1246,9 +1243,6 @@
         instance.def(
           "iskeydown",
           /**
-           * Checks if a which key is pressed (down) on the keyboard.
-           * Note: use `iskeydown()` to check for any key.
-           *
            * @param {string} [key]
            * @returns {boolean}
            */
@@ -1263,9 +1257,6 @@
         instance.def(
           "iskeypressed",
           /**
-           * Checks if a which key just got pressed on the keyboard.
-           * Note: use `iskeypressed()` to check for any key.
-           *
            * @param {string} [key]
            * @returns {boolean}
            */
@@ -1277,38 +1268,44 @@
             return keyCheck(_keysPress, key);
           }
         );
+        instance.def(
+          "lastkey",
+          /**
+           * @returns {string}
+           */
+          () => _lastKey
+        );
       }
-      setInterval(() => {
-        if (_rafid) {
-          instance.pause();
-          instance.resume();
-        }
-      }, 5e3);
       _initialized = true;
       instance.emit("init", instance);
       instance.resume();
     }
-    function drawFrame(now) {
+    function drawFrame() {
       if (!settings.animate) {
         return instance.emit("draw", _ctx);
-      } else if (_rafid) {
-        _rafid = raf(drawFrame);
       }
+      let now = Date.now();
       let updated = 0;
-      let frameTime = (now - _lastFrameTime) / 1e3;
+      let frameTime = now - _lastFrameTime;
       _lastFrameTime = now;
-      if (frameTime < 0.1) {
-        _accumulated += frameTime;
-        while (_accumulated >= _deltaTime) {
-          updated++;
-          instance.emit("update", _deltaTime * _timeScale, updated);
-          instance.def("T", instance.T + _deltaTime * _timeScale);
-          _accumulated -= _deltaTime;
-        }
+      _accumulated += frameTime < 100 ? frameTime : _fpsInterval;
+      while (_accumulated >= _fpsInterval) {
+        updated++;
+        _accumulated -= _fpsInterval;
+        let dt = _fpsInterval / 1e3 * _timeScale;
+        instance.emit("update", dt, updated);
+        instance.def("T", instance.T + dt);
       }
       if (updated) {
         instance.emit("draw", _ctx);
+        if (updated > 1) {
+          _accumulated = 0;
+          DEV: console.warn(
+            "[litecanvas] the last frame updated " + updated + " times. This can drop the FPS if it keeps happening."
+          );
+        }
       }
+      _rafid = raf(drawFrame);
     }
     function setupCanvas() {
       if ("string" === typeof settings.canvas) {

package/dist/dist.js

@@ -31,11 +31,11 @@
     const root = window, math = Math, TWO_PI = math.PI * 2, raf = requestAnimationFrame, _browserEventListeners = [], on = (elem, evt, callback) => {
       elem.addEventListener(evt, callback, false);
       _browserEventListeners.push(() => elem.removeEventListener(evt, callback, false));
-    }, beginPath = (c) => c.beginPath(), isNumber = Number.isFinite, zzfx = setupZzFX(root), defaults = {
+    }, preventDefault = (ev) => ev.preventDefault(), beginPath = (c) => c.beginPath(), isNumber = Number.isFinite, zzfx = setupZzFX(root), defaults = {
       width: null,
       height: null,
       autoscale: true,
-      pixelart: false,
+      pixelart: true,
       canvas: null,
       global: true,
       loop: null,
@@ -44,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, _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, _fpsInterval = 1e3 / 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,
@@ -663,7 +663,7 @@
        * @param {number} value
        */
       framerate(value) {
-        _deltaTime = 1 / ~~value;
+        _fpsInterval = 1e3 / ~~value;
       },
       /**
        * Returns information about that engine instance.
@@ -678,7 +678,7 @@
           // 1
           _initialized,
           // 2
-          _deltaTime,
+          _fpsInterval / 1e3,
           // 3
           _scale,
           // 4
@@ -732,8 +732,8 @@
        */
       resume() {
         if (_initialized && !_rafid) {
-          _accumulated = _deltaTime;
-          _lastFrameTime = performance.now();
+          _accumulated = _fpsInterval;
+          _lastFrameTime = Date.now();
           _rafid = raf(drawFrame);
         }
       },
@@ -786,7 +786,7 @@
               // initial y
               yi: y,
               // timestamp
-              t: performance.now()
+              t: Date.now()
             };
             _taps.set(id, tap);
             return tap;
@@ -806,12 +806,7 @@
           /**
            * @param {{t: number}} tap
            */
-          (tap) => tap && performance.now() - tap.t <= 300
-        ), preventDefault = (
-          /**
-           * @param {Event} ev
-           */
-          (ev) => ev.preventDefault()
+          (tap) => tap && Date.now() - tap.t <= 300
         );
         let _pressingMouse = false;
         on(
@@ -932,11 +927,13 @@
           key = key.toLowerCase();
           return !key ? keySet.size > 0 : keySet.has("space" === key ? " " : key);
         };
+        let _lastKey = "";
         on(root, "keydown", (event) => {
           const key = event.key.toLowerCase();
           if (!_keysDown.has(key)) {
             _keysDown.add(key);
             _keysPress.add(key);
+            _lastKey = key === " " ? "space" : key;
           }
         });
         on(root, "keyup", (event) => {
@@ -947,9 +944,6 @@
         instance.def(
           "iskeydown",
           /**
-           * Checks if a which key is pressed (down) on the keyboard.
-           * Note: use `iskeydown()` to check for any key.
-           *
            * @param {string} [key]
            * @returns {boolean}
            */
@@ -960,9 +954,6 @@
         instance.def(
           "iskeypressed",
           /**
-           * Checks if a which key just got pressed on the keyboard.
-           * Note: use `iskeypressed()` to check for any key.
-           *
            * @param {string} [key]
            * @returns {boolean}
            */
@@ -970,38 +961,41 @@
             return keyCheck(_keysPress, key);
           }
         );
+        instance.def(
+          "lastkey",
+          /**
+           * @returns {string}
+           */
+          () => _lastKey
+        );
       }
-      setInterval(() => {
-        if (_rafid) {
-          instance.pause();
-          instance.resume();
-        }
-      }, 5e3);
       _initialized = true;
       instance.emit("init", instance);
       instance.resume();
     }
-    function drawFrame(now) {
+    function drawFrame() {
       if (!settings.animate) {
         return instance.emit("draw", _ctx);
-      } else if (_rafid) {
-        _rafid = raf(drawFrame);
       }
+      let now = Date.now();
       let updated = 0;
-      let frameTime = (now - _lastFrameTime) / 1e3;
+      let frameTime = now - _lastFrameTime;
       _lastFrameTime = now;
-      if (frameTime < 0.1) {
-        _accumulated += frameTime;
-        while (_accumulated >= _deltaTime) {
-          updated++;
-          instance.emit("update", _deltaTime * _timeScale, updated);
-          instance.def("T", instance.T + _deltaTime * _timeScale);
-          _accumulated -= _deltaTime;
-        }
+      _accumulated += frameTime < 100 ? frameTime : _fpsInterval;
+      while (_accumulated >= _fpsInterval) {
+        updated++;
+        _accumulated -= _fpsInterval;
+        let dt = _fpsInterval / 1e3 * _timeScale;
+        instance.emit("update", dt, updated);
+        instance.def("T", instance.T + dt);
       }
       if (updated) {
         instance.emit("draw", _ctx);
+        if (updated > 1) {
+          _accumulated = 0;
+        }
       }
+      _rafid = raf(drawFrame);
     }
     function setupCanvas() {
       if ("string" === typeof settings.canvas) {

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

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "litecanvas",
-    "version": "0.94.0",
+    "version": "0.95.0",
     "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>",
@@ -33,7 +33,7 @@
     "devDependencies": {
         "@litecanvas/jsdom-extras": "^2.0.1",
         "@size-limit/preset-small-lib": "^11.2.0",
-        "@swc/core": "^1.13.1",
+        "@swc/core": "^1.13.2",
         "@types/jsdom": "^21.1.7",
         "ava": "^6.4.1",
         "esbuild": "^0.25.8",

package/src/index.js

@@ -23,6 +23,8 @@ export default function litecanvas(settings = {}) {
             elem.addEventListener(evt, callback, false)
             _browserEventListeners.push(() => elem.removeEventListener(evt, callback, false))
         },
+        /** @type {(ev: Event) => void} */
+        preventDefault = (ev) => ev.preventDefault(),
         /** @type {(c: CanvasRenderingContext2D | OffscreenCanvasRenderingContext2D) => void} */
         beginPath = (c) => c.beginPath(),
         isNumber = Number.isFinite,
@@ -32,7 +34,7 @@ export default function litecanvas(settings = {}) {
             width: null,
             height: null,
             autoscale: true,
-            pixelart: false,
+            pixelart: true,
             canvas: null,
             global: true,
             loop: null,
@@ -61,7 +63,7 @@ export default function litecanvas(settings = {}) {
         /** @type {number} */
         _lastFrameTime,
         /** @type {number} duration of a frame at 60 FPS (default) */
-        _deltaTime = 1 / 60,
+        _fpsInterval = 1000 / 60,
         /** @type {number} */
         _accumulated,
         /** @type {number?} */
@@ -1120,7 +1122,7 @@ export default function litecanvas(settings = {}) {
                 '[litecanvas] framerate() 1st param must be a positive number'
             )
 
-            _deltaTime = 1 / ~~value
+            _fpsInterval = 1000 / ~~value
         },
 
         /**
@@ -1138,7 +1140,7 @@ export default function litecanvas(settings = {}) {
                 // 1
                 _initialized,
                 // 2
-                _deltaTime,
+                _fpsInterval / 1000,
                 // 3
                 _scale,
                 // 4
@@ -1210,8 +1212,8 @@ export default function litecanvas(settings = {}) {
          */
         resume() {
             if (_initialized && !_rafid) {
-                _accumulated = _deltaTime
-                _lastFrameTime = performance.now()
+                _accumulated = _fpsInterval
+                _lastFrameTime = Date.now()
                 _rafid = raf(drawFrame)
             }
         },
@@ -1280,7 +1282,7 @@ export default function litecanvas(settings = {}) {
                             // initial y
                             yi: y,
                             // timestamp
-                            t: performance.now(),
+                            t: Date.now(),
                         }
                         _taps.set(id, tap)
                         return tap
@@ -1300,12 +1302,7 @@ export default function litecanvas(settings = {}) {
                     /**
                      * @param {{t: number}} tap
                      */
-                    (tap) => tap && performance.now() - tap.t <= 300,
-                preventDefault =
-                    /**
-                     * @param {Event} ev
-                     */
-                    (ev) => ev.preventDefault()
+                    (tap) => tap && Date.now() - tap.t <= 300
 
             let _pressingMouse = false
 
@@ -1454,11 +1451,15 @@ export default function litecanvas(settings = {}) {
                 return !key ? keySet.size > 0 : keySet.has('space' === key ? ' ' : key)
             }
 
+            /** @type {string} */
+            let _lastKey = ''
+
             on(root, 'keydown', (/** @type {KeyboardEvent} */ event) => {
                 const key = event.key.toLowerCase()
                 if (!_keysDown.has(key)) {
                     _keysDown.add(key)
                     _keysPress.add(key)
+                    _lastKey = key === ' ' ? 'space' : key
                 }
             })
 
@@ -1472,9 +1473,6 @@ export default function litecanvas(settings = {}) {
             instance.def(
                 'iskeydown',
                 /**
-                 * Checks if a which key is pressed (down) on the keyboard.
-                 * Note: use `iskeydown()` to check for any key.
-                 *
                  * @param {string} [key]
                  * @returns {boolean}
                  */
@@ -1490,9 +1488,6 @@ export default function litecanvas(settings = {}) {
             instance.def(
                 'iskeypressed',
                 /**
-                 * Checks if a which key just got pressed on the keyboard.
-                 * Note: use `iskeypressed()` to check for any key.
-                 *
                  * @param {string} [key]
                  * @returns {boolean}
                  */
@@ -1504,16 +1499,15 @@ export default function litecanvas(settings = {}) {
                     return keyCheck(_keysPress, key)
                 }
             )
-        }
 
-        // this seems to solve a wierd bug that drop the FPS
-        // when switching tabs in the browser
-        setInterval(() => {
-            if (_rafid) {
-                instance.pause()
-                instance.resume()
-            }
-        }, 5000)
+            instance.def(
+                'lastkey',
+                /**
+                 * @returns {string}
+                 */
+                () => _lastKey
+            )
+        }
 
         // start the engine
         _initialized = true
@@ -1521,37 +1515,42 @@ export default function litecanvas(settings = {}) {
         instance.resume()
     }
 
-    /**
-     * @param {DOMHighResTimeStamp} now
-     */
-    function drawFrame(now) {
+    function drawFrame() {
         if (!settings.animate) {
             return instance.emit('draw', _ctx)
         }
-        // request the next frame
-        // only when the engine loop are not paused (_rafid >= 1)
-        else if (_rafid) {
-            _rafid = raf(drawFrame)
-        }
 
+        let now = Date.now()
         let updated = 0
-        let frameTime = (now - _lastFrameTime) / 1000
+        let frameTime = now - _lastFrameTime
 
         _lastFrameTime = now
+        _accumulated += frameTime < 100 ? frameTime : _fpsInterval
 
-        if (frameTime < 0.1) {
-            _accumulated += frameTime
-            while (_accumulated >= _deltaTime) {
-                updated++
-                instance.emit('update', _deltaTime * _timeScale, updated)
-                instance.def('T', instance.T + _deltaTime * _timeScale)
-                _accumulated -= _deltaTime
-            }
+        while (_accumulated >= _fpsInterval) {
+            updated++
+            _accumulated -= _fpsInterval
+
+            let dt = (_fpsInterval / 1000) * _timeScale
+
+            instance.emit('update', dt, updated)
+            instance.def('T', instance.T + dt)
         }
 
         if (updated) {
             instance.emit('draw', _ctx)
+            if (updated > 1) {
+                _accumulated = 0
+                DEV: console.warn(
+                    '[litecanvas] the last frame updated ' +
+                        updated +
+                        ' times. This can drop the FPS if it keeps happening.'
+                )
+            }
         }
+
+        // request the next frame
+        _rafid = raf(drawFrame)
     }
 
     function setupCanvas() {

package/src/version.js

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

package/types/global.d.ts

@@ -477,7 +477,7 @@ declare global {
      */
     function volume(value: number): void
 
-    /** UTILS API */
+    /** KEYBOARD API */
     /**
      * Checks if a which key is pressed on the keyboard.
      * Note: use `iskeydown()` to check for any key pressed.
@@ -494,6 +494,12 @@ declare global {
      * @returns `true` if the which key was pressed
      */
     function iskeypressed(key: string): boolean
+    /**
+     * Returns the last pressed.
+     *
+     * @returns {string}
+     */
+    function lastkey(): string
 
     /** PLUGINS API */
     /**

package/types/types.d.ts

@@ -467,7 +467,7 @@ type LitecanvasInstance = {
      */
     volume(value: number): void
 
-    /** UTILS API */
+    /** KEYBOARD API */
     /**
      * Checks if a which key is pressed on the keyboard.
      * Note: use `iskeydown()` to check for any key pressed.
@@ -484,6 +484,12 @@ type LitecanvasInstance = {
      * @returns `true` if the which key was pressed
      */
     iskeypressed?(key: string): boolean
+    /**
+     * Returns the last pressed.
+     *
+     * @returns {string}
+     */
+    lastkey?(): string
 
     /** PLUGINS API */
     /**
@@ -603,7 +609,7 @@ type LitecanvasOptions = {
      * If `true`, the pixel art images won't look blurry.
      * Also, disables canvas built-in antialias.
      *
-     * Default: `false`
+     * Default: `true`
      */
     pixelart?: boolean
     /**
@@ -613,16 +619,17 @@ type LitecanvasOptions = {
     /**
      * Specify your game loop callbacks.
      * By default use that global functions (if they exist):
-     * - `window.init(): void`
+     * - `window.init(instance: LitecanvasInstance): void`
      * - `window.update(dt: number): void`
-     * - `window.draw(): void`
-     * - `window.resized(): void`
-     * - `window.tap(tapX: number, tapY: number, tapId: number): void`
-     * - `window.untap(tapX: number, tapY: number, tapId: number): void`
-     * - `window.tapped(tapX: number, tapY: number, tapId: number): void`
-     * - `window.tapping(tapX: number, tapY: number, tapId: number): void`
+     * - `window.draw(ctx: CanvasRenderingContext2D): void`
+     * - `window.resized(scale: number): void`
+     * - `window.tap(tapX: number, tapY: number, touchId: number): void`
+     * - `window.untap(tapX: number, tapY: number, touchId: number): void`
+     * - `window.tapped(tapX: number, tapY: number, touchId: number): void`
+     * - `window.tapping(tapX: number, tapY: number, touchId: number): void`
      */
     loop?: LitecanvasGameLoop
+
     /**
      * default: `true`
      *
@@ -652,10 +659,10 @@ type LitecanvasGameLoop = {
     update?: (dt: number) => void
     draw?: () => void
     resized?: () => void
-    tap?: (tapX: number, tapY: number, tapId: number) => void
-    untap?: (tapX: number, tapY: number, tapId: number) => void
-    tapped?: (tapX: number, tapY: number, tapId: number) => void
-    tapping?: (tapX: number, tapY: number, tapId: number) => void
+    tap?: (tapX: number, tapY: number, touchId: number) => void
+    untap?: (tapX: number, tapY: number, touchId: number) => void
+    tapped?: (tapX: number, tapY: number, touchId: number) => void
+    tapping?: (tapX: number, tapY: number, touchId: number) => void
 }
 
 type drawCallback = (context: OffscreenCanvasRenderingContext2D) => void