litecanvas 0.58.2 → 0.60.0

package/dist/dist.js

@@ -27,18 +27,18 @@
 
   // src/palette.js
   var colors = [
-    "#18161c",
+    "#000",
     "#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, _mouseX, _mouseY, _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,
@@ -84,9 +85,13 @@
       /** @type {number} */
       FPS: settings.fps,
       /** @type {number} */
-      CENTERX: null,
+      CENTERX: 0,
       /** @type {number} */
-      CENTERY: null,
+      CENTERY: 0,
+      /** @type {number} */
+      MOUSEX: -1,
+      /** @type {number} */
+      MOUSEY: -1,
       /** @type {number[]} */
       DEFAULT_SFX: [0.5, , 1675, , 0.06, 0.2, 1, 1.8, , , 637, 0.06],
       /** MATH API */
@@ -209,7 +214,7 @@
        * @param {number} [max=1]
        * @returns {number} the random number
        */
-      randi: (min = 0, max = 1) => instance.floor(instance.rand() * (max - min + 1) + min),
+      randi: (min = 0, max = 1) => instance.floor(instance.rand(min, max + 1)),
       /**
        * If a value is passed, initializes the random number generator with an explicit seed value.
        * Otherwise, returns the current seed state.
@@ -337,7 +342,7 @@
        * @param {number} [color=3] the color index (generally from 0 to 7)
        */
       text(x, y, text, color = 3) {
-        _ctx.font = `${_fontStyle || ""} ${_fontSize}px ${_fontFamily}`;
+        _ctx.font = `${_fontStyle} ${_fontSize}px ${_fontFamily}`;
         _ctx.fillStyle = instance.getcolor(color);
         _ctx.fillText(text, ~~x, ~~y);
       },
@@ -358,12 +363,12 @@
         _fontSize = size;
       },
       /**
-       * Sets whether a font should be styled with a normal, italic, or bold.
+       * Sets whether a font should be styled with a "normal", "italic", or "bold".
        *
        * @param {string} style
        */
       textstyle(style) {
-        _fontStyle = style;
+        _fontStyle = style || "";
       },
       /**
        * Sets the alignment used when drawing texts
@@ -385,8 +390,8 @@
        * @returns {TextMetrics}
        * @see https://developer.mozilla.org/en-US/docs/Web/API/TextMetrics
        */
