litecanvas 0.87.0 → 0.88.0

package/dist/dist.dev.js

@@ -32,14 +32,14 @@
   };
 
   // version.js
-  var version = "0.87.0";
+  var version = "0.88.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));
-    }, isNumber = Number.isFinite, zzfx = setupZzFX(root), defaults = {
+    }, beginPath = (c) => c.beginPath(), isNumber = Number.isFinite, zzfx = setupZzFX(root), defaults = {
       width: null,
       height: null,
       autoscale: true,
@@ -339,7 +339,7 @@
           null == radii || isNumber(radii) || Array.isArray(radii) && radii.length >= 1,
           "[litecanvas] rect() 6th param must be a number or array of numbers"
         );
-        _ctx.beginPath();
+        beginPath(_ctx);
         _ctx[radii ? "roundRect" : "rect"](
           ~~x - _outline_fix,
           ~~y - _outline_fix,
@@ -378,7 +378,7 @@
           null == radii || isNumber(radii) || Array.isArray(radii) && radii.length >= 1,
           "[litecanvas] rectfill() 6th param must be a number or array of at least 2 numbers"
         );
-        _ctx.beginPath();
+        beginPath(_ctx);
         _ctx[radii ? "roundRect" : "rect"](~~x, ~~y, ~~width, ~~height, radii);
         instance.fill(color);
       },
@@ -401,7 +401,7 @@
           null == color || isNumber(color) && color >= 0,
           "[litecanvas] circ() 4th param must be a positive number or zero"
         );
-        _ctx.beginPath();
+        beginPath(_ctx);
         _ctx.arc(~~x, ~~y, ~~radius, 0, TWO_PI);
         instance.stroke(color);
       },
@@ -424,7 +424,7 @@
           null == color || isNumber(color) && color >= 0,
           "[litecanvas] circfill() 4th param must be a positive number or zero"
         );
-        _ctx.beginPath();
+        beginPath(_ctx);
         _ctx.arc(~~x, ~~y, ~~radius, 0, TWO_PI);
         instance.fill(color);
       },
@@ -452,7 +452,7 @@
           null == color || isNumber(color) && color >= 0,
           "[litecanvas] oval() 5th param must be a positive number or zero"
         );
-        _ctx.beginPath();
+        beginPath(_ctx);
         _ctx.ellipse(~~x, ~~y, ~~radiusX, ~~radiusY, 0, 0, TWO_PI);
         instance.stroke(color);
       },
@@ -480,7 +480,7 @@
           null == color || isNumber(color) && color >= 0,
           "[litecanvas] ovalfill() 5th param must be a positive number or zero"
         );
-        _ctx.beginPath();
+        beginPath(_ctx);
         _ctx.ellipse(~~x, ~~y, ~~radiusX, ~~radiusY, 0, 0, TWO_PI);
         instance.fill(color);
       },
@@ -508,7 +508,7 @@
           null == color || isNumber(color) && color >= 0,
           "[litecanvas] line() 5th param must be a positive number or zero"
         );
-        _ctx.beginPath();
+        beginPath(_ctx);
         let xfix = _outline_fix !== 0 && ~~x1 === ~~x2 ? 0.5 : 0;
         let yfix = _outline_fix !== 0 && ~~y1 === ~~y2 ? 0.5 : 0;
         _ctx.moveTo(~~x1 + xfix, ~~y1 + yfix);
@@ -752,79 +752,45 @@
         _ctx.globalAlpha = instance.clamp(value, 0, 1);
       },
       /**
-       * Returns a newly instantiated Path2D object, optionally with another
-       * path as an argument (creates a copy), or optionally with a string
-       * consisting of SVG path data.
-       *
-       * @param {Path2D|string} [arg]
-       * @returns Path2D
-       * @see https://developer.mozilla.org/en-US/docs/Web/API/Path2D/Path2D
-       */
-      path: (arg) => {
-        DEV: assert(
-          null == arg || "string" === typeof arg || arg instanceof Path2D,
-          "[litecanvas] path() 1st param must be a string or a Path2D instance"
-        );
-        return new Path2D(arg);
-      },
-      /**
-       * Fills the current or given path with a given color.
+       * Fills the current path with a given color.
        *
        * @param {number} [color=0]
-       * @param {Path2D} [path]
        */
-      fill(color, path) {
+      fill(color) {
         DEV: assert(
           null == color || isNumber(color) && color >= 0,
           "[litecanvas] fill() 1st param must be a positive number or zero"
         );
-        DEV: assert(
-          null == path || path instanceof Path2D,
-          "[litecanvas] fill() 2nd param must be a Path2D instance"
-        );
         _ctx.fillStyle = _colors[~~color % _colors.length];
-        if (path) {
-          _ctx.fill(path);
-        } else {
-          _ctx.fill();
-        }
+        _ctx.fill();
       },
       /**
-       * Outlines the current or given path with a given color.
+       * Outlines the current path with a given color.
        *
        * @param {number} [color=0]
-       * @param {Path2D} [path]
        */
-      stroke(color, path) {
+      stroke(color) {
         DEV: assert(
           null == color || isNumber(color) && color >= 0,
           "[litecanvas] stroke() 1st param must be a positive number or zero"
         );
-        DEV: assert(
-          null == path || path instanceof Path2D,
-          "[litecanvas] stroke() 2nd param must be a Path2D instance"
-        );
         _ctx.strokeStyle = _colors[~~color % _colors.length];
-        if (path) {
-          _ctx.stroke(path);
-        } else {
-          _ctx.stroke();
-        }
+        _ctx.stroke();
       },
       /**
-       * Turn given path into a clipping region.
-       *
-       * Note: always call `push()` before and `pop()` after.
+       * Turns a path (in the callback) into the current clipping region.
        *
-       * @param {Path2D} path
+       * @param {clipCallback} callback
        * @see https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/clip
        */
-      clip(path) {
+      clip(callback) {
         DEV: assert(
-          path instanceof Path2D,
-          "[litecanvas] clip() 1st param must be a Path2D instance"
+          "function" === typeof callback,
+          "[litecanvas] clip() 1st param must be a function"
         );
-        _ctx.clip(path);
+        beginPath(_ctx);
+        callback(_ctx);
+        _ctx.clip();
       },
       /** SOUND API */
       /**
@@ -1007,7 +973,7 @@
           // 1
           _initialized,
           // 2
-          _rafid,
+          _deltaTime,
           // 3
           _scale,
           // 4
@@ -1036,8 +1002,7 @@
        * Stops the litecanvas instance and remove all event listeners.
        */
       quit() {
-        cancelAnimationFrame(_rafid);
-        _rafid = 0;
+        instance.pause();
         instance.emit("quit");
         _eventListeners = {};
         for (const removeListener of _browserEventListeners) {
@@ -1050,6 +1015,29 @@
           delete root.ENGINE;
         }
         _initialized = false;
+      },
+      /**
+       * Pauses the engine loop (update & draw).
+       */
+      pause() {
+        cancelAnimationFrame(_rafid);
+        _rafid = 0;
+      },
+      /**
+       * Resumes (if paused) the engine loop.
+       */
+      resume() {
+        if (!_rafid && _initialized) {
+          _rafid = raf(drawFrame);
+        }
+      },
+      /**
+       * Returns `true` if the engine loop is paused.
+       *
+       * @returns {boolean}
+       */
+      paused() {
+        return !_rafid;
       }
     };
     for (const k of _mathFunctions.split(",")) {
@@ -1282,30 +1270,32 @@
       }
       _initialized = true;
       instance.emit("init", instance);
+      instance.textalign("start", "top");
       _lastFrameTime = performance.now();
-      _rafid = raf(drawFrame);
+      instance.resume();
     }
     function drawFrame(now) {
+      if (!settings.animate) {
+        return instance.emit("draw");
+      }
       let updated = 0;
-      if (settings.animate) {
-        _accumulated += math.min(0.1, (now - _lastFrameTime) / 1e3);
-        _lastFrameTime = now;
+      let frameTime = (now - _lastFrameTime) / 1e3;
+      _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;
         }
-        if (_rafid) {
-          _rafid = raf(drawFrame);
-        }
-      } else {
-        updated = 1;
       }
       if (updated) {
-        instance.textalign("start", "top");
         instance.emit("draw");
       }
+      if (_rafid) {
+        _rafid = raf(drawFrame);
+      }
     }
     function setupCanvas() {
       if ("string" === typeof settings.canvas) {

package/dist/dist.js

@@ -31,7 +31,7 @@
     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));
