litecanvas 0.59.0 → 0.61.0

package/README.md

@@ -86,8 +86,8 @@ Check out our [Cheatsheet](https://litecanvas.js.org/about.html).
 
 Try some demos in our playground:
 
--   [Pong](https://litecanvas.js.org?c=eJy1Vmtu20YQ%2Fs9TTH%2BRjCia1MOO3diBotJxgNQqJLW2WhQFQ66kRWmSIFexm8S5Qk6Qfz1Ez9ML9Aqd2V2%2BHNvNn1rwivPYeX4zVMIFi8L0bVha7w3Av2sei%2B0RDAeeI%2Bkt45utOILRU2Tc2oaxtwfTXSmyK%2Fj53ekllNkujUtYZwWILS9hE14x0skLJgRnRZ9v0qxgRpSlpYAXsx%2FPpwEcwy8OOOCzIX253pCOATIcGBDHgcORpwXVx0WJu6%2F093%2F99mEfi%2BVkviQXnjt2AM2MPU9dG%2BExbHsZH3jaszy0I2%2F0mPkXk9evf5udni6m8yA4Jz%2B%2BO%2FRlOmN04LkeeSU%2FeBxIb5LqH7qHeO7TSR%2FP9f3qaSDvyXMkT58yNBImIA%2FjC3TiV%2F1A%2BozocU1eEuk14hXSo6GmY1YKUiA9xXkTJknrcdU8Lvg71jJNrEm6SYhXWeOF9FZTq4Yqc8ZiJAdVKGWERWvuJnzNSiSHihTsRpBDrSvCQsjr6zApmWGsd2kkeJYCT7mwbHjfxI5K0%2BB8GcwvmyRq3gr6cBa8enm2hD0YdTyhzsWr75ZnKPAHxm3LhwjznMXWjQN%2FVJ74GqxvdFQVrxuoKHasYa9vLIk7u2YheHZFKsnbTis%2BfrRuMErZ2D0Y2J1QdnkcCmbF4v5AlFFAcAousDNlVDCWPq81dZGPseptZRpKyN6y4rkhVZF1hSROLKM44oS1wZSwIrckYFTMCtR2fTXOUlMAgbO5j2SoDaqY6pCk0WcUjzbvSRHDNjfynirHiepQrar6pWpl1BZVx3sNZk90y9uNqqDi73sdHkHloGFVqFTfffA7Le3Ouq2bWdVB9UpahTwrOTWwBdPesZqXJ3o0nkAsWohV4lVXrCYFK%2FsG12rUHgjtU%2FGVT4TLnVprx%2B3KqBJ%2B%2BKCDelbL2sVScR5Dv0m%2FCaAG%2Bm3TNJXCg8bkWnjUVJ1QtGXR7yqfKEsSXtIUXHOxbQOTXKK0YJFQOTp6d9UBtJ8UdGkTyvMCd7B9T4CtZNWq6tEe%2FYqoZQGU1FYwkW%2B17iDHRXhd760oKS3PfnSx0JYKE3zTWGbEUsEK0wHzilMJTLujVWKSVrXUuiJLL0an2oZoYzn5AZYz9VZEm0P7bi8V9E9oQptwqNRrniTWl8WkN1BtR2bHi0jqPtSaanc8kMF9NZAVohJsw3TD082dGlg%2Bvrjp3%2Fz785%2F%2F%2FPUJTLdgOQuFysZ2YHS%2FXZbGj1it9k1l3TJNnCaJDtvFvBcUlYU%2FQjz7biX%2F705iVAP8YWG%2BnHwfwOynYG52evCFOdwnnvt0%2FF9We6qKi%2BlsHhxRsl%2BVMiL9Xz8ms6Q%3D)
--   [Bouncing ball](https://litecanvas.js.org?c=eJxtUj1vgzAQ3fkVNxpCAklbqRWlQ9WqZI%2FU2TImsuQCAkOLkvz3GvsKDs3gwff8Pu7OUijOaNnTlvieJ7mCumqFElUJKfSckW0ch%2Fr4Buu5rJhQQ2Jux4b206WhuehaTbp%2F9LyiK5nREKVQxIeTBxMXdT%2F3b4cs2IXZ%2B%2F4jO0Q7P9FvUBGfxAhq6OJodnVOFSe5srp%2FeTc%2FsEonF30LIFcuPlzhg8WdYFYAI8x8h%2BHAMz2K4LXS2ThURQE8P%2FJWV0UBZE62wum8gGkbzmcn9hrBZ4htR1eRghTW2%2BRGNd48PZiyM4AUmKRfteMc4mJC64xeviZelil1fzDlxMkv8wwmz3%2FrcWWWgg7GwN1a3tBv%2FAlMtiQ2%2B2aiYYWQ0g08a4YY%2FW7xAca%2FoRsbrFrDVdeUcBor2vIXzlHggw%3D%3D)
+-   [Pong](https://litecanvas.js.org?c=eJy1Vlly20YQ%2FccpOl8ATBACuEiWYslFM5DlKkdMkUwkJpVKwcCQnAoEoIChpdiWr%2BAT%2BC%2BHyHlygVwh3TODTZYU%2F0QsDdELenm9DBMmIA%2FjCzgGf%2BA5BuAf0mdEj2vykkivEa%2BQHg01HbNSkALpKc6bMElaj6vmccHfsZZpYk3STUK8yhovpLeaWjVUmTMWIzmoQimjrGi9m%2FA1K5EcKlKwG0EOta4ICyFfX4dJyQwj4YJFYfo2LK33UuOax2J7BMMKhy3jm604gtFTZNzahrG3B9NdKbIr%2BPnd6SWU2S6NS1hnBYgtL2ETXjHSyQsmBGdFn29SjM%2BIsrQU8GL24%2Fk0QPe%2FOOCAz4b05XpDOgbIcGBAHAcOR54WVB8XJe6%2B0t%2F%2F9duHfSyWk%2FmSXHju2EFUYIxIyddGeAzbXsYHnvYsD%2B3IGz1m%2FsXk9evfZqeni%2Bk8CM7Jj%2B8OfZnOGB14rkdeyQ8eB9KbpPqH7iGe%2B3TSx3N9v3oayPfkOZKnTxka610aCZ6lwFMuLBveN42FfqfB%2BTKYXzYdVvNW0Iez4NXLsyXswajTBqhz8eq75RkK%2FIFx2%2FIhwjxnsXXjwB%2BVJ74G6xvdMhWv20Wi2LGGvb6xJPh2zUIEd0UqydvOnHz8aN1glHLq9mBgd0LZ5XEomBWL%2BwNRRgErJLjAsSmjgrH0ea2pJ%2BAYR6KtTJ0J2VtWPDekKrKukMS2ZRRHnLD2pCesyC05zSpmVVm7fjXOUlOglmi9j2SoDaqY6pCk0WcUjzbvSRHDGWzkPQXHiapQrarqpbAyaouq4r1moZzokrcLVbWKv%2B91eNQqBw2rWhnquw9%2Bp6Tdhrd1MSscVK2kVcizklMBW23aO1bL7IneW08gFq2OVeJVV6zWGCL7BndL1N5W2qfiK5%2FYLnew1o7byCgIP3zQQT2rZW2wVJzH0G%2FSbwKoG%2F22KZpK4UFjcmc%2FaqpOKNqy6HeVT5QlCS9pCq652LYbk1yitGCRUDk6%2BmKpA2g%2Fqdala0qeF7iI7HsCbCWr7pEeXXJfEbUEQElt1SZytXcHOS7C63pvRUlpefaji4W2VJjgurXMiKWCFaYD5hUnCEy7o1Vikla11LoiSy9Gp9qGaGM5%2BQGWM3U1oM2hfbeWqvVPaEKbcAjqNU8S60sw6edBbUdmx4tI6j5Ummp3PJDBfRhIhAiCbZhueLq5g4Hl4%2B1F%2F%2Bbfn%2F%2F8569PYLoFy1koVDa2A6P77bI0fsRqtW8q65Zp4jTJ7rBdzHtBUVl4E3v2XST%2F70piVAO8Xc2Xk%2B8DmP0UzM1ODb4wh%2FvEc5%2BO%2F8tqT6G4mM7mwREl%2B1UpY6f%2FC73Is6Q%3D)
+-   [Bouncing ball](https://litecanvas.js.org?c=eJxtUstugzAQvPMVewTiBCdtpVYpPVStSu6ReraMiSy5gIyhRUn%2BvQZvg0NzsGTveGdmH0oYqKtGGlmVkEIneLimlNgTkQDsW1Vcmn64HzTr8KpZLtvG%2Fr9%2FDAIljeCs7FgTRkFQtCUfyWQpTRjB0WNBgc%2Fd2z6LNyR7331k%2B2QTbSd2%2FEIRtNDZ42zrnBkR5sbx%2Fhlf%2FcAivajYVwy58fH%2BCu8d7hlzBGhhyvcyPHhKTxJ4raw3AVVRgMgPorFRWUA4OVtgr15gLBtOJ8%2F2EsFnoK6iK0txCsv19kaUrp4exrDXgBS4Yl%2B1p0xwTMQpo1ZkE89zl7Y%2BuPjEzs%2F99KOf%2F9LDyFwKKowC%2FtRyzb5xE7hqQjrOm0vNC6mUb3jiJGj9brYAw27YwnrHpoVpdQnHIWIlfwGU6d0i)
 -   [Scroller](https://litecanvas.js.org?c=eJxVUMFOwzAMvfcrzAEtacNIxwZDsAPSJoG0AxJIO0w7hDZdI6XN1HhQgfbvOOs22CGJ7ff8nh1rUGeq%2FlSe8SgqtnWGxtVgaoPAOPxEAJX2Xq01TKC30DZzlQZ0YE%2BNFz0itQQvXqbvzxRvlKVsORQjcSvuxFjci1SKNF1Fu38W202uUAPLsbNB6pnNn17fZlPKvPnWR8nrwwR9q%2Bs1loSWBI3k3vZqAjdSQgw5nsnnjfo6bpBZzySnoHANMKsRDAnIB3oe4VycaknSdQEEJoa5MGGyn8aGn8p0UDcEHdv99sNjw4yA9I%2BVOesCiX5kWVjnGoYYjy4pPdjx1Z6LusWwMQsXP5VYpVrWChhInpg4YLHsjwWUyUAm3tRBbcjjUhzGEZ1hENjRZ%2FwCV%2F6J0w%3D%3D)
 -   [3D Projection](https://litecanvas.js.org?c=eJyNVU2P2jAQvfMrpodqnWI%2By6kt7WW3hVulrtTuRjk4JCyG4CDHFJYV%2F73jj5CYDUslROx579njGc844yqdMfGXFSRoteZbMVM8F8AFVySAlxZAxkW644lakGGA04IfUhjD7%2Bnt%2FQS%2BwuRu%2BmNyD9%2FKQQ9G8MmhOEbBRubL1K46hhANAOGAQh9%2FEbVTHA%2F8qbaYaaRXyLlQRaXuaB8o1D8RhV4Pwj2FZwqHyPKaaHWkAehcQ2oEf7GLwGt7pxGIqliliT6sNjDxlOlw91vHWna2m4SplCTKZsiS2sjq9gctNMxzCSRLFXAt%2FYyfLy6I3SwVT2qBpnbbigFmuSgU4jrChjVcMyX5nnS7XasKeRQYql5T5opZD5G23mbEGNCtP8Q4ElC9luVf5D6cuI5yhf%2FYzHeul1Eb3lbK6tqdaU5sPJU%2BcSVG%2BOjFOZFs56pglhWkH5gUYUSIvaLff%2F6iMAp0yDfbYkE0riQTRabTUxbBkFbFYUqoKT2j85QIdIpwCoRDGwYBvIcRrZwNfBpSECU1bmBNlwQUeAPhaIptg%2BeoR6EUMQoxdfeoag3EXREWhX39KxnaMPAM8TkjPjE%2B%2Bju6FOoNXfRNntksz%2FQlZahxF7nCZL4z2DkQO1HcIIqdKC4BRPgciN3o3XhsGQGoBX4B%2ByDcSZlLcjPFjpnxBGylpMWNuQR2VZkWZfk2Zdp46mUbBfYuhrZxnVRLq1qiyhwDh5XKVmOxXZv2YC0n5coqV3o%2Fq1zVlWB0bR1KHoWrCD5gfFZRuIwc4ei%2B1jW043ooaZXYUR9XpmorheZ42av6gWQJx2qw%2Bzr2xRdglhcngWmnojatE33El%2FVdK23y5%2BEtf86W8Xe58E6d%2B%2Bg784Ynj%2F%2FvyaU4XA%2FCq4e07onX592r6TsT7rEuw2f9d4i0%2BB%2FEGGLo)
 

package/dist/dist.js

@@ -27,18 +27,18 @@
 
   // src/palette.js
   var colors = [
-    "#18161c",
+    "#111",
     "#6a7799",
     "#aec2c2",
-    "#f3eade",
-    "#f04f78",
-    "#fcf660",
-    "#2f328f",
-    "#4b80ca",
+    "#FFF1E8",
+    "#d82800",
+    "#f8d878",
+    "#155fd9",
+    "#3cbcfc",
     "#327345",
     "#63c64d",
-    "#703075",
-    "#a56243"
+    "#6844fc",
+    "#ac7c00"
   ];
 
   // src/index.js
@@ -56,10 +56,11 @@
       loop: null,
       pauseOnBlur: true,
       tapEvents: true,
-      keyboardEvents: true
+      keyboardEvents: true,
+      animate: true
     };
     settings = Object.assign(defaults, settings);
-    let _initialized = false, _plugins = [], _canvas = settings.canvas || document.createElement("canvas"), _fullscreen = settings.fullscreen, _autoscale = settings.autoscale, _scale = 1, _ctx, _timeScale = 1, _lastFrame, _step = 1 / settings.fps, _stepMs = _step * 1e3, _accumulated = 0, _rafid, _drawCount = 0, _drawTime = 0, _fontFamily = "sans-serif", _fontStyle = "", _fontSize = 32, _rng_seed = Date.now(), _events = {
+    let _initialized = false, _plugins = [], _canvas = settings.canvas || document.createElement("canvas"), _fullscreen = settings.fullscreen, _autoscale = settings.autoscale, _animate = settings.animate, _scale = 1, _ctx, _timeScale = 1, _lastFrame, _step = 1 / settings.fps, _stepMs = _step * 1e3, _accumulated = 0, _rafid, _drawCount = 0, _drawTime = 0, _fontFamily = "sans-serif", _fontStyle = "", _fontSize = 32, _rng_seed = Date.now(), _events = {
       init: false,
       update: false,
       draw: false,
@@ -548,39 +549,13 @@
         }
       },
       /**
-       * Create a retangular clipping region.
+       * Turn given path into a clipping region.
        *
-       * Note: Clip paths cannot be reverted directly. You must save your
-       * canvas state using push() before calling cliprect(), and restore it
-       * once you have finished drawing in the clipped area using pop().
-       *
-       * @param {number} x
-       * @param {number} y
-       * @param {number} width
-       * @param {number} height
-       * @see https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/clip
-       */
-      cliprect(x, y, width, height) {
-        _ctx.beginPath();
-        _ctx.rect(x, y, width, height);
-        _ctx.clip();
-      },
-      /**
-       * Create a circular clipping region.
-       *
-       * Note: Clip paths cannot be reverted directly. You must save your
-       * canvas state using push() before calling clipcirc(), and restore it
-       * once you have finished drawing in the clipped area using pop().
-       *
-       * @param {number} x
-       * @param {number} y
-       * @param {number} radius
+       * @param {Path2D} path
        * @see https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/clip
        */
-      clipcirc(x, y, radius) {
-        _ctx.beginPath();
-        _ctx.arc(x, y, radius, 0, TWO_PI);
-        _ctx.clip();
+      clip(path) {
+        _ctx.clip(path);
       },
       /** SOUND API */
       /**
@@ -887,7 +862,7 @@
         _accumulated -= _stepMs;
         ticks++;
       }
-      if (ticks) {
+      if (ticks || !_animate) {
         instance.textalign("start", "top");
         instance.emit("draw");
         _drawCount++;
@@ -898,7 +873,9 @@
           _drawTime -= 1e3;
         }
       }
-      if (_rafid) _rafid = requestAnimationFrame(drawFrame);
+      if (_rafid && _animate) {
+        _rafid = requestAnimationFrame(drawFrame);
+      }
     }
     function setupCanvas() {
       _canvas = "string" === typeof _canvas ? document.querySelector(_canvas) : _canvas;
@@ -937,6 +914,10 @@
         _canvas.style.imageRendering = "pixelated";
       }
       instance.emit("resized", _scale);
+      if (!_animate) {
+        _lastFrame = performance.now();
+        requestAnimationFrame(drawFrame);
+      }
     }
     function triggerEvent(eventName, arg1, arg2, arg3, arg4) {
       if (!_events[eventName]) return;

package/dist/dist.min.js

@@ -1 +1 @@
-(()=>{var e=/* @__PURE__ */new AudioContext;globalThis.zzfxV=1;var t=(t=1,a=.05,l=220,n=0,r=0,i=.1,o=0,s=1,c=0,f=0,p=0,u=0,d=0,g=0,h=0,m=0,v=0,T=1,x=0,b=0,E=0)=>{let y=Math,w=2*y.PI,H=c*=500*w/44100/44100,D=l*=(1-a+2*a*y.random(a=[]))*w/44100,I=0,A=0,S=0,P=1,k=0,C=0,z=0,O=E<0?-1:1,X=w*O*E*2/44100,L=y.cos(X),W=y.sin,Y=W(X)/4,M=1+Y,_=-2*L/M,B=(1-Y)/M,F=(1+O*L)/2/M,G=-(O+L)/M,R=0,N=0,j=0,U=0;for(n=44100*n+9,x*=44100,r*=44100,i*=44100,v*=44100,f*=500*w/85766121e6,h*=w/44100,p*=w/44100,u*=44100,d=44100*d|0,t*=.3*globalThis.zzfxV,O=n+x+r+i+v|0;S<O;a[S++]=z*t)++C%(100*m|0)||(z=o?1<o?2<o?3<o?W(I*I):y.max(y.min(y.tan(I),1),-1):1-(2*I/w%2+2)%2:1-4*y.abs(y.round(I/w)-I/w):W(I),z=(d?1-b+b*W(w*S/d):1)*(z<0?-1:1)*y.abs(z)**s*(S<n?S/n:S<n+x?1-(S-n)/x*(1-T):S<n+x+r?T:S<O-v?(O-S-v)/i*T:0),z=v?z/2+(v>S?0:(S<O-v?1:(O-S)/v)*a[S-v|0]/2/t):z,E&&(z=U=F*R+G*(R=N)+F*(N=z)-B*j-_*(j=U))),I+=(X=(l+=c+=f)*y.cos(h*A++))+X*g*W(S**5),P&&++P>u&&(l+=p,D+=p,P=0),!d||++k%d||(l=D,c=H,P=P||1);(t=e.createBuffer(1,O,44100)).getChannelData(0).set(a),(l=e.createBufferSource()).buffer=t,l.connect(e.destination),l.start()},a=["#18161c","#6a7799","#aec2c2","#f3eade","#f04f78","#fcf660","#2f328f","#4b80ca","#327345","#63c64d","#703075","#a56243"];globalThis.litecanvas=function(e={}){let l=globalThis,n=Math.PI,r=2*n,i=(e,t,a)=>e.addEventListener(t,a);e=Object.assign({fps:60,fullscreen:!0,width:null,height:null,autoscale:!0,pixelart:!1,antialias:!1,canvas:null,global:!0,loop:null,pauseOnBlur:!0,tapEvents:!0,keyboardEvents:!0},e);let o=!1,s=[],c=e.canvas||document.createElement("canvas"),f=e.fullscreen,p=e.autoscale,u=1,d,g=1,h,m=1/e.fps,v=1e3*m,T=0,x,b=0,E=0,y="sans-serif",w="",H=32,D=Date.now(),I={init:!1,update:!1,draw:!1,resized:!1,tap:!1,untap:!1,tapping:!1,tapped:!1},A={settings:Object.assign({},e),colors:a},S={WIDTH:e.width,HEIGHT:e.height||e.width,CANVAS:null,ELAPSED:0,FPS:e.fps,CENTERX:0,CENTERY:0,MOUSEX:-1,MOUSEY:-1,DEFAULT_SFX:[.5,,1675,,.06,.2,1,1.8,,,637,.06],PI:n,TWO_PI:r,HALF_PI:.5*n,lerp:(e,t,a)=>e+a*(t-e),deg2rad:e=>n/180*e,rad2deg:e=>180/n*e,clamp:(e,t,a)=>e<t?t:e>a?a:e,wrap:(e,t,a)=>e-(a-t)*Math.floor((e-t)/(a-t)),map(e,t,a,l,n,r=!1){let i=(e-t)/(a-t)*(n-l)+l;return r?S.clamp(i,l,n):i},norm:(e,t,a)=>S.map(e,t,a,0,1),rand:(e=0,t=1)=>(D=(1664525*D+0x3c6ef35f)%0x100000000)/0x100000000*(t-e)+e,randi:(e=0,t=1)=>S.floor(S.rand(e,t+1)),seed:e=>null==e?D:D=~~e,cls(e){null==e?d.clearRect(0,0,S.WIDTH,S.HEIGHT):S.rectfill(0,0,S.WIDTH,S.HEIGHT,e)},rect(e,t,a,l,n=0,r=null){d.beginPath(),d[r?"roundRect":"rect"](~~e,~~t,a,l,r),S.stroke(n)},rectfill(e,t,a,l,n=0,r=null){d.beginPath(),d[r?"roundRect":"rect"](~~e,~~t,a,l,r),S.fill(n)},circ(e,t,a,l){d.beginPath(),d.arc(~~e,~~t,a,0,r),d.closePath(),S.stroke(l)},circfill(e,t,a,l){d.beginPath(),d.arc(~~e,~~t,a,0,r),d.closePath(),S.fill(l)},line(e,t,a,l,n){d.beginPath(),d.moveTo(~~e,~~t),d.lineTo(~~a,~~l),S.stroke(n)},linewidth(e){d.lineWidth=e},linedash(e,t=0){d.setLineDash(Array.isArray(e)?e:[e]),d.lineDashOffset=t},text(e,t,a,l=3){d.font=`${w} ${H}px ${y}`,d.fillStyle=S.getcolor(l),d.fillText(a,~~e,~~t)},textfont(e){y=e},textsize(e){H=e},textstyle(e){w=e||""},textalign(e,t){e&&(d.textAlign=e),t&&(d.textBaseline=t)},textmetrics(e,t=H){d.font=`${w} ${t}px ${y}`;let a=d.measureText(e);return a.height=a.actualBoundingBoxAscent+a.actualBoundingBoxDescent,a},image(e,t,a){d.drawImage(a,~~e,~~t)},paint(e,t,a,l={}){let n=l.canvas||new OffscreenCanvas(1,1),r=l.scale||1,i=d;if(n.width=e*r,n.height=t*r,(d=n.getContext("2d")).scale(r,r),Array.isArray(a)){let e=0,t=0;for(let l of(d.imageSmoothingEnabled=!1,a)){for(let a of l)" "!==a&&"."!==a&&S.rectfill(e,t,1,1,parseInt(a,16)),e++;t++,e=0}}else a(n,d);return d=i,n},ctx:e=>(e&&(d=e),d),push:()=>d.save(),pop:()=>d.restore(),translate:(e,t)=>d.translate(~~e,~~t),scale:(e,t)=>d.scale(e,t||e),rotate:e=>d.rotate(e),transform:(e,t,a,l,n,r,i=!0)=>d[i?"setTransform":"transform"](e,t,a,l,n,r),alpha(e){d.globalAlpha=S.clamp(e,0,1)},path:e=>new Path2D(e),fill(e,t){d.fillStyle=S.getcolor(e),t?d.fill(t):d.fill()},stroke(e,t){d.strokeStyle=S.getcolor(e),t?d.stroke(t):d.stroke()},cliprect(e,t,a,l){d.beginPath(),d.rect(e,t,a,l),d.clip()},clipcirc(e,t,a){d.beginPath(),d.arc(e,t,a,0,r),d.clip()},sfx:(e,a=0,n=1)=>!(l.zzfxV<=0)&&(!navigator.userActivation||!!navigator.userActivation.hasBeenActive)&&(e=e||S.DEFAULT_SFX,(a>0||1!==n)&&((e=e.slice())[0]=n*(e[0]||1),e[10]=~~e[10]+a),t.apply(0,e),e),volume(e){l.zzfxV=+e},colrect:(e,t,a,l,n,r,i,o)=>e<n+i&&e+a>n&&t<r+o&&t+l>r,colcirc:(e,t,a,l,n,r)=>(l-e)**2+(n-t)**2<=(a+r)**2,timescale(e){g=e},use(e,t={}){e.__conf=t,o?O(e):s.push(e)},listen:(e,t)=>(I[e]=I[e]||[],I[e].push(t),()=>{I[e]=I[e].filter(e=>t!==e)}),emit(e,t,a,l,n){z("before:"+e,t,a,l,n),z(e,t,a,l,n),z("after:"+e,t,a,l,n)},getcolor:e=>a[~~e%a.length],setvar(t,a){S[t]=a,e.global&&(l[t]=a)},resize(e,t){S.setvar("WIDTH",c.width=e),S.setvar("HEIGHT",c.height=t||e),C()}};for(let e of["sin","cos","atan2","hypot","tan","abs","ceil","round","floor","trunc","min","max","pow","sqrt","sign","exp"])S[e]=Math[e];function P(){o=!0,c="string"==typeof c?document.querySelector(c):c,S.setvar("CANVAS",c),d=c.getContext("2d"),S.WIDTH>0&&(f=!1),c.width=S.WIDTH,c.height=S.HEIGHT||S.WIDTH,c.parentNode||document.body.appendChild(c),c.style.display="block",f?(c.style.position="absolute",c.style.inset=0):p&&(c.style.margin="auto");let t=e.loop?e.loop:l;for(let e of Object.keys(I))t[e]&&S.listen(e,t[e]);for(let e of s)O(e);if(i(l,"resize",C),C(),e.tapEvents){let e=(e,t)=>[(e-c.offsetLeft)/u,(t-c.offsetTop)/u],t=/* @__PURE__ */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 r=t.get(e)||a(e);r.x=l,r.y=n},r=e=>e&&performance.now()-e.ts<=200,o=!1;i(c,"mousedown",t=>{t.preventDefault();let[l,n]=e(t.pageX,t.pageY);S.emit("tap",l,n,0),a(0,l,n),o=!0}),i(c,"mousemove",t=>{t.preventDefault();let[a,l]=e(t.pageX,t.pageY);S.setvar("MOUSEX",a),S.setvar("MOUSEY",l),o&&(S.emit("tapping",a,l,0),n(0,a,l))}),i(c,"mouseup",a=>{a.preventDefault();let l=t.get(0),[n,i]=e(a.pageX,a.pageY);r(l)&&S.emit("tapped",l.startX,l.startY,0),S.emit("untap",n,i,0),t.delete(0),o=!1}),i(c,"touchstart",t=>{for(let l of(t.preventDefault(),t.changedTouches)){let[t,n]=e(l.pageX,l.pageY);S.emit("tap",t,n,l.identifier+1),a(l.identifier+1,t,n)}}),i(c,"touchmove",t=>{for(let a of(t.preventDefault(),t.changedTouches)){let[t,l]=e(a.pageX,a.pageY);S.emit("tapping",t,l,a.identifier+1),n(a.identifier+1,t,l)}});let s=e=>{e.preventDefault();let a=[];if(e.targetTouches.length>0)for(let t of e.targetTouches)a.push(t.identifier+1);for(let[e,l]of t)a.includes(e)||(r(l)&&S.emit("tapped",l.startX,l.startY,e),S.emit("untap",l.x,l.y,e),t.delete(e))};i(c,"touchend",s),i(c,"touchcancel",s),i(l,"blur",()=>{for(let[e,a]of(o=!1,t))S.emit("untap",a.x,a.y,e),t.delete(e)})}if(e.keyboardEvents){let e=/* @__PURE__ */new Set;S.setvar("iskeydown",t=>"any"===t?e.size>0:e.has(t.toLowerCase())),i(l,"keydown",t=>{e.add(t.key.toLowerCase())}),i(l,"keyup",t=>{e.delete(t.key.toLowerCase())}),i(l,"blur",()=>e.clear())}e.pauseOnBlur&&(i(l,"blur",()=>{x=null}),i(l,"focus",()=>{x||(h=performance.now(),x=requestAnimationFrame(k))})),S.emit("init",S),h=performance.now(),x=requestAnimationFrame(k)}function k(e){let t=0,a=e-h;for(h=e,T+=a;T>=v;)S.emit("update",m*g),S.setvar("ELAPSED",S.ELAPSED+m*g),T-=v,t++;t&&(S.textalign("start","top"),S.emit("draw"),b++,(E+=v*t)+T>=1e3&&(S.setvar("FPS",b),b=0,E-=1e3)),x&&(x=requestAnimationFrame(k))}function C(){let t=l.innerWidth,a=l.innerHeight;f?(S.setvar("WIDTH",c.width=t),S.setvar("HEIGHT",c.height=a)):p&&(u=Math.min(t/S.WIDTH,a/S.HEIGHT),u=(e.pixelart?~~u:u)||1,c.style.width=S.WIDTH*u+"px",c.style.height=S.HEIGHT*u+"px"),S.setvar("CENTERX",S.WIDTH/2),S.setvar("CENTERY",S.HEIGHT/2),(!e.antialias||e.pixelart)&&(d.imageSmoothingEnabled=!1,c.style.imageRendering="pixelated"),S.emit("resized",u)}function z(e,t,a,l,n){if(I[e])for(let r of I[e])r(t,a,l,n)}function O(e){let t=e(S,A,e.__conf);if("object"==typeof t)for(let[e,a]of Object.entries(t))S.setvar(e,a)}if(e.global){if(l.__litecanvas)throw"global litecanvas already instantiated";Object.assign(l,S),l.__litecanvas=S}return"loading"===document.readyState?i(l,"DOMContentLoaded",P):P(),S}})();
+(()=>{var e=/* @__PURE__ */new AudioContext;globalThis.zzfxV=1;var t=(t=1,a=.05,n=220,l=0,r=0,i=.1,o=0,s=1,c=0,f=0,p=0,u=0,d=0,g=0,h=0,m=0,v=0,T=1,x=0,E=0,b=0)=>{let y=Math,w=2*y.PI,H=c*=500*w/44100/44100,D=n*=(1-a+2*a*y.random(a=[]))*w/44100,A=0,I=0,S=0,k=1,C=0,P=0,z=0,F=b<0?-1:1,O=w*F*b*2/44100,X=y.cos(O),L=y.sin,W=L(O)/4,Y=1+W,M=-2*X/Y,_=(1-W)/Y,B=(1+F*X)/2/Y,G=-(F+X)/Y,R=0,N=0,j=0,q=0;for(l=44100*l+9,x*=44100,r*=44100,i*=44100,v*=44100,f*=500*w/85766121e6,h*=w/44100,p*=w/44100,u*=44100,d=44100*d|0,t*=.3*globalThis.zzfxV,F=l+x+r+i+v|0;S<F;a[S++]=z*t)++P%(100*m|0)||(z=o?1<o?2<o?3<o?L(A*A):y.max(y.min(y.tan(A),1),-1):1-(2*A/w%2+2)%2:1-4*y.abs(y.round(A/w)-A/w):L(A),z=(d?1-E+E*L(w*S/d):1)*(z<0?-1:1)*y.abs(z)**s*(S<l?S/l:S<l+x?1-(S-l)/x*(1-T):S<l+x+r?T:S<F-v?(F-S-v)/i*T:0),z=v?z/2+(v>S?0:(S<F-v?1:(F-S)/v)*a[S-v|0]/2/t):z,b&&(z=q=B*R+G*(R=N)+B*(N=z)-_*j-M*(j=q))),A+=(O=(n+=c+=f)*y.cos(h*I++))+O*g*L(S**5),k&&++k>u&&(n+=p,D+=p,k=0),!d||++C%d||(n=D,c=H,k=k||1);(t=e.createBuffer(1,F,44100)).getChannelData(0).set(a),(n=e.createBufferSource()).buffer=t,n.connect(e.destination),n.start()},a=["#111","#6a7799","#aec2c2","#FFF1E8","#d82800","#f8d878","#155fd9","#3cbcfc","#327345","#63c64d","#6844fc","#ac7c00"];globalThis.litecanvas=function(e={}){let n=globalThis,l=Math.PI,r=2*l,i=(e,t,a)=>e.addEventListener(t,a);e=Object.assign({fps:60,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 o=!1,s=[],c=e.canvas||document.createElement("canvas"),f=e.fullscreen,p=e.autoscale,u=e.animate,d=1,g,h=1,m,v=1/e.fps,T=1e3*v,x=0,E,b=0,y=0,w="sans-serif",H="",D=32,A=Date.now(),I={init:!1,update:!1,draw:!1,resized:!1,tap:!1,untap:!1,tapping:!1,tapped:!1},S={settings:Object.assign({},e),colors:a},k={WIDTH:e.width,HEIGHT:e.height||e.width,CANVAS:null,ELAPSED:0,FPS:e.fps,CENTERX:0,CENTERY:0,MOUSEX:-1,MOUSEY:-1,DEFAULT_SFX:[.5,,1675,,.06,.2,1,1.8,,,637,.06],PI:l,TWO_PI:r,HALF_PI:.5*l,lerp:(e,t,a)=>e+a*(t-e),deg2rad:e=>l/180*e,rad2deg:e=>180/l*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,n,l,r=!1){let i=(e-t)/(a-t)*(l-n)+n;return r?k.clamp(i,n,l):i},norm:(e,t,a)=>k.map(e,t,a,0,1),rand:(e=0,t=1)=>(A=(1664525*A+0x3c6ef35f)%0x100000000)/0x100000000*(t-e)+e,randi:(e=0,t=1)=>k.floor(k.rand(e,t+1)),seed:e=>null==e?A:A=~~e,cls(e){null==e?g.clearRect(0,0,k.WIDTH,k.HEIGHT):k.rectfill(0,0,k.WIDTH,k.HEIGHT,e)},rect(e,t,a,n,l=0,r=null){g.beginPath(),g[r?"roundRect":"rect"](~~e,~~t,a,n,r),k.stroke(l)},rectfill(e,t,a,n,l=0,r=null){g.beginPath(),g[r?"roundRect":"rect"](~~e,~~t,a,n,r),k.fill(l)},circ(e,t,a,n){g.beginPath(),g.arc(~~e,~~t,a,0,r),g.closePath(),k.stroke(n)},circfill(e,t,a,n){g.beginPath(),g.arc(~~e,~~t,a,0,r),g.closePath(),k.fill(n)},line(e,t,a,n,l){g.beginPath(),g.moveTo(~~e,~~t),g.lineTo(~~a,~~n),k.stroke(l)},linewidth(e){g.lineWidth=e},linedash(e,t=0){g.setLineDash(Array.isArray(e)?e:[e]),g.lineDashOffset=t},text(e,t,a,n=3){g.font=`${H} ${D}px ${w}`,g.fillStyle=k.getcolor(n),g.fillText(a,~~e,~~t)},textfont(e){w=e},textsize(e){D=e},textstyle(e){H=e||""},textalign(e,t){e&&(g.textAlign=e),t&&(g.textBaseline=t)},textmetrics(e,t=D){g.font=`${H} ${t}px ${w}`;let a=g.measureText(e);return a.height=a.actualBoundingBoxAscent+a.actualBoundingBoxDescent,a},image(e,t,a){g.drawImage(a,~~e,~~t)},paint(e,t,a,n={}){let l=n.canvas||new OffscreenCanvas(1,1),r=n.scale||1,i=g;if(l.width=e*r,l.height=t*r,(g=l.getContext("2d")).scale(r,r),Array.isArray(a)){let e=0,t=0;for(let n of(g.imageSmoothingEnabled=!1,a)){for(let a of n)" "!==a&&"."!==a&&k.rectfill(e,t,1,1,parseInt(a,16)),e++;t++,e=0}}else a(l,g);return g=i,l},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),transform:(e,t,a,n,l,r,i=!0)=>g[i?"setTransform":"transform"](e,t,a,n,l,r),alpha(e){g.globalAlpha=k.clamp(e,0,1)},path:e=>new Path2D(e),fill(e,t){g.fillStyle=k.getcolor(e),t?g.fill(t):g.fill()},stroke(e,t){g.strokeStyle=k.getcolor(e),t?g.stroke(t):g.stroke()},clip(e){g.clip(e)},sfx:(e,a=0,l=1)=>!(n.zzfxV<=0)&&(!navigator.userActivation||!!navigator.userActivation.hasBeenActive)&&(e=e||k.DEFAULT_SFX,(a>0||1!==l)&&((e=e.slice())[0]=l*(e[0]||1),e[10]=~~e[10]+a),t.apply(0,e),e),volume(e){n.zzfxV=+e},colrect:(e,t,a,n,l,r,i,o)=>e<l+i&&e+a>l&&t<r+o&&t+n>r,colcirc:(e,t,a,n,l,r)=>(n-e)**2+(l-t)**2<=(a+r)**2,timescale(e){h=e},use(e,t={}){e.__conf=t,o?O(e):s.push(e)},listen:(e,t)=>(I[e]=I[e]||[],I[e].push(t),()=>{I[e]=I[e].filter(e=>t!==e)}),emit(e,t,a,n,l){F("before:"+e,t,a,n,l),F(e,t,a,n,l),F("after:"+e,t,a,n,l)},getcolor:e=>a[~~e%a.length],setvar(t,a){k[t]=a,e.global&&(n[t]=a)},resize(e,t){k.setvar("WIDTH",c.width=e),k.setvar("HEIGHT",c.height=t||e),z()}};for(let e of["sin","cos","atan2","hypot","tan","abs","ceil","round","floor","trunc","min","max","pow","sqrt","sign","exp"])k[e]=Math[e];function C(){o=!0,c="string"==typeof c?document.querySelector(c):c,k.setvar("CANVAS",c),g=c.getContext("2d"),k.WIDTH>0&&(f=!1),c.width=k.WIDTH,c.height=k.HEIGHT||k.WIDTH,c.parentNode||document.body.appendChild(c),c.style.display="block",f?(c.style.position="absolute",c.style.inset=0):p&&(c.style.margin="auto");let t=e.loop?e.loop:n;for(let e of Object.keys(I))t[e]&&k.listen(e,t[e]);for(let e of s)O(e);if(i(n,"resize",z),z(),e.tapEvents){let e=(e,t)=>[(e-c.offsetLeft)/d,(t-c.offsetTop)/d],t=/* @__PURE__ */new Map,a=(e,a,n)=>{let l={x:a,y:n,startX:a,startY:n,ts:performance.now()};return t.set(e,l),l},l=(e,n,l)=>{let r=t.get(e)||a(e);r.x=n,r.y=l},r=e=>e&&performance.now()-e.ts<=200,o=!1;i(c,"mousedown",t=>{t.preventDefault();let[n,l]=e(t.pageX,t.pageY);k.emit("tap",n,l,0),a(0,n,l),o=!0}),i(c,"mousemove",t=>{t.preventDefault();let[a,n]=e(t.pageX,t.pageY);k.setvar("MOUSEX",a),k.setvar("MOUSEY",n),o&&(k.emit("tapping",a,n,0),l(0,a,n))}),i(c,"mouseup",a=>{a.preventDefault();let n=t.get(0),[l,i]=e(a.pageX,a.pageY);r(n)&&k.emit("tapped",n.startX,n.startY,0),k.emit("untap",l,i,0),t.delete(0),o=!1}),i(c,"touchstart",t=>{for(let n of(t.preventDefault(),t.changedTouches)){let[t,l]=e(n.pageX,n.pageY);k.emit("tap",t,l,n.identifier+1),a(n.identifier+1,t,l)}}),i(c,"touchmove",t=>{for(let a of(t.preventDefault(),t.changedTouches)){let[t,n]=e(a.pageX,a.pageY);k.emit("tapping",t,n,a.identifier+1),l(a.identifier+1,t,n)}});let s=e=>{e.preventDefault();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)||(r(n)&&k.emit("tapped",n.startX,n.startY,e),k.emit("untap",n.x,n.y,e),t.delete(e))};i(c,"touchend",s),i(c,"touchcancel",s),i(n,"blur",()=>{for(let[e,a]of(o=!1,t))k.emit("untap",a.x,a.y,e),t.delete(e)})}if(e.keyboardEvents){let e=/* @__PURE__ */new Set;k.setvar("iskeydown",t=>"any"===t?e.size>0:e.has(t.toLowerCase())),i(n,"keydown",t=>{e.add(t.key.toLowerCase())}),i(n,"keyup",t=>{e.delete(t.key.toLowerCase())}),i(n,"blur",()=>e.clear())}e.pauseOnBlur&&(i(n,"blur",()=>{E=null}),i(n,"focus",()=>{E||(m=performance.now(),E=requestAnimationFrame(P))})),k.emit("init",k),m=performance.now(),E=requestAnimationFrame(P)}function P(e){let t=0,a=e-m;for(m=e,x+=a;x>=T;)k.emit("update",v*h),k.setvar("ELAPSED",k.ELAPSED+v*h),x-=T,t++;(t||!u)&&(k.textalign("start","top"),k.emit("draw"),b++,(y+=T*t)+x>=1e3&&(k.setvar("FPS",b),b=0,y-=1e3)),E&&u&&(E=requestAnimationFrame(P))}function z(){let t=n.innerWidth,a=n.innerHeight;f?(k.setvar("WIDTH",c.width=t),k.setvar("HEIGHT",c.height=a)):p&&(d=Math.min(t/k.WIDTH,a/k.HEIGHT),d=(e.pixelart?~~d:d)||1,c.style.width=k.WIDTH*d+"px",c.style.height=k.HEIGHT*d+"px"),k.setvar("CENTERX",k.WIDTH/2),k.setvar("CENTERY",k.HEIGHT/2),(!e.antialias||e.pixelart)&&(g.imageSmoothingEnabled=!1,c.style.imageRendering="pixelated"),k.emit("resized",d),u||(m=performance.now(),requestAnimationFrame(P))}function F(e,t,a,n,l){if(I[e])for(let r of I[e])r(t,a,n,l)}function O(e){let t=e(k,S,e.__conf);if("object"==typeof t)for(let[e,a]of Object.entries(t))k.setvar(e,a)}if(e.global){if(n.__litecanvas)throw"global litecanvas already instantiated";Object.assign(n,k),n.__litecanvas=k}return"loading"===document.readyState?i(n,"DOMContentLoaded",C):C(),k}})();

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "litecanvas",
-    "version": "0.59.0",
+    "version": "0.61.0",
     "description": "Lightweight HTML5 canvas engine suitable for small games and animations.",
     "license": "MIT",
     "author": "Luiz Bills <luizbills@pm.me>",

package/src/index.js

@@ -29,6 +29,7 @@ export default function litecanvas(settings = {}) {
             pauseOnBlur: true,
             tapEvents: true,
             keyboardEvents: true,
+            animate: true,
         }
 
     // setup the settings default values
@@ -44,6 +45,8 @@ export default function litecanvas(settings = {}) {
         _fullscreen = settings.fullscreen,
         /** @type {boolean} */
         _autoscale = settings.autoscale,
+        /** @type {boolean} */
+        _animate = settings.animate,
         /** @type {number} */
         _scale = 1,
         /** @type {CanvasRenderingContext2D} */
@@ -643,40 +646,13 @@ export default function litecanvas(settings = {}) {
         },
 
         /**
-         * Create a retangular clipping region.
-         *
-         * Note: Clip paths cannot be reverted directly. You must save your
-         * canvas state using push() before calling cliprect(), and restore it
-         * once you have finished drawing in the clipped area using pop().
+         * Turn given path into a clipping region.
          *
-         * @param {number} x
-         * @param {number} y
-         * @param {number} width
-         * @param {number} height
+         * @param {Path2D} path
          * @see https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/clip
          */
-        cliprect(x, y, width, height) {
-            _ctx.beginPath()
-            _ctx.rect(x, y, width, height)
-            _ctx.clip()
-        },
-
-        /**
-         * Create a circular clipping region.
-         *
-         * Note: Clip paths cannot be reverted directly. You must save your
-         * canvas state using push() before calling clipcirc(), and restore it
-         * once you have finished drawing in the clipped area using pop().
-         *
-         * @param {number} x
-         * @param {number} y
-         * @param {number} radius
-         * @see https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/clip
-         */
-        clipcirc(x, y, radius) {
-            _ctx.beginPath()
-            _ctx.arc(x, y, radius, 0, TWO_PI)
-            _ctx.clip()
+        clip(path) {
+            _ctx.clip(path)
         },
 
         /** SOUND API */
@@ -1068,7 +1044,7 @@ export default function litecanvas(settings = {}) {
             ticks++
         }
 
-        if (ticks) {
+        if (ticks || !_animate) {
             // default custom values for textAlign & textBaseline
             instance.textalign('start', 'top')
 
@@ -1083,7 +1059,9 @@ export default function litecanvas(settings = {}) {
             }
         }
 
-        if (_rafid) _rafid = requestAnimationFrame(drawFrame)
+        if (_rafid && _animate) {
+            _rafid = requestAnimationFrame(drawFrame)
+        }
     }
 
     function setupCanvas() {
@@ -1140,6 +1118,11 @@ export default function litecanvas(settings = {}) {
         }
 
         instance.emit('resized', _scale)
+
+        if (!_animate) {
+            _lastFrame = performance.now()
+            requestAnimationFrame(drawFrame)
+        }
     }
 
     function triggerEvent(eventName, arg1, arg2, arg3, arg4) {

package/src/palette.js

@@ -1,17 +1,17 @@
 // Default colors inspired by https://lospec.com/palette-list/trirampo
 export const colors = [
-    '#18161c',
+    '#111',
     '#6a7799',
     '#aec2c2',
-    '#f3eade',
+    '#FFF1E8',
 
-    '#f04f78',
-    '#fcf660',
-    '#2f328f',
-    '#4b80ca',
+    '#d82800',
+    '#f8d878',
+    '#155fd9',
+    '#3cbcfc',
 
     '#327345',
     '#63c64d',
-    '#703075',
-    '#a56243',
+    '#6844fc',
+    '#ac7c00',
 ]

package/src/types.js

@@ -13,6 +13,7 @@
  * @property {boolean} [global=true]
  * @property {boolean} [tapEvents=true]
  * @property {boolean} [keyboardEvents=true]
+ * @property {boolean} [animate=true]
  * @property {LitecanvasGameLoop} [loop]
  */
 

package/types/types.d.ts

@@ -689,6 +689,12 @@ type LitecanvasOptions = {
      * Useful when you want to implement your keyboard handler.
      */
     keyboardEvents?: boolean
+    /**
+     * default: `true`
+     *
+     * if `false` stops the code in `update()` and `draw()` from running repeatedly. By default, tries to run these functions 60 times per second.
+     */
+    animate?: boolean
 }
 
 type LitecanvasGameLoop = {