-      textmetrics(text, size) {
-        _ctx.font = `${_fontStyle || ""} ${size || _fontSize}px ${_fontFamily}`;
+      textmetrics(text, size = _fontSize) {
+        _ctx.font = `${_fontStyle} ${size}px ${_fontFamily}`;
         const metrics = _ctx.measureText(text);
         metrics.height = metrics.actualBoundingBoxAscent + metrics.actualBoundingBoxDescent;
         return metrics;
@@ -413,7 +418,7 @@
        * @see https://developer.mozilla.org/en-US/docs/Web/API/OffscreenCanvas
        */
       paint(width, height, draw, options = {}) {
-        const oc = options.canvas || new OffscreenCanvas(0, 0), scale = options.scale || 1, contextBackup = _ctx;
+        const oc = options.canvas || new OffscreenCanvas(1, 1), scale = options.scale || 1, contextBackup = _ctx;
         oc.width = width * scale;
         oc.height = height * scale;
         _ctx = oc.getContext("2d");
@@ -453,16 +458,18 @@
       },
       /**
        * saves the current drawing style settings and transformations
+       *
        * @see https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/save
        */
       push: () => _ctx.save(),
       /**
        * restores the drawing style settings and transformations
+       *
        * @see https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/restore
        */
       pop: () => _ctx.restore(),
       /**
-       * Adds a translation transformation to the current matrix
+       * Adds a translation to the transformation matrix.
        *
        * @param {number} x
        * @param {number} y
@@ -476,14 +483,12 @@
        */
       scale: (x, y) => _ctx.scale(x, y || x),
       /**
-       * Adds a rotation to the transformation matrix
+       * Adds a rotation to the transformation matrix.
        *
        * @param {number} radians
        */
       rotate: (radians) => _ctx.rotate(radians),
       /**
-       * Adds a transformation that skews to the transformation matrix
-       *
        * @param {number} a
        * @param {number} b
        * @param {number} c
@@ -491,7 +496,9 @@
        * @param {number} e
        * @param {number} f
        * @param {boolean} [resetFirst=true] `false` to use _ctx.transform(); by default use _ctx.setTransform()
+       *
        * @see https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/setTransform
+       * @see https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/transform
        */
       transform: (a, b, c, d, e, f, resetFirst = true) => _ctx[resetFirst ? "setTransform" : "transform"](a, b, c, d, e, f),
       /**
@@ -521,7 +528,11 @@
        */
       fill(color, path) {
         _ctx.fillStyle = instance.getcolor(color);
-        _ctx.fill(path);
+        if (path) {
+          _ctx.fill(path);
+        } else {
+          _ctx.fill();
+        }
       },
       /**
        * Outlines the current or given path with a given color.
@@ -531,7 +542,11 @@
        */
       stroke(color, path) {
         _ctx.strokeStyle = instance.getcolor(color);
-        path ? _ctx.stroke(path) : _ctx.stroke();
+        if (path) {
+          _ctx.stroke(path);
+        } else {
+          _ctx.stroke();
+        }
       },
       /**
        * Create a retangular clipping region.
@@ -568,16 +583,6 @@
         _ctx.arc(x, y, radius, 0, TWO_PI);
         _ctx.clip();
       },
-      /**
-       * Sets the type of compositing operation to apply when drawing new shapes.
-       * Default value = 'source-over'.
-       *
-       * @param {string} value
-       * @see https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/globalCompositeOperation
-       */
-      blendmode(value) {
-        _ctx.globalCompositeOperation = value;
-      },
       /** SOUND API */
       /**
        * Play a sound effects using ZzFX library.
@@ -639,11 +644,6 @@
        * @returns {boolean}
        */
       colcirc: (x1, y1, r1, x2, y2, r2) => (x2 - x1) ** 2 + (y2 - y1) ** 2 <= (r1 + r2) ** 2,
-      /**
-       * Get the mouse position
-       * @returns number[]
-       */
-      mousepos: () => [_mouseX, _mouseY],
       /**
        * The scale of the game's delta time (dt).
        * Values higher than 1 increase the speed of time, while values smaller than 1 decrease it.
@@ -788,7 +788,9 @@
         });
         on(_canvas, "mousemove", (ev) => {
           ev.preventDefault();
-          const [x, y] = [_mouseX, _mouseY] = _getXY(ev.pageX, ev.pageY);
+          const [x, y] = _getXY(ev.pageX, ev.pageY);
+          instance.setvar("MOUSEX", x);
+          instance.setvar("MOUSEY", y);
           if (!_pressingMouse) return;
           instance.emit("tapping", x, y, 0);
           _updateTap(0, x, y);
@@ -843,7 +845,6 @@
         on(_canvas, "touchcancel", _touchEndHandler);
         on(root, "blur", () => {
           _pressingMouse = false;
-          if (_taps.size === 0) return;
           for (const [id, tap] of _taps) {
             instance.emit("untap", tap.x, tap.y, id);
             _taps.delete(id);
@@ -887,7 +888,7 @@
         _accumulated -= _stepMs;
         ticks++;
       }
-      if (ticks) {
+      if (ticks || !_animate) {
         instance.textalign("start", "top");
         instance.emit("draw");
         _drawCount++;
@@ -898,7 +899,9 @@
           _drawTime -= 1e3;
         }
       }
-      if (_rafid) _rafid = requestAnimationFrame(drawFrame);
+      if (_rafid && _animate) {
+        _rafid = requestAnimationFrame(drawFrame);
+      }
     }
     function setupCanvas() {
       _canvas = "string" === typeof _canvas ? document.querySelector(_canvas) : _canvas;
@@ -926,7 +929,7 @@
           pageWidth / instance.WIDTH,
           pageHeight / instance.HEIGHT
         );
-        _scale = settings.pixelart ? Math.floor(_scale) : _scale;
+        _scale = (settings.pixelart ? ~~_scale : _scale) || 1;
         _canvas.style.width = instance.WIDTH * _scale + "px";
         _canvas.style.height = instance.HEIGHT * _scale + "px";
       }
@@ -937,6 +940,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,b=1,T=0,x=0,y=0)=>{let E=Math,w=2*E.PI,H=c*=500*w/44100/44100,D=l*=(1-a+2*a*E.random(a=[]))*w/44100,I=0,A=0,P=0,S=1,C=0,k=0,z=0,L=y<0?-1:1,W=w*L*y*2/44100,X=E.cos(W),O=E.sin,_=O(W)/4,B=1+_,F=-2*X/B,Y=(1-_)/B,G=(1+L*X)/2/B,M=-(L+X)/B,R=0,N=0,j=0,V=0;for(n=44100*n+9,T*=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,L=n+T+r+i+v|0;P<L;a[P++]=z*t)++k%(100*m|0)||(z=o?1<o?2<o?3<o?O(I*I):E.max(E.min(E.tan(I),1),-1):1-(2*I/w%2+2)%2:1-4*E.abs(E.round(I/w)-I/w):O(I),z=(d?1-x+x*O(w*P/d):1)*(z<0?-1:1)*E.abs(z)**s*(P<n?P/n:P<n+T?1-(P-n)/T*(1-b):P<n+T+r?b:P<L-v?(L-P-v)/i*b:0),z=v?z/2+(v>P?0:(P<L-v?1:(L-P)/v)*a[P-v|0]/2/t):z,y&&(z=V=G*R+M*(R=N)+G*(N=z)-Y*j-F*(j=V))),I+=(W=(l+=c+=f)*E.cos(h*A++))+W*g*O(P**5),S&&++S>u&&(l+=p,D+=p,S=0),!d||++C%d||(l=D,c=H,S=S||1);(t=e.createBuffer(1,L,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,h,m=1,v,b=1/e.fps,T=1e3*b,x=0,y,E=0,w=0,H="sans-serif",D="",I=32,A=Date.now(),P={init:!1,update:!1,draw:!1,resized:!1,tap:!1,untap:!1,tapping:!1,tapped:!1},S={settings:Object.assign({},e),colors:a},C={WIDTH:e.width,HEIGHT:e.height||e.width,CANVAS:null,ELAPSED:0,FPS:e.fps,CENTERX:null,CENTERY:null,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?C.clamp(i,l,n):i},norm:(e,t,a)=>C.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)=>C.floor(C.rand()*(t-e+1)+e),seed:e=>null==e?A:A=~~e,cls(e){null==e?h.clearRect(0,0,C.WIDTH,C.HEIGHT):C.rectfill(0,0,C.WIDTH,C.HEIGHT,e)},rect(e,t,a,l,n=0,r=null){h.beginPath(),h[r?"roundRect":"rect"](~~e,~~t,a,l,r),C.stroke(n)},rectfill(e,t,a,l,n=0,r=null){h.beginPath(),h[r?"roundRect":"rect"](~~e,~~t,a,l,r),C.fill(n)},circ(e,t,a,l){h.beginPath(),h.arc(~~e,~~t,a,0,r),h.closePath(),C.stroke(l)},circfill(e,t,a,l){h.beginPath(),h.arc(~~e,~~t,a,0,r),h.closePath(),C.fill(l)},line(e,t,a,l,n){h.beginPath(),h.moveTo(~~e,~~t),h.lineTo(~~a,~~l),C.stroke(n)},linewidth(e){h.lineWidth=e},linedash(e,t=0){h.setLineDash(Array.isArray(e)?e:[e]),h.lineDashOffset=t},text(e,t,a,l=3){h.font=`${D||""} ${I}px ${H}`,h.fillStyle=C.getcolor(l),h.fillText(a,~~e,~~t)},textfont(e){H=e},textsize(e){I=e},textstyle(e){D=e},textalign(e,t){e&&(h.textAlign=e),t&&(h.textBaseline=t)},textmetrics(e,t){h.font=`${D||""} ${t||I}px ${H}`;let a=h.measureText(e);return a.height=a.actualBoundingBoxAscent+a.actualBoundingBoxDescent,a},image(e,t,a){h.drawImage(a,~~e,~~t)},paint(e,t,a,l={}){let n=l.canvas||new OffscreenCanvas(0,0),r=l.scale||1,i=h;if(n.width=e*r,n.height=t*r,(h=n.getContext("2d")).scale(r,r),Array.isArray(a)){let e=0,t=0;for(let l of(h.imageSmoothingEnabled=!1,a)){for(let a of l)" "!==a&&"."!==a&&C.rectfill(e,t,1,1,parseInt(a,16)),e++;t++,e=0}}else a(n,h);return h=i,n},ctx:e=>(e&&(h=e),h),push:()=>h.save(),pop:()=>h.restore(),translate:(e,t)=>h.translate(~~e,~~t),scale:(e,t)=>h.scale(e,t||e),rotate:e=>h.rotate(e),transform:(e,t,a,l,n,r,i=!0)=>h[i?"setTransform":"transform"](e,t,a,l,n,r),alpha(e){h.globalAlpha=C.clamp(e,0,1)},path:e=>new Path2D(e),fill(e,t){h.fillStyle=C.getcolor(e),h.fill(t)},stroke(e,t){h.strokeStyle=C.getcolor(e),t?h.stroke(t):h.stroke()},cliprect(e,t,a,l){h.beginPath(),h.rect(e,t,a,l),h.clip()},clipcirc(e,t,a){h.beginPath(),h.arc(e,t,a,0,r),h.clip()},blendmode(e){h.globalCompositeOperation=e},sfx:(e,a=0,n=1)=>!(l.zzfxV<=0)&&(!navigator.userActivation||!!navigator.userActivation.hasBeenActive)&&(e=e||C.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,mousepos:()=>[d,g],timescale(e){m=e},use(e,t={}){e.__conf=t,o?X(e):s.push(e)},listen:(e,t)=>(P[e]=P[e]||[],P[e].push(t),()=>{P[e]=P[e].filter(e=>t!==e)}),emit(e,t,a,l,n){W("before:"+e,t,a,l,n),W(e,t,a,l,n),W("after:"+e,t,a,l,n)},getcolor:e=>a[~~e%a.length],setvar(t,a){C[t]=a,e.global&&(l[t]=a)},resize(e,t){C.setvar("WIDTH",c.width=e),C.setvar("HEIGHT",c.height=t||e),L()}};for(let e of["sin","cos","atan2","hypot","tan","abs","ceil","round","floor","trunc","min","max","pow","sqrt","sign","exp"])C[e]=Math[e];function k(){o=!0,c="string"==typeof c?document.querySelector(c):c,C.setvar("CANVAS",c),h=c.getContext("2d"),C.WIDTH>0&&(f=!1),c.width=C.WIDTH,c.height=C.HEIGHT||C.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(P))t[e]&&C.listen(e,t[e]);for(let e of s)X(e);if(i(l,"resize",L),L(),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);C.emit("tap",l,n,0),a(0,l,n),o=!0}),i(c,"mousemove",t=>{t.preventDefault();let[a,l]=[d,g]=e(t.pageX,t.pageY);o&&(C.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)&&C.emit("tapped",l.startX,l.startY,0),C.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);C.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);C.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)&&C.emit("tapped",l.startX,l.startY,e),C.emit("untap",l.x,l.y,e),t.delete(e))};i(c,"touchend",s),i(c,"touchcancel",s),i(l,"blur",()=>{if(o=!1,0!==t.size)for(let[e,a]of t)C.emit("untap",a.x,a.y,e),t.delete(e)})}if(e.keyboardEvents){let e=/* @__PURE__ */new Set;C.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",()=>{y=null}),i(l,"focus",()=>{y||(v=performance.now(),y=requestAnimationFrame(z))})),C.emit("init",C),v=performance.now(),y=requestAnimationFrame(z)}function z(e){let t=0,a=e-v;for(v=e,x+=a;x>=T;)C.emit("update",b*m),C.setvar("ELAPSED",C.ELAPSED+b*m),x-=T,t++;t&&(C.textalign("start","top"),C.emit("draw"),E++,(w+=T*t)+x>=1e3&&(C.setvar("FPS",E),E=0,w-=1e3)),y&&(y=requestAnimationFrame(z))}function L(){let t=l.innerWidth,a=l.innerHeight;f?(C.setvar("WIDTH",c.width=t),C.setvar("HEIGHT",c.height=a)):p&&(u=Math.min(t/C.WIDTH,a/C.HEIGHT),u=e.pixelart?Math.floor(u):u,c.style.width=C.WIDTH*u+"px",c.style.height=C.HEIGHT*u+"px"),C.setvar("CENTERX",C.WIDTH/2),C.setvar("CENTERY",C.HEIGHT/2),(!e.antialias||e.pixelart)&&(h.imageSmoothingEnabled=!1,c.style.imageRendering="pixelated"),C.emit("resized",u)}function W(e,t,a,l,n){if(P[e])for(let r of P[e])r(t,a,l,n)}function X(e){let t=e(C,S,e.__conf);if("object"==typeof t)for(let[e,a]of Object.entries(t))C.setvar(e,a)}if(e.global){if(l.__litecanvas)throw"global litecanvas already instantiated";Object.assign(l,C),l.__litecanvas=C}return"loading"===document.readyState?i(l,"DOMContentLoaded",k):k(),C}})();
+(()=>{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,b=0,E=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,P=1,k=0,C=0,z=0,F=E<0?-1:1,O=w*F*E*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)++C%(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-b+b*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,E&&(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),P&&++P>u&&(n+=p,D+=p,P=0),!d||++k%d||(n=D,c=H,P=P||1);(t=e.createBuffer(1,F,44100)).getChannelData(0).set(a),(n=e.createBufferSource()).buffer=t,n.connect(e.destination),n.start()},a=["#000","#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,b,E=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},P={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?P.clamp(i,n,l):i},norm:(e,t,a)=>P.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)=>P.floor(P.rand(e,t+1)),seed:e=>null==e?A:A=~~e,cls(e){null==e?g.clearRect(0,0,P.WIDTH,P.HEIGHT):P.rectfill(0,0,P.WIDTH,P.HEIGHT,e)},rect(e,t,a,n,l=0,r=null){g.beginPath(),g[r?"roundRect":"rect"](~~e,~~t,a,n,r),P.stroke(l)},rectfill(e,t,a,n,l=0,r=null){g.beginPath(),g[r?"roundRect":"rect"](~~e,~~t,a,n,r),P.fill(l)},circ(e,t,a,n){g.beginPath(),g.arc(~~e,~~t,a,0,r),g.closePath(),P.stroke(n)},circfill(e,t,a,n){g.beginPath(),g.arc(~~e,~~t,a,0,r),g.closePath(),P.fill(n)},line(e,t,a,n,l){g.beginPath(),g.moveTo(~~e,~~t),g.lineTo(~~a,~~n),P.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=P.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&&P.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=P.clamp(e,0,1)},path:e=>new Path2D(e),fill(e,t){g.fillStyle=P.getcolor(e),t?g.fill(t):g.fill()},stroke(e,t){g.strokeStyle=P.getcolor(e),t?g.stroke(t):g.stroke()},cliprect(e,t,a,n){g.beginPath(),g.rect(e,t,a,n),g.clip()},clipcirc(e,t,a){g.beginPath(),g.arc(e,t,a,0,r),g.clip()},sfx:(e,a=0,l=1)=>!(n.zzfxV<=0)&&(!navigator.userActivation||!!navigator.userActivation.hasBeenActive)&&(e=e||P.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){P[t]=a,e.global&&(n[t]=a)},resize(e,t){P.setvar("WIDTH",c.width=e),P.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"])P[e]=Math[e];function k(){o=!0,c="string"==typeof c?document.querySelector(c):c,P.setvar("CANVAS",c),g=c.getContext("2d"),P.WIDTH>0&&(f=!1),c.width=P.WIDTH,c.height=P.HEIGHT||P.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]&&P.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);P.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);P.setvar("MOUSEX",a),P.setvar("MOUSEY",n),o&&(P.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)&&P.emit("tapped",n.startX,n.startY,0),P.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);P.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);P.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)&&P.emit("tapped",n.startX,n.startY,e),P.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))P.emit("untap",a.x,a.y,e),t.delete(e)})}if(e.keyboardEvents){let e=/* @__PURE__ */new Set;P.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",()=>{b=null}),i(n,"focus",()=>{b||(m=performance.now(),b=requestAnimationFrame(C))})),P.emit("init",P),m=performance.now(),b=requestAnimationFrame(C)}function C(e){let t=0,a=e-m;for(m=e,x+=a;x>=T;)P.emit("update",v*h),P.setvar("ELAPSED",P.ELAPSED+v*h),x-=T,t++;(t||!u)&&(P.textalign("start","top"),P.emit("draw"),E++,(y+=T*t)+x>=1e3&&(P.setvar("FPS",E),E=0,y-=1e3)),b&&u&&(b=requestAnimationFrame(C))}function z(){let t=n.innerWidth,a=n.innerHeight;f?(P.setvar("WIDTH",c.width=t),P.setvar("HEIGHT",c.height=a)):p&&(d=Math.min(t/P.WIDTH,a/P.HEIGHT),d=(e.pixelart?~~d:d)||1,c.style.width=P.WIDTH*d+"px",c.style.height=P.HEIGHT*d+"px"),P.setvar("CENTERX",P.WIDTH/2),P.setvar("CENTERY",P.HEIGHT/2),(!e.antialias||e.pixelart)&&(g.imageSmoothingEnabled=!1,c.style.imageRendering="pixelated"),P.emit("resized",d),u||(m=performance.now(),requestAnimationFrame(C))}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(P,S,e.__conf);if("object"==typeof t)for(let[e,a]of Object.entries(t))P.setvar(e,a)}if(e.global){if(n.__litecanvas)throw"global litecanvas already instantiated";Object.assign(n,P),n.__litecanvas=P}return"loading"===document.readyState?i(n,"DOMContentLoaded",k):k(),P}})();

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "litecanvas",
-    "version": "0.58.2",
+    "version": "0.60.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,12 +45,10 @@ export default function litecanvas(settings = {}) {
         _fullscreen = settings.fullscreen,
         /** @type {boolean} */
         _autoscale = settings.autoscale,
+        /** @type {boolean} */
+        _animate = settings.animate,
         /** @type {number} */
         _scale = 1,
-        /** @type {number?} */
-        _mouseX,
-        /** @type {number?} */
-        _mouseY,
         /** @type {CanvasRenderingContext2D} */
         _ctx,
         /** @type {number} */
@@ -117,10 +116,16 @@ export default function litecanvas(settings = {}) {
         FPS: settings.fps,
 
         /** @type {number} */
-        CENTERX: null,
+        CENTERX: 0,
+
+        /** @type {number} */
+        CENTERY: 0,
+
+        /** @type {number} */
+        MOUSEX: -1,
 
         /** @type {number} */
-        CENTERY: null,
+        MOUSEY: -1,
 
         /** @type {number[]} */
         DEFAULT_SFX: [0.5, , 1675, , 0.06, 0.2, 1, 1.8, , , 637, 0.06],
@@ -261,7 +266,7 @@ export default function litecanvas(settings = {}) {
          * @returns {number} the random number
          */
         randi: (min = 0, max = 1) =>
-            instance.floor(instance.rand() * (max - min + 1) + min),
+            instance.floor(instance.rand(min, max + 1)),
 
         /**
          * If a value is passed, initializes the random number generator with an explicit seed value.
@@ -399,7 +404,7 @@ export default function litecanvas(settings = {}) {
          * @param {number} [color=3] the color index (generally from 0 to 7)
          */
         text(x, y, text, color = 3) {
-            _ctx.font = `${_fontStyle || ''} ${_fontSize}px ${_fontFamily}`
+            _ctx.font = `${_fontStyle} ${_fontSize}px ${_fontFamily}`
             _ctx.fillStyle = instance.getcolor(color)
             _ctx.fillText(text, ~~x, ~~y)
         },
@@ -423,12 +428,12 @@ export default function litecanvas(settings = {}) {
         },
 
         /**
-         * Sets whether a font should be styled with a normal, italic, or bold.
+         * Sets whether a font should be styled with a "normal", "italic", or "bold".
          *
          * @param {string} style
          */
         textstyle(style) {
-            _fontStyle = style
+            _fontStyle = style || ''
         },
 
         /**
@@ -452,9 +457,9 @@ export default function litecanvas(settings = {}) {
          * @returns {TextMetrics}
          * @see https://developer.mozilla.org/en-US/docs/Web/API/TextMetrics
          */
-        textmetrics(text, size) {
+        textmetrics(text, size = _fontSize) {
             // prettier-ignore
-            _ctx.font = `${_fontStyle || ''} ${(size || _fontSize)}px ${_fontFamily}`
+            _ctx.font = `${_fontStyle} ${size}px ${_fontFamily}`
             const metrics = _ctx.measureText(text)
             metrics.height =
                 metrics.actualBoundingBoxAscent +
@@ -485,7 +490,7 @@ export default function litecanvas(settings = {}) {
          * @see https://developer.mozilla.org/en-US/docs/Web/API/OffscreenCanvas
          */
         paint(width, height, draw, options = {}) {
-            const oc = options.canvas || new OffscreenCanvas(0, 0),
+            const oc = options.canvas || new OffscreenCanvas(1, 1),
                 scale = options.scale || 1,
                 contextBackup = _ctx
 
@@ -539,18 +544,20 @@ export default function litecanvas(settings = {}) {
 
         /**
          * saves the current drawing style settings and transformations
+         *
          * @see https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/save
          */
         push: () => _ctx.save(),
 
         /**
          * restores the drawing style settings and transformations
+         *
          * @see https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/restore
          */
         pop: () => _ctx.restore(),
 
         /**
-         * Adds a translation transformation to the current matrix
+         * Adds a translation to the transformation matrix.
          *
          * @param {number} x
          * @param {number} y
@@ -566,15 +573,13 @@ export default function litecanvas(settings = {}) {
         scale: (x, y) => _ctx.scale(x, y || x),
 
         /**
-         * Adds a rotation to the transformation matrix
+         * Adds a rotation to the transformation matrix.
          *
          * @param {number} radians
          */
         rotate: (radians) => _ctx.rotate(radians),
 
         /**
-         * Adds a transformation that skews to the transformation matrix
-         *
          * @param {number} a
          * @param {number} b
          * @param {number} c
@@ -582,7 +587,9 @@ export default function litecanvas(settings = {}) {
          * @param {number} e
          * @param {number} f
          * @param {boolean} [resetFirst=true] `false` to use _ctx.transform(); by default use _ctx.setTransform()
+         *
          * @see https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/setTransform
+         * @see https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/transform
          */
         transform: (a, b, c, d, e, f, resetFirst = true) =>
             _ctx[resetFirst ? 'setTransform' : 'transform'](a, b, c, d, e, f),
@@ -616,7 +623,11 @@ export default function litecanvas(settings = {}) {
          */
         fill(color, path) {
             _ctx.fillStyle = instance.getcolor(color)
-            _ctx.fill(path)
+            if (path) {
+                _ctx.fill(path)
+            } else {
+                _ctx.fill()
+            }
         },
 
         /**
@@ -627,7 +638,11 @@ export default function litecanvas(settings = {}) {
          */
         stroke(color, path) {
             _ctx.strokeStyle = instance.getcolor(color)
-            path ? _ctx.stroke(path) : _ctx.stroke()
+            if (path) {
+                _ctx.stroke(path)
+            } else {
+                _ctx.stroke()
+            }
         },
 
         /**
@@ -667,17 +682,6 @@ export default function litecanvas(settings = {}) {
             _ctx.clip()
         },
 
-        /**
-         * Sets the type of compositing operation to apply when drawing new shapes.
-         * Default value = 'source-over'.
-         *
-         * @param {string} value
-         * @see https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/globalCompositeOperation
-         */
-        blendmode(value) {
-            _ctx.globalCompositeOperation = value
-        },
-
         /** SOUND API */
         /**
          * Play a sound effects using ZzFX library.
@@ -754,12 +758,6 @@ export default function litecanvas(settings = {}) {
         colcirc: (x1, y1, r1, x2, y2, r2) =>
             (x2 - x1) ** 2 + (y2 - y1) ** 2 <= (r1 + r2) ** 2,
 
-        /**
-         * Get the mouse position
-         * @returns number[]
-         */
-        mousepos: () => [_mouseX, _mouseY],
-
         /**
          * The scale of the game's delta time (dt).
          * Values higher than 1 increase the speed of time, while values smaller than 1 decrease it.
@@ -931,8 +929,13 @@ export default function litecanvas(settings = {}) {
 
             on(_canvas, 'mousemove', (ev) => {
                 ev.preventDefault()
-                const [x, y] = ([_mouseX, _mouseY] = _getXY(ev.pageX, ev.pageY))
+
+                const [x, y] = _getXY(ev.pageX, ev.pageY)
+                instance.setvar('MOUSEX', x)
+                instance.setvar('MOUSEY', y)
+
                 if (!_pressingMouse) return
+
                 instance.emit('tapping', x, y, 0)
                 _updateTap(0, x, y)
             })
@@ -996,9 +999,6 @@ export default function litecanvas(settings = {}) {
 
             on(root, 'blur', () => {
                 _pressingMouse = false
-
-                if (_taps.size === 0) return
-
                 for (const [id, tap] of _taps) {
                     instance.emit('untap', tap.x, tap.y, id)
                     _taps.delete(id)
@@ -1071,7 +1071,7 @@ export default function litecanvas(settings = {}) {
             ticks++
         }
 
-        if (ticks) {
+        if (ticks || !_animate) {
             // default custom values for textAlign & textBaseline
             instance.textalign('start', 'top')
 
@@ -1086,7 +1086,9 @@ export default function litecanvas(settings = {}) {
             }
         }
 
-        if (_rafid) _rafid = requestAnimationFrame(drawFrame)
+        if (_rafid && _animate) {
+            _rafid = requestAnimationFrame(drawFrame)
+        }
     }
 
     function setupCanvas() {
@@ -1128,7 +1130,7 @@ export default function litecanvas(settings = {}) {
                 pageWidth / instance.WIDTH,
                 pageHeight / instance.HEIGHT
             )
-            _scale = settings.pixelart ? Math.floor(_scale) : _scale
+            _scale = (settings.pixelart ? ~~_scale : _scale) || 1
             _canvas.style.width = instance.WIDTH * _scale + 'px'
             _canvas.style.height = instance.HEIGHT * _scale + 'px'
         }
@@ -1143,6 +1145,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',
+    '#000',
     '#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/index.d.ts

@@ -24,6 +24,10 @@ declare global {
     var CENTERX: number
     /** the center Y of the game screen */
     var CENTERY: number
+    /** The current mouse's horizontal (X) position or -1 (if the mouse was not used or detected) */
+    var MOUSEX: number | null
+    /** The current mouse's vertical (Y) position or -1 (if the mouse was not used or detected) */
+    var MOUSEY: number | null
     /** the default `sfx()` sound */
     var DEFAULT_SFX: number[]
 
@@ -418,8 +422,6 @@ declare global {
      */
     function rotate(radians: number): void
     /**
-     * Adds a transformation that skews to the transformation matrix
-     *
      * @param {number} a
      * @param {number} b
      * @param {number} c
@@ -427,7 +429,9 @@ declare global {
      * @param {number} e
      * @param {number} f
      * @param {boolean} [resetFirst=true] `false` to use _ctx.transform(); by default use _ctx.setTransform()
+     *
      * @see https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/setTransform
+     * @see https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/transform
      */
     function transform(
         a: number,
@@ -496,14 +500,6 @@ declare global {
      * @see https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/clip
      */
     function clipcirc(x: number, y: number, radius: number): void
-    /**
-     * Sets the type of compositing operation to apply when drawing new shapes.
-     * Default value = 'source-over'.
-     *
-     * @param {string} value
-     * @see https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/globalCompositeOperation
-     */
-    function blendmode(value: string): void
 
     /** SOUND API */
     /**
@@ -583,12 +579,6 @@ declare global {
         y2: number,
         r2: number
     ): boolean
-    /**
-     * Get the mouse position
-     *
-     * @returns number[]
-     */
-    function mousepos(): number[]
     /**
      * The scale of the game's delta time (dt).
      * Values higher than 1 increase the speed of time, while values smaller than 1 decrease it.

package/types/types.d.ts

@@ -13,6 +13,10 @@ type LitecanvasInstance = {
     CENTERX: number
     /** the center Y of the game screen */
     CENTERY: number
+    /** The current mouse's horizontal (X) position or -1 (if the mouse was not used or detected) */
+    MOUSEX: number
+    /** The current mouse's vertical (Y) position or -1 (if the mouse was not used or detected) */
+    MOUSEY: number
     /** the default `sfx()` sound */
     DEFAULT_SFX: number[]
 
@@ -401,8 +405,6 @@ type LitecanvasInstance = {
      */
     rotate(radians: number): void
     /**
-     * Adds a transformation that skews to the transformation matrix
-     *
      * @param {number} a
      * @param {number} b
      * @param {number} c
@@ -410,7 +412,9 @@ type LitecanvasInstance = {
      * @param {number} e
      * @param {number} f
      * @param {boolean} [resetFirst=true] `false` to use _ctx.transform(); by default use _ctx.setTransform()
+     *
      * @see https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/setTransform
+     * @see https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/transform
      */
     transform(
         a: number,
@@ -479,14 +483,6 @@ type LitecanvasInstance = {
      * @see https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/clip
      */
     clipcirc(x: number, y: number, radius: number): void
-    /**
-     * Sets the type of compositing operation to apply when drawing new shapes.
-     * Default value = 'source-over'.
-     *
-     * @param {string} value
-     * @see https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/globalCompositeOperation
-     */
-    blendmode(value: string): void
 
     /** SOUND API */
     /**
@@ -567,12 +563,6 @@ type LitecanvasInstance = {
         y2: number,
         r2: number
     ): boolean
-    /**
-     * Get the mouse position
-     *
-     * @returns number[]
-     */
-    mousepos(): number[]
     /**
      * The scale of the game's delta time (dt).
      * Values higher than 1 increase the speed of time, while values smaller than 1 decrease it.
@@ -699,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 = {