-    }, isNumber = Number.isFinite, zzfx = setupZzFX(root), defaults = {
+    }, beginPath = (c) => c.beginPath(), isNumber = Number.isFinite, zzfx = setupZzFX(root), defaults = {
       width: null,
       height: null,
       autoscale: true,
@@ -246,7 +246,7 @@
        * @see https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/roundRect
        */
       rect(x, y, width, height, color, radii) {
-        _ctx.beginPath();
+        beginPath(_ctx);
         _ctx[radii ? "roundRect" : "rect"](
           ~~x - _outline_fix,
           ~~y - _outline_fix,
@@ -267,7 +267,7 @@
        * @param {number|number[]} [radii] A number or list specifying the radii used to draw a rounded-borders rectangle
        */
       rectfill(x, y, width, height, color, radii) {
-        _ctx.beginPath();
+        beginPath(_ctx);
         _ctx[radii ? "roundRect" : "rect"](~~x, ~~y, ~~width, ~~height, radii);
         instance.fill(color);
       },
@@ -280,7 +280,7 @@
        * @param {number} [color=0] the color index
        */
       circ(x, y, radius, color) {
-        _ctx.beginPath();
+        beginPath(_ctx);
         _ctx.arc(~~x, ~~y, ~~radius, 0, TWO_PI);
         instance.stroke(color);
       },
@@ -293,7 +293,7 @@
        * @param {number} [color=0] the color index
        */
       circfill(x, y, radius, color) {
-        _ctx.beginPath();
+        beginPath(_ctx);
         _ctx.arc(~~x, ~~y, ~~radius, 0, TWO_PI);
         instance.fill(color);
       },
@@ -307,7 +307,7 @@
        * @param {number} [color=0] the color index
        */
       oval(x, y, radiusX, radiusY, color) {
-        _ctx.beginPath();
+        beginPath(_ctx);
         _ctx.ellipse(~~x, ~~y, ~~radiusX, ~~radiusY, 0, 0, TWO_PI);
         instance.stroke(color);
       },
@@ -321,7 +321,7 @@
        * @param {number} [color=0] the color index
        */
       ovalfill(x, y, radiusX, radiusY, color) {
-        _ctx.beginPath();
+        beginPath(_ctx);
         _ctx.ellipse(~~x, ~~y, ~~radiusX, ~~radiusY, 0, 0, TWO_PI);
         instance.fill(color);
       },
@@ -335,7 +335,7 @@
        * @param {number} [color=0] the color index
        */
       line(x1, y1, x2, y2, color) {
-        _ctx.beginPath();
+        beginPath(_ctx);
         let xfix = _outline_fix !== 0 && ~~x1 === ~~x2 ? 0.5 : 0;
         let yfix = _outline_fix !== 0 && ~~y1 === ~~y2 ? 0.5 : 0;
         _ctx.moveTo(~~x1 + xfix, ~~y1 + yfix);
@@ -517,55 +517,33 @@
         _ctx.globalAlpha = instance.clamp(value, 0, 1);
       },
       /**
-       * Returns a newly instantiated Path2D object, optionally with another
-       * path as an argument (creates a copy), or optionally with a string
-       * consisting of SVG path data.
-       *
-       * @param {Path2D|string} [arg]
-       * @returns Path2D
-       * @see https://developer.mozilla.org/en-US/docs/Web/API/Path2D/Path2D
-       */
-      path: (arg) => {
-        return new Path2D(arg);
-      },
-      /**
-       * Fills the current or given path with a given color.
+       * Fills the current path with a given color.
        *
        * @param {number} [color=0]
-       * @param {Path2D} [path]
        */
-      fill(color, path) {
+      fill(color) {
         _ctx.fillStyle = _colors[~~color % _colors.length];
-        if (path) {
-          _ctx.fill(path);
-        } else {
-          _ctx.fill();
-        }
+        _ctx.fill();
       },
       /**
-       * Outlines the current or given path with a given color.
+       * Outlines the current path with a given color.
        *
        * @param {number} [color=0]
-       * @param {Path2D} [path]
        */
-      stroke(color, path) {
+      stroke(color) {
         _ctx.strokeStyle = _colors[~~color % _colors.length];
-        if (path) {
-          _ctx.stroke(path);
-        } else {
-          _ctx.stroke();
-        }
+        _ctx.stroke();
       },
       /**
-       * Turn given path into a clipping region.
+       * Turns a path (in the callback) into the current clipping region.
        *
-       * Note: always call `push()` before and `pop()` after.
-       *
-       * @param {Path2D} path
+       * @param {clipCallback} callback
        * @see https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/clip
        */
-      clip(path) {
-        _ctx.clip(path);
+      clip(callback) {
+        beginPath(_ctx);
+        callback(_ctx);
+        _ctx.clip();
       },
       /** SOUND API */
       /**
@@ -704,7 +682,7 @@
           // 1
           _initialized,
           // 2
-          _rafid,
+          _deltaTime,
           // 3
           _scale,
           // 4
@@ -733,8 +711,7 @@
        * Stops the litecanvas instance and remove all event listeners.
        */
       quit() {
-        cancelAnimationFrame(_rafid);
-        _rafid = 0;
+        instance.pause();
         instance.emit("quit");
         _eventListeners = {};
         for (const removeListener of _browserEventListeners) {
@@ -747,6 +724,29 @@
           delete root.ENGINE;
         }
         _initialized = false;
+      },
+      /**
+       * Pauses the engine loop (update & draw).
+       */
+      pause() {
+        cancelAnimationFrame(_rafid);
+        _rafid = 0;
+      },
+      /**
+       * Resumes (if paused) the engine loop.
+       */
+      resume() {
+        if (!_rafid && _initialized) {
+          _rafid = raf(drawFrame);
+        }
+      },
+      /**
+       * Returns `true` if the engine loop is paused.
+       *
+       * @returns {boolean}
+       */
+      paused() {
+        return !_rafid;
       }
     };
     for (const k of _mathFunctions.split(",")) {
@@ -968,30 +968,32 @@
       }
       _initialized = true;
       instance.emit("init", instance);
+      instance.textalign("start", "top");
       _lastFrameTime = performance.now();
-      _rafid = raf(drawFrame);
+      instance.resume();
     }
     function drawFrame(now) {
+      if (!settings.animate) {
+        return instance.emit("draw");
+      }
       let updated = 0;
-      if (settings.animate) {
-        _accumulated += math.min(0.1, (now - _lastFrameTime) / 1e3);
-        _lastFrameTime = now;
+      let frameTime = (now - _lastFrameTime) / 1e3;
+      _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;
         }
-        if (_rafid) {
-          _rafid = raf(drawFrame);
-        }
-      } else {
-        updated = 1;
       }
       if (updated) {
-        instance.textalign("start", "top");
         instance.emit("draw");
       }
+      if (_rafid) {
+        _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,n=Math,i=2*n.PI,l=requestAnimationFrame,o=[],r=(e,t,a)=>{e.addEventListener(t,a,!1),o.push(()=>e.removeEventListener(t,a,!1))},s=(e=>{let t=new AudioContext;return e.zzfxV=1,(a=1,n=.05,i=220,l=0,o=0,r=.1,s=0,f=1,c=0,d=0,p=0,u=0,h=0,g=0,m=0,v=0,w=0,b=1,x=0,y=0,k=0)=>{let E=Math,z=2*E.PI,P=c*=500*z/44100/44100,T=i*=(1-n+2*n*E.random(n=[]))*z/44100,C=0,I=0,A=0,L=1,S=0,X=0,Y=0,M=k<0?-1:1,D=z*M*k*2/44100,N=E.cos(D),F=E.sin,q=F(D)/4,B=1+q,H=-2*N/B,O=(1-q)/B,V=(1+M*N)/2/B,W=-(M+N)/B,R=0,G=0,$=0,j=0;for(l=44100*l+9,x*=44100,o*=44100,r*=44100,w*=44100,d*=500*z/85766121e6,m*=z/44100,p*=z/44100,u*=44100,h=44100*h|0,a*=.3*e.zzfxV,M=l+x+o+r+w|0;A<M;n[A++]=Y*a)++X%(100*v|0)||(Y=s?1<s?2<s?3<s?F(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):F(C),Y=(h?1-y+y*F(z*A/h):1)*(Y<0?-1:1)*E.abs(Y)**f*(A<l?A/l:A<l+x?1-(A-l)/x*(1-b):A<l+x+o?b:A<M-w?(M-A-w)/r*b:0),Y=w?Y/2+(w>A?0:(A<M-w?1:(M-A)/w)*n[A-w|0]/2/a):Y,k&&(Y=j=V*R+W*(R=G)+V*(G=Y)-O*$-H*($=j))),C+=(D=(i+=c+=d)*E.cos(m*I++))+D*g*F(A**5),L&&++L>u&&(i+=p,T+=p,L=0),!h||++S%h||(i=T,c=P,L=L||1);(a=t.createBuffer(1,M,44100)).getChannelData(0).set(n),(i=t.createBufferSource()).buffer=a,i.connect(t.destination),i.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 f=!1,c=[],d,p=1,u,h=.5,g=1,m,v=1/60,w=0,b,x="sans-serif",y=20,k=Date.now(),E=e,z=[.5,0,1750,,,.3,1,,,,600,.1],P={},T={W:0,H:0,T:0,MX:-1,MY:-1,TWO_PI:i,HALF_PI:i/4,lerp:(e,t,a)=>a*(t-e)+e,deg2rad:e=>n.PI/180*e,rad2deg:e=>180/n.PI*e,round:(e,t=0)=>{if(!t)return n.round(e);let a=10**t;return n.round(e*a)/a},clamp:(e,t,a)=>e<t?t:e>a?a:e,wrap:(e,t,a)=>e-(a-t)*n.floor((e-t)/(a-t)),map(e,t,a,n,i,l){let o=(e-t)/(a-t)*(i-n)+n;return l?T.clamp(o,n,i):o},norm:(e,t,a)=>T.map(e,t,a,0,1),wave:(e,t,a,n=Math.sin)=>e+(n(a)+1)/2*(t-e),rand:(e=0,t=1)=>(k=(1664525*k+0x3c6ef35f)%0x100000000)/0x100000000*(t-e)+e,randi:(e=0,t=1)=>n.floor(T.rand(e,t+1)),rseed(e){k=~~e},cls(e){null==e?u.clearRect(0,0,u.canvas.width,u.canvas.height):T.rectfill(0,0,u.canvas.width,u.canvas.height,e)},rect(e,t,a,n,i,l){u.beginPath(),u[l?"roundRect":"rect"](~~e-h,~~t-h,~~a+2*h,~~n+2*h,l),T.stroke(i)},rectfill(e,t,a,n,i,l){u.beginPath(),u[l?"roundRect":"rect"](~~e,~~t,~~a,~~n,l),T.fill(i)},circ(e,t,a,n){u.beginPath(),u.arc(~~e,~~t,~~a,0,i),T.stroke(n)},circfill(e,t,a,n){u.beginPath(),u.arc(~~e,~~t,~~a,0,i),T.fill(n)},oval(e,t,a,n,l){u.beginPath(),u.ellipse(~~e,~~t,~~a,~~n,0,0,i),T.stroke(l)},ovalfill(e,t,a,n,l){u.beginPath(),u.ellipse(~~e,~~t,~~a,~~n,0,0,i),T.fill(l)},line(e,t,a,n,i){u.beginPath();let l=.5*(0!==h&&~~e==~~a),o=.5*(0!==h&&~~t==~~n);u.moveTo(~~e+l,~~t+o),u.lineTo(~~a+l,~~n+o),T.stroke(i)},linewidth(e){u.lineWidth=~~e,h=.5*(0!=~~e%2)},linedash(e,t=0){u.setLineDash(e),u.lineDashOffset=t},text(e,t,a,n=3,i="normal"){u.font=`${i} ${y}px ${x}`,u.fillStyle=E[~~n%E.length],u.fillText(a,~~e,~~t)},textfont(e){x=e},textsize(e){y=e},textalign(e,t){e&&(u.textAlign=e),t&&(u.textBaseline=t)},image(e,t,a){u.drawImage(a,~~e,~~t)},paint(e,t,a,n={}){let i=n.canvas||new OffscreenCanvas(1,1),l=n.scale||1,o=u;if(i.width=e*l,i.height=t*l,(u=i.getContext("2d")).scale(l,l),Array.isArray(a)){let e=0,t=0;for(let n of(u.imageSmoothingEnabled=!1,a)){for(let a of n)" "!==a&&"."!==a&&T.rectfill(e,t,1,1,parseInt(a,16)),e++;t++,e=0}}else a(u);return u=o,i.transferToImageBitmap()},ctx:e=>(e&&(u=e),u),push:()=>u.save(),pop:()=>u.restore(),translate:(e,t)=>u.translate(~~e,~~t),scale:(e,t)=>u.scale(e,t||e),rotate:e=>u.rotate(e),alpha(e){u.globalAlpha=T.clamp(e,0,1)},path:e=>new Path2D(e),fill(e,t){u.fillStyle=E[~~e%E.length],t?u.fill(t):u.fill()},stroke(e,t){u.strokeStyle=E[~~e%E.length],t?u.stroke(t):u.stroke()},clip(e){u.clip(e)},sfx:(e,t=0,n=1)=>!(a.zzfxV<=0)&&(!navigator.userActivation||!!navigator.userActivation.hasBeenActive)&&(e=e||z,(0!==t||1!==n)&&((e=e.slice())[0]=n*(e[0]||1),e[10]=~~e[10]+t),s.apply(0,e),e),volume(e){a.zzfxV=e},canvas:()=>d,use(e,t={}){f?S(e,t):c.push([e,t])},listen:(e,t)=>(P[e=e.toLowerCase()]=P[e]||new Set,P[e].add(t),()=>P&&P[e].delete(t)),emit(e,t,a,n,i){f&&(L("before:"+(e=e.toLowerCase()),t,a,n,i),L(e,t,a,n,i),L("after:"+e,t,a,n,i))},pal(t=e){E=t},def(e,n){T[e]=n,t.global&&(a[e]=n)},timescale(e){g=e},framerate(e){v=1/~~e},stat(e){let n={index:e,value:[t,f,b,p,P,E,z,g,a.zzfxV||1,k,y,x][e]};return T.emit("stat",n),n.value},quit(){for(let e of(cancelAnimationFrame(b),b=0,T.emit("quit"),P={},o))e();if(t.global){for(let e in T)delete a[e];delete a.ENGINE}f=!1}};for(let e of"PI,sin,cos,atan2,hypot,tan,abs,ceil,floor,trunc,min,max,pow,sqrt,sign,exp".split(","))T[e]=n[e];function C(){let e=t.loop?t.loop:a;for(let t of"init,update,draw,tap,untap,tapping,tapped,resized".split(","))e[t]&&T.listen(t,e[t]);for(let[e,t]of c)S(e,t);if(t.autoscale&&r(a,"resize",A),t.tapEvents){let e=(e,t)=>[(e-d.offsetLeft)/p,(t-d.offsetTop)/p],t=new Map,n=(e,a,n)=>{let i={x:a,y:n,startX:a,startY:n,ts:performance.now()};return t.set(e,i),i},i=(e,a,i)=>{let l=t.get(e)||n(e);l.x=a,l.y=i},l=e=>e&&performance.now()-e.ts<=300,o=e=>e.preventDefault(),s=!1;r(d,"mousedown",t=>{if(0===t.button){o(t);let[a,i]=e(t.pageX,t.pageY);T.emit("tap",a,i,0),n(0,a,i),s=!0}}),r(d,"mouseup",a=>{if(0===a.button){o(a);let n=t.get(0),[i,r]=e(a.pageX,a.pageY);l(n)&&T.emit("tapped",n.startX,n.startY,0),T.emit("untap",i,r,0),t.delete(0),s=!1}}),r(d,"mousemove",t=>{o(t);let[a,n]=e(t.pageX,t.pageY);T.def("MX",a),T.def("MY",n),s&&(T.emit("tapping",a,n,0),i(0,a,n))}),r(d,"touchstart",t=>{for(let a of(o(t),t.changedTouches)){let[t,i]=e(a.pageX,a.pageY);T.emit("tap",t,i,a.identifier+1),n(a.identifier+1,t,i)}}),r(d,"touchmove",t=>{for(let a of(o(t),t.changedTouches)){let[t,n]=e(a.pageX,a.pageY);T.emit("tapping",t,n,a.identifier+1),i(a.identifier+1,t,n)}});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,n]of t)a.includes(e)||(l(n)&&T.emit("tapped",n.startX,n.startY,e),T.emit("untap",n.x,n.y,e),t.delete(e))};r(d,"touchend",f),r(d,"touchcancel",f),r(a,"blur",()=>{for(let[e,a]of(s=!1,t))T.emit("untap",a.x,a.y,e),t.delete(e)})}if(t.keyboardEvents){let e=new Set,t=new Set,n=(e,t="")=>(t=t.toLowerCase())?e.has("space"===t?" ":t):e.size>0;r(a,"keydown",a=>{let n=a.key.toLowerCase();e.has(n)||(e.add(n),t.add(n))}),r(a,"keyup",t=>{e.delete(t.key.toLowerCase())}),r(a,"blur",()=>e.clear()),T.listen("after:update",()=>t.clear()),T.def("iskeydown",t=>n(e,t)),T.def("iskeypressed",e=>n(t,e))}f=!0,T.emit("init",T),m=performance.now(),b=l(I)}function I(e){let a=0;if(t.animate){for(w+=n.min(.1,(e-m)/1e3),m=e;w>=v;)a++,T.emit("update",v*g,a),T.def("T",T.T+v*g),w-=v;b&&(b=l(I))}else a=1;a&&(T.textalign("start","top"),T.emit("draw"))}function A(){let e=t.width||a.innerWidth,i=t.height||t.width||a.innerHeight;T.def("W",e),T.def("H",i),d.width=e,d.height=i,t.autoscale&&(d.style.display||(d.style.display="block",d.style.margin="auto"),p=n.min(a.innerWidth/e,a.innerHeight/i),p=(t.pixelart?~~p:p)||1,d.style.width=e*p+"px",d.style.height=i*p+"px"),(!t.antialias||t.pixelart)&&(u.imageSmoothingEnabled=!1,d.style.imageRendering="pixelated"),T.emit("resized",p),T.cls(0),t.animate||l(I)}function L(e,t,a,n,i){if(P[e])for(let l of P[e])l(t,a,n,i)}function S(e,t){let a=e(T,t);for(let e in a)T.def(e,a[e])}if(t.global){if(a.ENGINE)throw Error("only one global litecanvas is allowed");Object.assign(a,T),a.ENGINE=T}return u=(d=(d="string"==typeof t.canvas?document.querySelector(t.canvas):t.canvas)||document.createElement("canvas")).getContext("2d"),r(d,"click",()=>a.focus()),d.style="",A(),d.parentNode||document.body.appendChild(d),"loading"===document.readyState?r(a,"DOMContentLoaded",()=>l(C)):l(C),T}})();
+(()=>{var e=["#111","#6a7799","#aec2c2","#FFF1E8","#e83b3b","#fabc20","#155fd9","#3cbcfc","#327345","#63c64d","#6c2c1f","#ac7c00"];globalThis.litecanvas=function(t={}){let a=window,l=Math,i=2*l.PI,n=requestAnimationFrame,r=[],o=(e,t,a)=>{e.addEventListener(t,a,!1),r.push(()=>e.removeEventListener(t,a,!1))},s=e=>e.beginPath(),f=(e=>{let t=new AudioContext;return e.zzfxV=1,(a=1,l=.05,i=220,n=0,r=0,o=.1,s=0,f=1,c=0,d=0,p=0,u=0,m=0,g=0,h=0,v=0,w=0,x=1,y=0,b=0,k=0)=>{let E=Math,z=2*E.PI,T=c*=500*z/44100/44100,C=i*=(1-l+2*l*E.random(l=[]))*z/44100,I=0,A=0,L=0,S=1,X=0,Y=0,M=0,N=k<0?-1:1,P=z*N*k*2/44100,D=E.cos(P),F=E.sin,q=F(P)/4,B=1+q,H=-2*D/B,O=(1-q)/B,V=(1+N*D)/2/B,W=-(N+D)/B,R=0,G=0,$=0,j=0;for(n=44100*n+9,y*=44100,r*=44100,o*=44100,w*=44100,d*=500*z/85766121e6,h*=z/44100,p*=z/44100,u*=44100,m=44100*m|0,a*=.3*e.zzfxV,N=n+y+r+o+w|0;L<N;l[L++]=M*a)++Y%(100*v|0)||(M=s?1<s?2<s?3<s?F(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):F(I),M=(m?1-b+b*F(z*L/m):1)*(M<0?-1:1)*E.abs(M)**f*(L<n?L/n:L<n+y?1-(L-n)/y*(1-x):L<n+y+r?x:L<N-w?(N-L-w)/o*x:0),M=w?M/2+(w>L?0:(L<N-w?1:(N-L)/w)*l[L-w|0]/2/a):M,k&&(M=j=V*R+W*(R=G)+V*(G=M)-O*$-H*($=j))),I+=(P=(i+=c+=d)*E.cos(h*A++))+P*g*F(L**5),S&&++S>u&&(i+=p,C+=p,S=0),!m||++X%m||(i=C,c=T,S=S||1);(a=t.createBuffer(1,N,44100)).getChannelData(0).set(l),(i=t.createBufferSource()).buffer=a,i.connect(t.destination),i.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=[],p,u=1,m,g=.5,h=1,v,w=1/60,x=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:i,HALF_PI:i/4,lerp:(e,t,a)=>a*(t-e)+e,deg2rad:e=>l.PI/180*e,rad2deg:e=>180/l.PI*e,round:(e,t=0)=>{if(!t)return l.round(e);let a=10**t;return l.round(e*a)/a},clamp:(e,t,a)=>e<t?t:e>a?a:e,wrap:(e,t,a)=>e-(a-t)*l.floor((e-t)/(a-t)),map(e,t,a,l,i,n){let r=(e-t)/(a-t)*(i-l)+l;return n?I.clamp(r,l,i):r},norm:(e,t,a)=>I.map(e,t,a,0,1),wave:(e,t,a,l=Math.sin)=>e+(l(a)+1)/2*(t-e),rand:(e=0,t=1)=>(E=(1664525*E+0x3c6ef35f)%0x100000000)/0x100000000*(t-e)+e,randi:(e=0,t=1)=>l.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,l,i,n){s(m),m[n?"roundRect":"rect"](~~e-g,~~t-g,~~a+2*g,~~l+2*g,n),I.stroke(i)},rectfill(e,t,a,l,i,n){s(m),m[n?"roundRect":"rect"](~~e,~~t,~~a,~~l,n),I.fill(i)},circ(e,t,a,l){s(m),m.arc(~~e,~~t,~~a,0,i),I.stroke(l)},circfill(e,t,a,l){s(m),m.arc(~~e,~~t,~~a,0,i),I.fill(l)},oval(e,t,a,l,n){s(m),m.ellipse(~~e,~~t,~~a,~~l,0,0,i),I.stroke(n)},ovalfill(e,t,a,l,n){s(m),m.ellipse(~~e,~~t,~~a,~~l,0,0,i),I.fill(n)},line(e,t,a,l,i){s(m);let n=.5*(0!==g&&~~e==~~a),r=.5*(0!==g&&~~t==~~l);m.moveTo(~~e+n,~~t+r),m.lineTo(~~a+n,~~l+r),I.stroke(i)},linewidth(e){m.lineWidth=~~e,g=.5*(0!=~~e%2)},linedash(e,t=0){m.setLineDash(e),m.lineDashOffset=t},text(e,t,a,l=3,i="normal"){m.font=`${i} ${k}px ${b}`,m.fillStyle=z[~~l%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,l={}){let i=l.canvas||new OffscreenCanvas(1,1),n=l.scale||1,r=m;if(i.width=e*n,i.height=t*n,(m=i.getContext("2d")).scale(n,n),Array.isArray(a)){let e=0,t=0;for(let l of(m.imageSmoothingEnabled=!1,a)){for(let a of l)" "!==a&&"."!==a&&I.rectfill(e,t,1,1,parseInt(a,16)),e++;t++,e=0}}else a(m);return m=r,i.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,l=1)=>!(a.zzfxV<=0)&&(!navigator.userActivation||!!navigator.userActivation.hasBeenActive)&&(e=e||T,(0!==t||1!==l)&&((e=e.slice())[0]=l*(e[0]||1),e[10]=~~e[10]+t),f.apply(0,e),e),volume(e){a.zzfxV=e},canvas:()=>p,use(e,t={}){c?Y(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,l,i){c&&(X("before:"+(e=e.toLowerCase()),t,a,l,i),X(e,t,a,l,i),X("after:"+e,t,a,l,i))},pal(t=e){z=t},def(e,l){I[e]=l,t.global&&(a[e]=l)},timescale(e){h=e},framerate(e){w=1/~~e},stat(e){let l={index:e,value:[t,c,w,u,C,z,T,h,a.zzfxV||1,E,k,b][e]};return I.emit("stat",l),l.value},quit(){for(let e of(I.pause(),I.emit("quit"),C={},r))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]=l[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)Y(e,t);if(t.autoscale&&o(a,"resize",S),t.tapEvents){let e=(e,t)=>[(e-p.offsetLeft)/u,(t-p.offsetTop)/u],t=new Map,l=(e,a,l)=>{let i={x:a,y:l,startX:a,startY:l,ts:performance.now()};return t.set(e,i),i},i=(e,a,i)=>{let n=t.get(e)||l(e);n.x=a,n.y=i},n=e=>e&&performance.now()-e.ts<=300,r=e=>e.preventDefault(),s=!1;o(p,"mousedown",t=>{if(0===t.button){r(t);let[a,i]=e(t.pageX,t.pageY);I.emit("tap",a,i,0),l(0,a,i),s=!0}}),o(p,"mouseup",a=>{if(0===a.button){r(a);let l=t.get(0),[i,o]=e(a.pageX,a.pageY);n(l)&&I.emit("tapped",l.startX,l.startY,0),I.emit("untap",i,o,0),t.delete(0),s=!1}}),o(p,"mousemove",t=>{r(t);let[a,l]=e(t.pageX,t.pageY);I.def("MX",a),I.def("MY",l),s&&(I.emit("tapping",a,l,0),i(0,a,l))}),o(p,"touchstart",t=>{for(let a of(r(t),t.changedTouches)){let[t,i]=e(a.pageX,a.pageY);I.emit("tap",t,i,a.identifier+1),l(a.identifier+1,t,i)}}),o(p,"touchmove",t=>{for(let a of(r(t),t.changedTouches)){let[t,l]=e(a.pageX,a.pageY);I.emit("tapping",t,l,a.identifier+1),i(a.identifier+1,t,l)}});let f=e=>{r(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)||(n(l)&&I.emit("tapped",l.startX,l.startY,e),I.emit("untap",l.x,l.y,e),t.delete(e))};o(p,"touchend",f),o(p,"touchcancel",f),o(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,l=(e,t="")=>(t=t.toLowerCase())?e.has("space"===t?" ":t):e.size>0;o(a,"keydown",a=>{let l=a.key.toLowerCase();e.has(l)||(e.add(l),t.add(l))}),o(a,"keyup",t=>{e.delete(t.key.toLowerCase())}),o(a,"blur",()=>e.clear()),I.listen("after:update",()=>t.clear()),I.def("iskeydown",t=>l(e,t)),I.def("iskeypressed",e=>l(t,e))}c=!0,I.emit("init",I),I.textalign("start","top"),v=performance.now(),I.resume()}function L(e){if(!t.animate)return I.emit("draw");let a=0,l=(e-v)/1e3;if(v=e,l<.1)for(x+=l;x>=w;)a++,I.emit("update",w*h,a),I.def("T",I.T+w*h),x-=w;a&&I.emit("draw"),y&&(y=n(L))}function S(){let e=t.width||a.innerWidth,i=t.height||t.width||a.innerHeight;I.def("W",e),I.def("H",i),p.width=e,p.height=i,t.autoscale&&(p.style.display||(p.style.display="block",p.style.margin="auto"),u=l.min(a.innerWidth/e,a.innerHeight/i),u=(t.pixelart?~~u:u)||1,p.style.width=e*u+"px",p.style.height=i*u+"px"),(!t.antialias||t.pixelart)&&(m.imageSmoothingEnabled=!1,p.style.imageRendering="pixelated"),I.emit("resized",u),I.cls(0),t.animate||n(L)}function X(e,t,a,l,i){if(C[e])for(let n of C[e])n(t,a,l,i)}function Y(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=(p=(p="string"==typeof t.canvas?document.querySelector(t.canvas):t.canvas)||document.createElement("canvas")).getContext("2d"),o(p,"click",()=>a.focus()),p.style="",S(),p.parentNode||document.body.appendChild(p),"loading"===document.readyState?o(a,"DOMContentLoaded",()=>n(A)):n(A),I}})();

package/package.json

@@ -1,23 +1,10 @@
 {
     "name": "litecanvas",
-    "version": "0.87.0",
+    "version": "0.88.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>",
     "contributors": [],
-    "devDependencies": {
-        "@litecanvas/jsdom-extras": "^2.0.0",
-        "@swc/core": "^1.12.9",
-        "@types/jsdom": "^21.1.7",
-        "ava": "^6.4.0",
-        "esbuild": "^0.25.5",
-        "genversion": "^3.2.0",
-        "gzip-size": "^7.0.0",
-        "jsdom": "^26.1.0",
-        "prettier": "^3.6.2",
-        "sinon": "^21.0.0",
-        "tap-min": "^3.0.0"
-    },
     "homepage": "https://litecanvas.github.io/about.html",
     "repository": {
         "type": "git",
@@ -29,18 +16,6 @@
     "type": "module",
     "main": "src/index.js",
     "types": "types/index.d.ts",
-    "scripts": {
-        "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=.",
-        "build": "npm run genversion && node script/build.js",
-        "gzip-size": "gzip -c dist/dist.min.js | wc -c | xargs printf \"  Gzip size: %s bytes\n\"",
-        "format": "prettier -w src/* samples/* types/* script/* types/*",
-        "check-types": "npx ts types/*",
-        "genversion": "genversion --es6 --semi version.js",
-        "prepare": "npm run build",
-        "prepublishOnly": "npm test"
-    },
     "keywords": [
         "canvas",
         "2d",
@@ -53,6 +28,36 @@
         "pico-8",
         "p5"
     ],
+    "devDependencies": {
+        "@litecanvas/jsdom-extras": "^2.0.0",
+        "@size-limit/preset-small-lib": "^11.2.0",
+        "@swc/core": "^1.12.9",
+        "@types/jsdom": "^21.1.7",
+        "ava": "^6.4.0",
+        "esbuild": "^0.25.5",
+        "genversion": "^3.2.0",
+        "gzip-size": "^7.0.0",
+        "jsdom": "^26.1.0",
+        "prettier": "^3.6.2",
+        "sinon": "^21.0.0",
+        "size-limit": "^11.2.0",
+        "tap-min": "^3.0.0"
+    },
+    "trustedDependencies": [
+        "@swc/core"
+    ],
+    "scripts": {
+        "prepare": "npm run build",
+        "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=.",
+        "build": "npm run genversion && node script/build.js && size-limit",
+        "gzip-size": "gzip -c dist/dist.min.js | wc -c | xargs printf \"  Gzip size: %s bytes\n\"",
+        "format": "prettier -w src/* samples/* types/* script/* types/*",
+        "check-types": "npx ts types/*",
+        "genversion": "genversion --es6 --semi version.js"
+    },
     "files": [
         "dist",
         "src",
@@ -63,7 +68,16 @@
             "tests/**/*.js"
         ]
     },
-    "trustedDependencies": [
-        "@swc/core"
+    "size-limit": [
+        {
+            "path": "dist/dist.min.js",
+            "limit": "4kb",
+            "gzip": true
+        },
+        {
+            "path": "dist/dist.min.js",
+            "limit": "4kb",
+            "gzip": false
+        }
     ]
 }

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 {(c: CanvasRenderingContext2D | OffscreenCanvasRenderingContext2D) => void} */
+        beginPath = (c) => c.beginPath(),
         isNumber = Number.isFinite,
         zzfx = setupZzFX(root),
         /** @type {LitecanvasOptions} */
@@ -63,7 +65,7 @@ export default function litecanvas(settings = {}) {
         _deltaTime = 1 / 60,
         /** @type {number} */
         _accumulated = 0,
-        /** @type {number|null} */
+        /** @type {number?} */
         _rafid,
         /** @type {string} */
         _fontFamily = 'sans-serif',
@@ -406,7 +408,7 @@ export default function litecanvas(settings = {}) {
                 '[litecanvas] rect() 6th param must be a number or array of numbers'
             )
 
-            _ctx.beginPath()
+            beginPath(_ctx)
             _ctx[radii ? 'roundRect' : 'rect'](
                 ~~x - _outline_fix,
                 ~~y - _outline_fix,
@@ -447,7 +449,7 @@ export default function litecanvas(settings = {}) {
                 '[litecanvas] rectfill() 6th param must be a number or array of at least 2 numbers'
             )
 
-            _ctx.beginPath()
+            beginPath(_ctx)
             _ctx[radii ? 'roundRect' : 'rect'](~~x, ~~y, ~~width, ~~height, radii)
             instance.fill(color)
         },
@@ -472,7 +474,7 @@ export default function litecanvas(settings = {}) {
                 '[litecanvas] circ() 4th param must be a positive number or zero'
             )
 
-            _ctx.beginPath()
+            beginPath(_ctx)
             _ctx.arc(~~x, ~~y, ~~radius, 0, TWO_PI)
             instance.stroke(color)
         },
@@ -497,7 +499,7 @@ export default function litecanvas(settings = {}) {
                 '[litecanvas] circfill() 4th param must be a positive number or zero'
             )
 
-            _ctx.beginPath()
+            beginPath(_ctx)
             _ctx.arc(~~x, ~~y, ~~radius, 0, TWO_PI)
             instance.fill(color)
         },
@@ -527,7 +529,7 @@ export default function litecanvas(settings = {}) {
                 '[litecanvas] oval() 5th param must be a positive number or zero'
             )
 
-            _ctx.beginPath()
+            beginPath(_ctx)
             _ctx.ellipse(~~x, ~~y, ~~radiusX, ~~radiusY, 0, 0, TWO_PI)
             instance.stroke(color)
         },
@@ -557,7 +559,7 @@ export default function litecanvas(settings = {}) {
                 '[litecanvas] ovalfill() 5th param must be a positive number or zero'
             )
 
-            _ctx.beginPath()
+            beginPath(_ctx)
             _ctx.ellipse(~~x, ~~y, ~~radiusX, ~~radiusY, 0, 0, TWO_PI)
             instance.fill(color)
         },
@@ -587,7 +589,7 @@ export default function litecanvas(settings = {}) {
                 '[litecanvas] line() 5th param must be a positive number or zero'
             )
 
-            _ctx.beginPath()
+            beginPath(_ctx)
 
             let xfix = _outline_fix !== 0 && ~~x1 === ~~x2 ? 0.5 : 0
             let yfix = _outline_fix !== 0 && ~~y1 === ~~y2 ? 0.5 : 0
@@ -876,86 +878,50 @@ export default function litecanvas(settings = {}) {
         },
 
         /**
-         * Returns a newly instantiated Path2D object, optionally with another
-         * path as an argument (creates a copy), or optionally with a string
-         * consisting of SVG path data.
-         *
-         * @param {Path2D|string} [arg]
-         * @returns Path2D
-         * @see https://developer.mozilla.org/en-US/docs/Web/API/Path2D/Path2D
-         */
-        path: (arg) => {
-            DEV: assert(
-                null == arg || 'string' === typeof arg || arg instanceof Path2D,
-                '[litecanvas] path() 1st param must be a string or a Path2D instance'
-            )
-
-            return new Path2D(arg)
-        },
-
-        /**
-         * Fills the current or given path with a given color.
+         * Fills the current path with a given color.
          *
          * @param {number} [color=0]
-         * @param {Path2D} [path]
          */
-        fill(color, path) {
+        fill(color) {
             DEV: assert(
                 null == color || (isNumber(color) && color >= 0),
                 '[litecanvas] fill() 1st param must be a positive number or zero'
             )
-            DEV: assert(
-                null == path || path instanceof Path2D,
-                '[litecanvas] fill() 2nd param must be a Path2D instance'
-            )
 
             _ctx.fillStyle = _colors[~~color % _colors.length]
-            if (path) {
-                _ctx.fill(path)
-            } else {
-                _ctx.fill()
-            }
+            _ctx.fill()
         },
 
         /**
-         * Outlines the current or given path with a given color.
+         * Outlines the current path with a given color.
          *
          * @param {number} [color=0]
-         * @param {Path2D} [path]
          */
-        stroke(color, path) {
+        stroke(color) {
             DEV: assert(
                 null == color || (isNumber(color) && color >= 0),
                 '[litecanvas] stroke() 1st param must be a positive number or zero'
             )
-            DEV: assert(
-                null == path || path instanceof Path2D,
-                '[litecanvas] stroke() 2nd param must be a Path2D instance'
-            )
 
             _ctx.strokeStyle = _colors[~~color % _colors.length]
-            if (path) {
-                _ctx.stroke(path)
-            } else {
-                _ctx.stroke()
-            }
+            _ctx.stroke()
         },
 
         /**
-         * Turn given path into a clipping region.
+         * Turns a path (in the callback) into the current clipping region.
          *
-         * Note: always call `push()` before and `pop()` after.
-         *
-         * @param {Path2D} path
+         * @param {clipCallback} callback
          * @see https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/clip
          */
-        clip(path) {
+        clip(callback) {
             DEV: assert(
-                path instanceof Path2D,
-                '[litecanvas] clip() 1st param must be a Path2D instance'
+                'function' === typeof callback,
+                '[litecanvas] clip() 1st param must be a function'
             )
 
-            _ctx.clip(path)
+            beginPath(_ctx)
+            callback(_ctx)
+            _ctx.clip()
         },
 
         /** SOUND API */
@@ -1020,6 +986,7 @@ export default function litecanvas(settings = {}) {
          * @returns {HTMLCanvasElement}
          */
         canvas: () => _canvas,
+
         /**
          * Prepares a plugin to be loaded
          *
@@ -1169,7 +1136,7 @@ export default function litecanvas(settings = {}) {
                 // 1
                 _initialized,
                 // 2
-                _rafid,
+                _deltaTime,
                 // 3
                 _scale,
                 // 4
@@ -1204,9 +1171,7 @@ export default function litecanvas(settings = {}) {
          */
         quit() {
             // stop the game loop (update & draw)
-            cancelAnimationFrame(_rafid)
-
-            _rafid = 0
+            instance.pause()
 
             // emit "quit" event to manual clean ups
             instance.emit('quit')
@@ -1231,6 +1196,32 @@ export default function litecanvas(settings = {}) {
             // unset that flag
             _initialized = false
         },
+
+        /**
+         * Pauses the engine loop (update & draw).
+         */
+        pause() {
+            cancelAnimationFrame(_rafid)
+            _rafid = 0
+        },
+
+        /**
+         * Resumes (if paused) the engine loop.
+         */
+        resume() {
+            if (!_rafid && _initialized) {
+                _rafid = raf(drawFrame)
+            }
+        },
+
+        /**
+         * Returns `true` if the engine loop is paused.
+         *
+         * @returns {boolean}
+         */
+        paused() {
+            return !_rafid
+        },
     }
 
     // prettier-ignore
@@ -1506,51 +1497,49 @@ export default function litecanvas(settings = {}) {
             )
         }
 
+        // start the engine
         _initialized = true
-
-        // start the game loop
         instance.emit('init', instance)
 
+        // set the default text align and baseline
+        instance.textalign('start', 'top')
+
         _lastFrameTime = performance.now()
-        _rafid = raf(drawFrame)
+        instance.resume()
     }
 
     /**
      * @param {DOMHighResTimeStamp} now
      */
     function drawFrame(now) {
+        if (!settings.animate) {
+            return instance.emit('draw')
+        }
+
         let updated = 0
+        let frameTime = (now - _lastFrameTime) / 1000
 
-        if (settings.animate) {
-            // prevents too long frames
-            _accumulated += math.min(0.1, (now - _lastFrameTime) / 1000)
-            _lastFrameTime = now
+        _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
             }
-
-            // request the next frame
-            // check if the last ID exists, because
-            // quit() delete it (sets to zero)
-            if (_rafid) {
-                _rafid = raf(drawFrame)
-            }
-        } else {
-            // when the canvas is not animated
-            // we force one frame when redraws are triggered
-            updated = 1
         }
 
         if (updated) {
-            // always set default values for
-            // _ctx.textAlign and _ctx.textBaseline before draw
-            instance.textalign('start', 'top')
             instance.emit('draw')
         }
+
+        // request the next frame
+        // only when the engine loop are not paused (_rafid >= 1)
+        if (_rafid) {
+            _rafid = raf(drawFrame)
+        }
     }
 
     function setupCanvas() {

package/types/index.d.ts

@@ -444,35 +444,24 @@ declare global {
      */
     function alpha(value: number): void
     /**
-     * Returns a newly instantiated Path2D object, optionally with another
-     * path as an argument (creates a copy), or optionally with a string
-     * consisting of SVG path data.
-     *
-     * @param [arg]
-     * @see https://developer.mozilla.org/en-US/docs/Web/API/Path2D/Path2D
-     */
-    function path(arg?: Path2D | string): Path2D
-    /**
-     * Fills the current or given path with a given color.
+     * Fills the current path with a given color.
      *
      * @param color
-     * @param [path]
      */
-    function fill(color: number, path?: Path2D): void
+    function fill(color: number): void
     /**
-     * Outlines the current or given path with a given color.
+     * Outlines the current path with a given color.
      *
      * @param color
-     * @param [path]
      */
-    function stroke(color: number, path?: Path2D): void
+    function stroke(color: number): void
     /**
-     * Turn given path into a clipping region.
+     * Turns a path (in the callback) into the current clipping region.
      *
-     * @param path
+     * @param callback
      * @see https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/clip
      */
-    function clip(path: Path2D): void
+    function clip(callback: clipCallback): void
 
     /** SOUND API */
     /**
@@ -578,7 +567,7 @@ declare global {
      *
      * - n = 0: the settings passed to that instance
      * - n = 1: returns true if the "init" event has already been emitted
-     * - n = 2: the current ID returned by last requestAnimationFrame
+     * - n = 2: the current delta time (dt)
      * - n = 3: the current canvas element scale (not the context 2D scale)
      * - n = 4: the attached event callbacks
      * - n = 5: the current color palette
@@ -588,13 +577,25 @@ declare global {
      * - n = 9: the current RNG state
      * - n = 10: the current font size
      * - n = 11: the current font family
-     * - n = *any other value*: returns undefined
+     * - n = *any other value*: probably returns undefined
      *
      * @param n
      */
     function stat(n: number): any
     /**
-     * Stops the litecanvas instance and remove all event listeners.
+     * Shutdown the litecanvas instance and remove all event listeners.
      */
     function quit(): void
+    /**
+     * Pauses the engine loop (update & draw).
+     */
+    function pause(): void
+    /**
+     * Resumes (if paused) the engine loop.
+     */
+    function resume(): void
+    /**
+     * Returns `true` if the engine loop is paused.
+     */
+    function paused(): boolean
 }

package/types/types.d.ts

@@ -435,35 +435,24 @@ type LitecanvasInstance = {
      */
     alpha(value: number): void
     /**
-     * Returns a newly instantiated Path2D object, optionally with another
-     * path as an argument (creates a copy), or optionally with a string
-     * consisting of SVG path data.
-     *
-     * @param [arg]
-     * @see https://developer.mozilla.org/en-US/docs/Web/API/Path2D/Path2D
-     */
-    path(arg?: Path2D | string): Path2D
-    /**
-     * Fills the current or given path with a given color.
+     * Fills the current path with a given color.
      *
      * @param color
-     * @param [path]
      */
-    fill(color: number, path?: Path2D): void
+    fill(color: number): void
     /**
-     * Outlines the current or given path with a given color.
+     * Outlines the current path with a given color.
      *
      * @param color
-     * @param [path]
      */
-    stroke(color: number, path?: Path2D): void
+    stroke(color: number): void
     /**
-     * Turn given path into a clipping region.
+     * Turns a path (in the callback) into the current clipping region.
      *
-     * @param path
+     * @param callback
      * @see https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/clip
      */
-    clip(path: Path2D): void
+    clip(callback: clipCallback): void
 
     /** SOUND API */
     /**
@@ -565,7 +554,7 @@ type LitecanvasInstance = {
      *
      * - n = 0: the settings passed to that instance
      * - n = 1: returns true if the "init" event has already been emitted
-     * - n = 2: the current ID returned by last requestAnimationFrame
+     * - n = 2: the current delta time (dt)
      * - n = 3: the current canvas element scale (not the context 2D scale)
      * - n = 4: the attached event callbacks
      * - n = 5: the current color palette
@@ -575,7 +564,7 @@ type LitecanvasInstance = {
      * - n = 9: the current RNG state
      * - n = 10: the current font size
      * - n = 11: the current font family
-     * - n = *any other value*: returns undefined
+     * - n = *any other value*: probably returns undefined
      *
      * @param n
      */
@@ -584,6 +573,18 @@ type LitecanvasInstance = {
      * Stops the litecanvas instance and remove all event listeners.
      */
     quit(): void
+    /**
+     * Pauses the engine loop (update & draw).
+     */
+    pause(): void
+    /**
+     * Resumes (if paused) the engine loop.
+     */
+    resume(): void
+    /**
+     * Returns `true` if the engine loop is paused.
+     */
+    paused(): boolean
 }
 
 type LitecanvasOptions = {
@@ -667,3 +668,5 @@ type LitecanvasGameLoop = {
 type drawCallback = (context: OffscreenCanvasRenderingContext2D) => void
 
 type pluginCallback = (instance: LitecanvasInstance, config?: any) => any
+
+type clipCallback = (ctx: CanvasRenderingContext2D | OffscreenCanvasRenderingContext2D) => void