litecanvas 0.69.4 → 0.71.0

package/README.md

@@ -2,16 +2,16 @@
 
 # Litecanvas
 
-![](https://badgen.net/bundlephobia/min/litecanvas) 
+![](https://badgen.net/bundlephobia/min/litecanvas)
 ![](https://badgen.net/bundlephobia/minzip/litecanvas)
 
-[![Discord Server](https://badgen.net/static/CHAT/ON%20DISCORD/5865f2)](https://discord.com/invite/r2c3rGsvH3)
-[![Discord Server](https://badgen.net/static/FOLLOW/ON%20ITCH.IO/fa5c5c)](https://bills.itch.io/litecanvas)
-
 Litecanvas is a lightweight HTML5 canvas engine suitable for small web games, prototypes, game jams, animations, creative coding, learning game programming and game design, etc.
 
 :warning: **This project is still under development. All feedback is appreciated!** :warning:
 
+[![Discord Server](https://flat.badgen.net/static/CHAT/ON%20DISCORD/5865f2?scale=1.5)](https://discord.com/invite/r2c3rGsvH3)
+[![Discord Server](https://flat.badgen.net/static/FOLLOW/ON%20ITCH.IO/fa5c5c?scale=1.5)](https://bills.itch.io/litecanvas)
+
 ### Features
 
 - **Tiny**: Only `~4KB` (minified + gzipped).
@@ -93,7 +93,7 @@ Try some demos in our playground:
 - [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 rojection](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)
+- [3D projection](https://litecanvas.js.org?c=eJyNVUuP2jAQvudXTA%2FVOsU8y6kt7WVXhftK7W6Ug0PCYggOckxhqfjvHT9CYjYslRC2Z75vPJ5Xcq6yORN%2FWEnCIFjsxFzxQgAXXJEQ%2FgYAORfZnqdqSUYhHkt%2BzGACv2b3j1P4DtOH2c%2FpI%2FyoNn0YwxenxT0StrJYZdbqBCIUAERDCgP8xdQecT%2F0j1pijrG2UHChyprd1T5QaC4xhX4fogOFVwrH2OLaYE1Ni6J7S9MA%2BMauKt7Ku62KuI5VlurHagETL7kO9yA4NbKz26ZMZSRVNkMW1EFUbzAMULAoJJA8U8A19Ssu31wQe3kmXtQSRZ2OJQPMC1Eq1OsIG9Row5TkB9Lr9Swr4nFooNqmLBSzHiJss8uJEaBbv4lxJKTalsVfxT6dsQ5yA%2F%2FcjneuV1Eb3dfMuuwuOGc0vkq%2FuCaj%2BuTFOZVs77pgnpdkEOrgbnflkmhTSjJR5joRVbmPaN0GplnaEjG%2BDL7A6wmnQDh0YBjCRxjT2q3QhyEEtaSBDa3oGoECbwGcTFtt8R3N91YkRiGhrmLqIUBcMbA4GuhfhdCCoSdILhHJGfHZv9ElS1%2Fo4mwyyuZFrsuRIceVbK2Txd7oLhWJIyUtpMSRkkqBGr4AYi%2F6MJlYRAhqiSvgxIMHKQtJ7mY4G3Oegu2JrLwzRWCtyqysGrUt08ZTL9tIsFUX2RF1Zq0sa4Us8wzc1izbd%2BVuYwaBlZyZa8tc6%2Fssc91kguF1dCh5HK1j%2BITxWcfRKnaAk1utayhHe0gJKt1JP1dmaieFxnjZqztfspRjN9h7HfrqrJ8X5ZlgBqdoHJtAX%2BPTBm5otvnz9J4%2FF2b8W658kS599J15x5Pn%2F%2FfkWhxuB%2BHNJ7PpiTfR3ffRdyY6YF9Gr%2FrvGGvyP3c3Xb8%3D)
 - [Rendering Benchmark](https://litecanvas.js.org?c=eJylVu1z2jYY%2F%2B6%2FQkd3Z7shAgOhCQXvctlu61229ZrtE8ddhC1Ai7CoJJK4Kf%2F7HknGGHBot%2BkDSM%2FLT8%2B7nIhMaZSITEvBFRqhVCTrJc00TiQlmv7MqTkFfsoe%2FdDbCmKWZVT%2B%2Budvt6By7w2VzjmNPYJJotkjRS8egjUD6fMnyuYLPUBTwdP33sYbtgrhIUDGVg7Upcjm8fVSrDM9MBL27JgELSSdjRo%2FEsseRe12A6VEk%2FOC0DCUGH6GLfKKzsWRjqHEF6d0ALDmInPTw%2BtKnWMlS4o7J5R6x0qWFPdOKF0eK1lSfHlCKerXONV3XvVP6HVr%2FHK0uFt4NmzZfJqsIpvhUWMlFNNMZAMkKSemMBoFvhFi6aihNNGqERe6lpWQ7JEoy00Mx523%2BPdeWaBTkeZ4JemKZmmwLczwgG8twYngQkKl%2Bm%2BiKPJrRaYkeZhL8Cy9KYVns5nveZxqtJYcKBl9Qn99ug24SIjxK2xak40TFNiu6M3S%2BYoOkK9WkmnqN0t6YusbnQEcVpTIZPGRSLJUeE6hxVxg%2FRB9%2FYqg0nZqTyzViwHQOr0dcVH0Ve%2BykNzsrDGNnK05B%2BPBABfBwJlXYFmbsT04tS2cY7iT4zj1wW4yfF5Tmd9RThMtZOC%2FSWAwbELPm62zxIQFsYzpICziwQVJ7xLJVuDhQuuVGrRaS5kKMcVzphfrKWaiZY3Gf6vWdM14WhyXLAOS30SANYrL8JYOQjbuzL5Kx2ohnj6SjPKgHe4xUrEsUr0tS5NjMlWCryFJheyrTloQP8RkZertZgFmBiWwu8nEoKwH7JIPd6wIgwFa5i3qNGv343Jnlo9h9WCZ%2F0oF7XiEvMJrtw2v3a7ldQxmp4b3DlYX1gWsI16%2F%2F64bRd2L6fTf8U5gGluuYNXZYny4ury8qvcBY8N7LS4G84A32W1f9hRUQjj0aXfH39hdWE0j%2B2KSWM2paxuX61YLQQtrlnCK7IsJdeW6xj6sq4K3rddrKUkeODA7DMKKcMrM2BlHTXQeTYoHVKLAzB8GjPZ7%2BBuiijIQzs7CilMO5xmEJYGhGKK31UZH5xWfDnTyYx03A04pjdPnJkrzibF6L7AWCfzoGjRwa2wILGg3URROmv9FdFLuypCOmbn4BYENOZhhTSkSuKk2YjUH5d6rxJ2z7KH65bPf%2BvfjvVfvh5dKAjaNyb3LIJtBogCnmg1zxgknSt0ypTFJU5jx9vvILwZGaYSAscTFPLj%2FBMOFSpbN0f5FyJWegsqGGzeVYZtK8lQOWyjHGw4PC9ILWgxudwdXZh6Wpt7%2Bcf3Th99%2FCeFh1muZ7cKl8JTOWRaEx%2BVNMrY8Vd8H0f4fBSyrmYI0eyVf4md0DpWK0%2BcKLS9o%2BU7QOGmEh6gdHnS9IYMxB7T0Gb0dQePtRgGiXNECKK8HyuuA8kOgY6vOqsMlrvZovbHfbOLv86H2Wtfm9b59exB8h89LMqfG66YBbe5N0vCwWxU2H3OmwP8BV89smg%3D%3D)
 
 _See other demos in [samples](samples) folder_

package/dist/dist.js

@@ -64,7 +64,7 @@
       animate: true
     };
     settings = Object.assign(defaults, settings);
-    let _initialized = false, _plugins = [], _canvas = settings.canvas || document.createElement("canvas"), _fullscreen = settings.fullscreen, _autoscale = settings.autoscale, _animated = settings.animate, _scale = 1, _ctx, _timeScale = 1, _lastFrame, _step, _stepMs, _accumulated = 0, _focused = true, _fontFamily = "sans-serif", _fontStyle = "", _fontSize = 32, _rng_seed = Date.now(), _global = settings.global, _events = {
+    let _initialized = false, _plugins = [], _canvas = settings.canvas || document.createElement("canvas"), _fullscreen = settings.fullscreen, _autoscale = settings.autoscale, _animated = settings.animate, _scale = 1, _ctx, _outline_fix = 0.5, _timeScale = 1, _lastFrame, _step, _stepMs, _accumulated = 0, _focused = true, _fontFamily = "sans-serif", _fontStyle = "", _fontSize = 32, _rng_seed = Date.now(), _global = settings.global, _events = {
       init: null,
       update: null,
       draw: null,
@@ -231,7 +231,7 @@
       /**
        * Clear the game screen
        *
-       * @param {number|null} color The background color (from 0 to 7) or null (for transparent)
+       * @param {number|null} color The background color (index) or null (for transparent)
        */
       cls(color) {
         let width = _ctx.canvas.width, height = _ctx.canvas.height;
@@ -248,12 +248,18 @@
        * @param {number} y
        * @param {number} width
        * @param {number} height
-       * @param {number} [color=0] the color index (generally from 0 to 7)
+       * @param {number} [color=0] the color index
        * @param {number|number[]} [radii] A number or list specifying the radii used to draw a rounded-borders rectangle
        */
       rect(x, y, width, height, color = 0, radii = null) {
         _ctx.beginPath();
-        _ctx[radii ? "roundRect" : "rect"](~~x, ~~y, width, height, radii);
+        _ctx[radii ? "roundRect" : "rect"](
+          ~~x + _outline_fix,
+          ~~y + _outline_fix,
+          ~~width,
+          ~~height,
+          radii
+        );
         instance.stroke(color);
       },
       /**
@@ -263,12 +269,18 @@
        * @param {number} y
        * @param {number} width
        * @param {number} height
-       * @param {number} [color=0] the color index (generally from 0 to 7)
+       * @param {number} [color=0] the color index
        * @param {number|number[]} [radii] A number or list specifying the radii used to draw a rounded-borders rectangle
        */
       rectfill(x, y, width, height, color = 0, radii = null) {
         _ctx.beginPath();
-        _ctx[radii ? "roundRect" : "rect"](~~x, ~~y, width, height, radii);
+        _ctx[radii ? "roundRect" : "rect"](
+          ~~x,
+          ~~y,
+          ~~width,
+          ~~height,
+          radii
+        );
         instance.fill(color);
       },
       /**
@@ -277,11 +289,17 @@
        * @param {number} x
        * @param {number} y
        * @param {number} radius
-       * @param {number} [color=0] the color index (generally from 0 to 7)
+       * @param {number} [color=0] the color index
        */
       circ(x, y, radius, color) {
         _ctx.beginPath();
-        _ctx.arc(~~x, ~~y, radius, 0, TWO_PI);
+        _ctx.arc(
+          ~~x + _outline_fix,
+          ~~y + _outline_fix,
+          ~~radius,
+          0,
+          TWO_PI
+        );
         instance.stroke(color);
       },
       /**
@@ -290,11 +308,11 @@
        * @param {number} x
        * @param {number} y
        * @param {number} radius
-       * @param {number} [color=0] the color index (generally from 0 to 7)
+       * @param {number} [color=0] the color index
        */
       circfill(x, y, radius, color) {
         _ctx.beginPath();
-        _ctx.arc(~~x, ~~y, radius, 0, TWO_PI);
+        _ctx.arc(~~x, ~~y, ~~radius, 0, TWO_PI);
         instance.fill(color);
       },
       /**
@@ -304,12 +322,12 @@
        * @param {number} y1
        * @param {number} x2
        * @param {number} y2
-       * @param {number} [color=0] the color index (generally from 0 to 7)
+       * @param {number} [color=0] the color index
        */
       line(x1, y1, x2, y2, color) {
         _ctx.beginPath();
-        _ctx.moveTo(~~x1, ~~y1);
-        _ctx.lineTo(~~x2, ~~y2);
+        _ctx.moveTo(~~x1 + _outline_fix, ~~y1 + _outline_fix);
+        _ctx.lineTo(~~x2 + _outline_fix, ~~y2 + _outline_fix);
         instance.stroke(color);
       },
       /**
@@ -319,7 +337,8 @@
        * @see https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineWidth
        */
       linewidth(value) {
-        _ctx.lineWidth = value;
+        _ctx.lineWidth = ~~value;
+        _outline_fix = ~~value % 2 === 0 ? 0 : 0.5;
       },
       /**
        * Sets the line dash pattern used when drawing lines
@@ -340,7 +359,7 @@
        * @param {number} x
        * @param {number} y
        * @param {string} text the text message
-       * @param {number} [color=3] the color index (generally from 0 to 7)
+       * @param {number} [color=3] the color index
        */
       text(x, y, text, color = 3) {
         _ctx.font = `${_fontStyle} ${_fontSize}px ${_fontFamily}`;
@@ -491,19 +510,6 @@
        * @param {number} radians
        */
       rotate: (radians) => _ctx.rotate(radians),
-      /**
-       * @param {number} a
-       * @param {number} b
-       * @param {number} c
-       * @param {number} d
-       * @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),
       /**
        * Sets the alpha (opacity) value to apply when drawing new shapes and images
        *

package/dist/dist.min.js

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

package/package.json

@@ -1,14 +1,14 @@
 {
     "name": "litecanvas",
-    "version": "0.69.4",
+    "version": "0.71.0",
     "description": "Lightweight HTML5 canvas engine suitable for small games and animations.",
     "license": "MIT",
     "author": "Luiz Bills <luizbills@pm.me>",
     "contributors": [],
     "devDependencies": {
-        "@swc/core": "^1.7.26",
-        "ava": "^6.1.3",
-        "esbuild": "^0.24.0",
+        "@swc/core": "^1.10.15",
+        "ava": "^6.2.0",
+        "esbuild": "^0.24.2",
         "prettier": "^3.4.2"
     },
     "homepage": "https://litecanvas.github.io/about.html",

package/src/index.js

@@ -60,6 +60,8 @@ export default function litecanvas(settings = {}) {
         /** @type {CanvasRenderingContext2D} */
         _ctx,
         /** @type {number} */
+        _outline_fix = 0.5,
+        /** @type {number} */
         _timeScale = 1,
         /** @type {number} */
         _lastFrame,
@@ -286,7 +288,7 @@ export default function litecanvas(settings = {}) {
         /**
          * Clear the game screen
          *
-         * @param {number|null} color The background color (from 0 to 7) or null (for transparent)
+         * @param {number|null} color The background color (index) or null (for transparent)
          */
         cls(color) {
             let width = _ctx.canvas.width,
@@ -305,12 +307,18 @@ export default function litecanvas(settings = {}) {
          * @param {number} y
          * @param {number} width
          * @param {number} height
-         * @param {number} [color=0] the color index (generally from 0 to 7)
+         * @param {number} [color=0] the color index
          * @param {number|number[]} [radii] A number or list specifying the radii used to draw a rounded-borders rectangle
          */
         rect(x, y, width, height, color = 0, radii = null) {
             _ctx.beginPath()
-            _ctx[radii ? 'roundRect' : 'rect'](~~x, ~~y, width, height, radii)
+            _ctx[radii ? 'roundRect' : 'rect'](
+                ~~x + _outline_fix,
+                ~~y + _outline_fix,
+                ~~width,
+                ~~height,
+                radii
+            )
             instance.stroke(color)
         },
 
@@ -321,12 +329,18 @@ export default function litecanvas(settings = {}) {
          * @param {number} y
          * @param {number} width
          * @param {number} height
-         * @param {number} [color=0] the color index (generally from 0 to 7)
+         * @param {number} [color=0] the color index
          * @param {number|number[]} [radii] A number or list specifying the radii used to draw a rounded-borders rectangle
          */
         rectfill(x, y, width, height, color = 0, radii = null) {
             _ctx.beginPath()
-            _ctx[radii ? 'roundRect' : 'rect'](~~x, ~~y, width, height, radii)
+            _ctx[radii ? 'roundRect' : 'rect'](
+                ~~x,
+                ~~y,
+                ~~width,
+                ~~height,
+                radii
+            )
             instance.fill(color)
         },
 
@@ -336,11 +350,17 @@ export default function litecanvas(settings = {}) {
          * @param {number} x
          * @param {number} y
          * @param {number} radius
-         * @param {number} [color=0] the color index (generally from 0 to 7)
+         * @param {number} [color=0] the color index
          */
         circ(x, y, radius, color) {
             _ctx.beginPath()
-            _ctx.arc(~~x, ~~y, radius, 0, TWO_PI)
+            _ctx.arc(
+                ~~x + _outline_fix,
+                ~~y + _outline_fix,
+                ~~radius,
+                0,
+                TWO_PI
+            )
             instance.stroke(color)
         },
 
@@ -350,11 +370,11 @@ export default function litecanvas(settings = {}) {
          * @param {number} x
          * @param {number} y
          * @param {number} radius
-         * @param {number} [color=0] the color index (generally from 0 to 7)
+         * @param {number} [color=0] the color index
          */
         circfill(x, y, radius, color) {
             _ctx.beginPath()
-            _ctx.arc(~~x, ~~y, radius, 0, TWO_PI)
+            _ctx.arc(~~x, ~~y, ~~radius, 0, TWO_PI)
             instance.fill(color)
         },
 
@@ -365,12 +385,14 @@ export default function litecanvas(settings = {}) {
          * @param {number} y1
          * @param {number} x2
          * @param {number} y2
-         * @param {number} [color=0] the color index (generally from 0 to 7)
+         * @param {number} [color=0] the color index
          */
         line(x1, y1, x2, y2, color) {
             _ctx.beginPath()
-            _ctx.moveTo(~~x1, ~~y1)
-            _ctx.lineTo(~~x2, ~~y2)
+            _ctx.moveTo(~~x1 + _outline_fix, ~~y1 + _outline_fix)
+            _ctx.lineTo(~~x2 + _outline_fix, ~~y2 + _outline_fix)
+            // _ctx.moveTo(~~x1, ~~y1)
+            // _ctx.lineTo(~~x2, ~~y2)
             instance.stroke(color)
         },
 
@@ -381,7 +403,8 @@ export default function litecanvas(settings = {}) {
          * @see https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineWidth
          */
         linewidth(value) {
-            _ctx.lineWidth = value
+            _ctx.lineWidth = ~~value
+            _outline_fix = ~~value % 2 === 0 ? 0 : 0.5
         },
 
         /**
@@ -404,7 +427,7 @@ export default function litecanvas(settings = {}) {
          * @param {number} x
          * @param {number} y
          * @param {string} text the text message
-         * @param {number} [color=3] the color index (generally from 0 to 7)
+         * @param {number} [color=3] the color index
          */
         text(x, y, text, color = 3) {
             _ctx.font = `${_fontStyle} ${_fontSize}px ${_fontFamily}`
@@ -584,21 +607,6 @@ export default function litecanvas(settings = {}) {
          */
         rotate: (radians) => _ctx.rotate(radians),
 
-        /**
-         * @param {number} a
-         * @param {number} b
-         * @param {number} c
-         * @param {number} d
-         * @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),
-
         /**
          * Sets the alpha (opacity) value to apply when drawing new shapes and images
          *

package/types/index.d.ts

@@ -429,27 +429,6 @@ declare global {
      * @param radians
      */
     function rotate(radians: number): void
-    /**
-     * @param a
-     * @param b
-     * @param c
-     * @param d
-     * @param e
-     * @param f
-     * @param [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,
-        b: number,
-        c: number,
-        d: number,
-        e: number,
-        f: number,
-        resetFirst?: boolean
-    ): void
     /**
      * Sets the alpha (transparency) value to apply when drawing new shapes and images
      *

package/types/types.d.ts

@@ -407,27 +407,6 @@ type LitecanvasInstance = {
      * @param radians
      */
     rotate(radians: number): void
-    /**
-     * @param a
-     * @param b
-     * @param c
-     * @param d
-     * @param e
-     * @param f
-     * @param [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,
-        b: number,
-        c: number,
-        d: number,
-        e: number,
-        f: number,
-        resetFirst?: boolean
-    ): void
     /**
      * Sets the alpha (transparency) value to apply when drawing new shapes and images
      *