litecanvas 0.67.2 → 0.68.0

package/LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2024 Luiz Bills
+Copyright (c) 2025 Luiz Bills
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

package/README.md

@@ -10,12 +10,12 @@ Litecanvas is a lightweight HTML5 canvas engine suitable for small web games, pr
 
 ### Features
 
--   **Tiny**: Only `~4KB` (minified + gzipped).
--   **Simple API**: Just few functions to draw shapes and some utilities.
--   **Predefined colors**: Just use a number (from 0 to 11) to choose a color in our 12-color palette.
--   **ZzFX**: Play or create sound effects with [ZzFX](https://killedbyapixel.github.io/ZzFX/).
--   **Extensible**: Use or create [plugins](https://www.npmjs.com/search?q=keywords:litecanvas) to add functionalities or change the engine.
--   **Playground**: Access or install the [playground](https://litecanvas.js.org/) webapp to code and share games (even offline).
+- **Tiny**: Only `~4KB` (minified + gzipped).
+- **Simple API**: Just few functions to draw shapes and some utilities.
+- **Predefined colors**: Just use a number (from 0 to 11) to choose a color in our 12-color palette.
+- **ZzFX**: Play or create sound effects with [ZzFX](https://killedbyapixel.github.io/ZzFX/).
+- **Extensible**: Use or create [plugins](https://www.npmjs.com/search?q=keywords:litecanvas) to add functionalities or change the engine.
+- **Playground**: Access or install the [playground](https://litecanvas.js.org/) webapp to code and share games (even offline).
 
 [Learn more in the cheatsheet...](https://litecanvas.js.org/about.html)
 
@@ -38,12 +38,12 @@ npm install litecanvas
 ```
 
 ```js
-// import the engine or put the script in your HTML
+// import the package or put the CDN script in your HTML
 // CDN: https://unpkg.com/litecanvas/dist/dist.min.js
 import litecanvas from 'litecanvas'
 
-// you can setup other configurations here
-// learn more in the cheatsheet
+// Start and setup the engine
+// learn more: https://litecanvas.js.org/about.html#settings
 litecanvas({
     loop: { init, update, draw, tapped },
 })
@@ -86,18 +86,19 @@ Check out our [Cheatsheet](https://litecanvas.js.org/about.html).
 
 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)
--   [Rendering Benchmark](https://litecanvas.js.org?c=eJylVlGP4jYQfs%2BvsGilJLchS4DlWA5SnVatWmkrne7aJ4SESQxYaxJqm13SPf57x3ZIDGS5a%2BsH4szMN57xfDMhyTMhUZJnkudMoAlK82S3IZkME06wJD8zot48N6XPru8cDUOaZYT%2F%2BsfvjwCZO2MhC0ZiB4c4kfSZoFcHwVqCdfuF0NVajtAiZ%2BkH5%2BCMb0vjMbiMAcnzbBX%2F8unLSGn0CxqLLc4QTSet5Va0YlDAOzwUwuC0%2FyP44ybfZbLGGyVGa06Wk9ZPWKsnUafTQimWuF0KWkoSw8%2F4Fr%2BBubvAKEl8dw0DDhsOUic9vQ3qXoK0KO5eAfUvQVoU96%2BAhpcgLYqHV0DRoCGpgclqcAXXa8jLyOJemZmp6typiLfI0yLccrIlWeodCeef6TWHwiRnOQcGuj9EUeQ2mixw8rTicHL6UBkvl0vXUVwG6u84A1lGXtCfnx89lidY0jzzA52PkNACoDZ0VksWWzJCrthyKokbVPJEMxDdgLtQEMyT9SfM8UaEKwLNY1J3ffT1KwIu1LAXmsr1CGTdfi1clx3TH1qW0AhlL47qHv1rR3jxhTCSyJx7kNhWuGXoB8dhEGKCs2csPJNAeZrOKtQvxvZ4oFGYt8A5%2BI6z3GWJug9EMyo9v7wIY2fuAG5niylMiCrSqBs07qfVTi03hNWHpZ7WRdY6jN%2FQdTpK1%2Bk06rrKZ7dB9x5WD9YdrAvdYPC%2BF0W9u8Xi3%2Bmu%2BFSx3MNqikXlcD8c3jfnEIZK99a9KJ9nulm9fT0BiAQzoGuv1h%2F0zrfLSP9WRbRrarjhaKPbWwRMljRhBOlPArBBK0z7bEudKJvoI%2Be48Iwz3RO%2BZZxS1X%2FTKEDtaFZ%2BITjyGJGIgqLzAR5jZIFBcHPjW0kZP3sw5himg4%2Fe2WxGbSunM0xxiTFEvwaapvsApcVMRX1ysdoT5NFT3iCtqRJQrxOgyJ8F%2F8V0Vu2qK51SdfArghgKCEOHUhbw4FgVtGtQ7UsDIn%2FLJOHPmHmQ%2BSS27tKA67kSSrKXDzBvYQ%2Be4ItsjgoQDGy7jIxmT%2FY%2FhdMpNJ%2BeTPsfX616HlqzufFEl1B38GMXV72HCcNCPFIhQ5ymMDn1%2FwnXd2ryqiBymOwsX3nzz%2FCRIJxmK3R6EDJMFtAocOLBmmQpxy%2FVJAN2PzAY10iugd56VpozmPAg54sOwBndXGuBs4L8D45zu5jABKfS83CP2kDmMN1bsqKUFbWhumNlPEYd%2F2wwKDEEcyZL9%2BjdBHqznhaIMEFKR0Wzo6LJUXHu6DKqG3v%2BxHYbNwf7zT7%2FvhwajzWToDm3b8%2BK78h5g1dEZR0op8HJsD1S%2B%2BD8A9I%2FGIM%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 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)
+- [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_
 
 ## Inspirations
 
--   [floppy](https://github.com/lpagg/floppy): a micro game engine for beginners.
--   [PICO-8](https://www.lexaloffle.com/pico-8.php): fantasy console for making, sharing and playing tiny games.
--   [js13kGames](https://js13kgames.com/): a JavaScript coding competition with size limit set to 13 kilobytes.
--   [raylib](https://www.raylib.com/): a simple and easy-to-use gamedev library.
--   [p5.js/Processing](https://p5js.org/): a library for creative coding.
+- [floppy](https://github.com/lpagg/floppy): a micro game engine for beginners.
+- [PICO-8](https://www.lexaloffle.com/pico-8.php): fantasy console for making, sharing and playing tiny games.
+- [js13kGames](https://js13kgames.com/): a JavaScript coding competition with size limit set to 13 kilobytes.
+- [raylib](https://www.raylib.com/): a simple and easy-to-use gamedev library.
+- [p5.js/Processing](https://p5js.org/): a library for creative coding.
+- [Pygame Zero](https://github.com/lordmauve/pgzero): A zero-boilerplate games programming framework for Python 3.

package/dist/dist.js

@@ -42,7 +42,12 @@
 
   // src/index.js
   function litecanvas(settings = {}) {
-    const root = globalThis, PI = Math.PI, TWO_PI = PI * 2, raf = requestAnimationFrame, on = (elem, evt, callback) => elem.addEventListener(evt, callback), defaults = {
+    const root = globalThis, PI = Math.PI, TWO_PI = PI * 2, raf = requestAnimationFrame, _browerEventListeners = [], on = (elem, evt, callback) => {
+      elem.addEventListener(evt, callback, false);
+      _browerEventListeners.push(
+        () => elem.removeEventListener(evt, callback, false)
+      );
+    }, defaults = {
       fps: 60,
       fullscreen: true,
       width: null,
@@ -59,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, _drawCount = 0, _nextFpsUpdate = 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, _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 = {
       init: null,
       update: null,
       draw: null,
@@ -82,8 +87,6 @@
       /** @type {number} */
       ELAPSED: 0,
       /** @type {number} */
-      FPS: 0,
-      /** @type {number} */
       CENTERX: 0,
       /** @type {number} */
       CENTERY: 0,
@@ -668,7 +671,7 @@
        */
       setvar(key, value) {
         instance[key] = value;
-        if (settings.global) {
+        if (_global) {
           root[key] = value;
         }
       },
@@ -702,6 +705,21 @@
         _step = 1 / fps;
         _stepMs = _step * 1e3;
         _accumulated = 0;
+      },
+      /**
+       * Stops the litecanvas instance and remove all event listeners.
+       */
+      quit() {
+        _focused = _events = false;
+        for (const removeListener of _browerEventListeners) {
+          removeListener();
+        }
+        if (_global) {
+          for (const key in instance) {
+            delete root[key];
+          }
+        }
+        delete root.__litecanvas;
       }
     };
     for (const k of [
@@ -727,7 +745,7 @@
     function init() {
       _initialized = true;
       const source = settings.loop ? settings.loop : root;
-      for (const event of Object.keys(_events)) {
+      for (const event in _events) {
         if (source[event]) instance.listen(event, source[event]);
       }
       for (const plugin of _plugins) {
@@ -848,34 +866,27 @@
         });
         on(root, "focus", () => {
           _lastFrame = performance.now();
-          raf(drawFrame);
           _focused = true;
+          raf(drawFrame);
         });
       }
       instance.setfps(settings.fps);
       instance.emit("init", instance);
       _lastFrame = performance.now();
-      _nextFpsUpdate = _lastFrame + 1e3;
       raf(drawFrame);
     }
     function drawFrame(now) {
-      let emitDraw = !_animated, dt = now - _lastFrame;
-      _accumulated += dt > 1e3 ? _stepMs : dt;
+      let emitDraw = !_animated, delta = now - _lastFrame;
+      _accumulated += delta > 1e3 ? _stepMs : delta;
       while (_accumulated >= _stepMs) {
         instance.emit("update", _step * _timeScale);
         instance.setvar("ELAPSED", instance.ELAPSED + _step * _timeScale);
         _accumulated -= _stepMs;
-        emitDraw = true;
+        emitDraw = 1;
       }
       if (emitDraw) {
         instance.textalign("start", "top");
         instance.emit("draw");
-        _drawCount++;
-        if (now + _accumulated > _nextFpsUpdate) {
-          instance.setvar("FPS", _drawCount);
-          _drawCount = 0;
-          _nextFpsUpdate = now + 1e3;
-        }
       }
       _lastFrame = now;
       if (_focused && _animated) {
@@ -890,30 +901,28 @@
       if (instance.WIDTH > 0) {
         _fullscreen = false;
       }
+      _canvas.style = "";
       _canvas.width = instance.WIDTH;
       _canvas.height = instance.HEIGHT || instance.WIDTH;
       if (!_canvas.parentNode) document.body.appendChild(_canvas);
-      _canvas.style.display = "block";
-      if (_fullscreen) {
-        _canvas.style.position = "absolute";
-        _canvas.style.inset = 0;
-      } else if (_autoscale) {
-        _canvas.style.margin = "auto";
-      }
     }
     function pageResized() {
-      const pageWidth = root.innerWidth, pageHeight = root.innerHeight;
+      const pageWidth = root.innerWidth, pageHeight = root.innerHeight, styles = _canvas.style;
+      styles.display = "block";
       if (_fullscreen) {
+        styles.position = "absolute";
+        styles.inset = 0;
         instance.setvar("WIDTH", _canvas.width = pageWidth);
         instance.setvar("HEIGHT", _canvas.height = pageHeight);
       } else if (_autoscale) {
+        styles.margin = "auto";
         _scale = Math.min(
           pageWidth / instance.WIDTH,
           pageHeight / instance.HEIGHT
         );
         _scale = (settings.pixelart ? ~~_scale : _scale) || 1;
-        _canvas.style.width = instance.WIDTH * _scale + "px";
-        _canvas.style.height = instance.HEIGHT * _scale + "px";
+        styles.width = instance.WIDTH * _scale + "px";
+        styles.height = instance.HEIGHT * _scale + "px";
       }
       instance.setvar("CENTERX", instance.WIDTH / 2);
       instance.setvar("CENTERY", instance.HEIGHT / 2);
@@ -940,7 +949,7 @@
         }
       }
     }
-    if (settings.global) {
+    if (_global) {
       if (root.__litecanvas) {
         throw "global litecanvas already instantiated";
       }

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,g=0,h=0,m=0,v=0,T=1,b=0,x=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,S=0,k=0,A=1,C=0,O=0,P=0,X=E<0?-1:1,L=w*X*E*2/44100,W=y.cos(L),z=y.sin,M=z(L)/4,Y=1+M,F=-2*W/Y,_=(1-M)/Y,B=(1+X*W)/2/Y,G=-(X+W)/Y,R=0,N=0,j=0,U=0;for(n=44100*n+9,b*=44100,i*=44100,r*=44100,v*=44100,f*=500*w/85766121e6,h*=w/44100,u*=w/44100,p*=44100,d=44100*d|0,t*=.3*(globalThis.zzfxV||1),X=n+b+i+r+v|0;k<X;a[k++]=P*t)++O%(100*m|0)||(P=o?1<o?2<o?3<o?z(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):z(I),P=(d?1-x+x*z(w*k/d):1)*(P<0?-1:1)*y.abs(P)**s*(k<n?k/n:k<n+b?1-(k-n)/b*(1-T):k<n+b+i?T:k<X-v?(X-k-v)/r*T:0),P=v?P/2+(v>k?0:(k<X-v?1:(X-k)/v)*a[k-v|0]/2/t):P,E&&(P=U=B*R+G*(R=N)+B*(N=P)-_*j-F*(j=U))),I+=(L=(l+=c+=f)*y.cos(h*S++))+L*g*z(k**5),A&&++A>p&&(l+=u,D+=u,A=0),!d||++C%d||(l=D,c=H,A=A||1);(t=e.createBuffer(1,X,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=(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 s=!1,c=[],f=e.canvas||document.createElement("canvas"),u=e.fullscreen,p=e.autoscale,d=e.animate,g=1,h,m=1,v,T,b,x=0,E=!0,y=0,w=0,H="sans-serif",D="",I=32,S=Date.now(),k={init:null,update:null,draw:null,resized:null,tap:null,untap:null,tapping:null,tapped:null},A={settings:Object.assign({},e),colors:a},C={WIDTH:e.width,HEIGHT:e.height||e.width,CANVAS:null,ELAPSED:0,FPS: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)=>(S=(1664525*S+0x3c6ef35f)%0x100000000)/0x100000000*(t-e)+e,randi:(e=0,t=1)=>Math.floor(C.rand(e,t+1)),seed:e=>null==e?S:S=~~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,i=null){h.beginPath(),h[i?"roundRect":"rect"](~~e,~~t,a,l,i),C.stroke(n)},rectfill(e,t,a,l,n=0,i=null){h.beginPath(),h[i?"roundRect":"rect"](~~e,~~t,a,l,i),C.fill(n)},circ(e,t,a,l){h.beginPath(),h.arc(~~e,~~t,a,0,i),C.stroke(l)},circfill(e,t,a,l){h.beginPath(),h.arc(~~e,~~t,a,0,i),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(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=I){h.font=`${D} ${t}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(1,1),i=l.scale||1,r=h;if(n.width=e*i,n.height=t*i,(h=n.getContext("2d")).scale(i,i),a.push){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(h);return h=r,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,i,r=!0)=>h[r?"setTransform":"transform"](e,t,a,l,n,i),alpha(e){h.globalAlpha=C.clamp(e,0,1)},path:e=>new Path2D(e),fill(e,t){h.fillStyle=C.getcolor(e),t?h.fill(t):h.fill()},stroke(e,t){h.strokeStyle=C.getcolor(e),t?h.stroke(t):h.stroke()},clip(e){h.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={}){e.__conf=t,s?W(e):c.push(e)},listen:(e,t)=>(k[e]=k[e]||new Set,k[e].add(t),()=>k[e].delete(t)),emit(e,t,a,l,n){L("before:"+e,t,a,l,n),L(e,t,a,l,n),L("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",f.width=e),C.setvar("HEIGHT",f.height=t||e),X()},timescale(e){m=e},setfps(e){b=1e3*(T=1/e),x=0}};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 O(){s=!0;let t=e.loop?e.loop:l;for(let e of Object.keys(k))t[e]&&C.listen(e,t[e]);for(let e of c)W(e);if((u||p)&&o(l,"resize",X),X(),e.tapEvents){let e=(e,t)=>[(e-f.offsetLeft)/g,(t-f.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;o(f,"mousedown",t=>{t.preventDefault();let[l,n]=e(t.pageX,t.pageY);C.emit("tap",l,n,0),a(0,l,n),r=!0}),o(f,"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))}),o(f,"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}),o(f,"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)}}),o(f,"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)||(i(l)&&C.emit("tapped",l.startX,l.startY,e),C.emit("untap",l.x,l.y,e),t.delete(e))};o(f,"touchend",s),o(f,"touchcancel",s),o(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())),o(l,"keydown",t=>{e.add(t.key.toLowerCase())}),o(l,"keyup",t=>{e.delete(t.key.toLowerCase())}),o(l,"blur",()=>e.clear())}e.pauseOnBlur&&(o(l,"blur",()=>{E=!1}),o(l,"focus",()=>{v=performance.now(),r(P),E=!0})),C.setfps(e.fps),C.emit("init",C),w=(v=performance.now())+1e3,r(P)}function P(e){let t=!d,a=e-v;for(x+=a>1e3?b:a;x>=b;)C.emit("update",T*m),C.setvar("ELAPSED",C.ELAPSED+T*m),x-=b,t=!0;t&&(C.textalign("start","top"),C.emit("draw"),y++,e+x>w&&(C.setvar("FPS",y),y=0,w=e+1e3)),v=e,E&&d&&r(P)}function X(){let t=l.innerWidth,a=l.innerHeight;u?(C.setvar("WIDTH",f.width=t),C.setvar("HEIGHT",f.height=a)):p&&(g=Math.min(t/C.WIDTH,a/C.HEIGHT),g=(e.pixelart?~~g:g)||1,f.style.width=C.WIDTH*g+"px",f.style.height=C.HEIGHT*g+"px"),C.setvar("CENTERX",C.WIDTH/2),C.setvar("CENTERY",C.HEIGHT/2),(!e.antialias||e.pixelart)&&(h.imageSmoothingEnabled=!1,f.style.imageRendering="pixelated"),C.emit("resized",g),d||r(P)}function L(e,t,a,l,n){if(k[e])for(let i of k[e])i(t,a,l,n)}function W(e){let t=e(C,A,e.__conf);if("object"==typeof t)for(let e of Object.keys(t))C.setvar(e,t[e])}if(e.global){if(l.__litecanvas)throw"global litecanvas already instantiated";Object.assign(l,C),l.__litecanvas=C}return f="string"==typeof f?document.querySelector(f):f,C.setvar("CANVAS",f),h=f.getContext("2d"),o(f,"click",()=>l.focus()),C.WIDTH>0&&(u=!1),f.width=C.WIDTH,f.height=C.HEIGHT||C.WIDTH,f.parentNode||document.body.appendChild(f),f.style.display="block",u?(f.style.position="absolute",f.style.inset=0):p&&(f.style.margin="auto"),"loading"===document.readyState?o(l,"DOMContentLoaded",()=>r(O)):r(O),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,g=0,h=0,m=0,v=0,E=1,T=0,x=0,b=0)=>{let w=Math,H=2*w.PI,D=c*=500*H/44100/44100,y=l*=(1-a+2*a*w.random(a=[]))*H/44100,I=0,S=0,A=0,k=1,C=0,L=0,X=0,O=b<0?-1:1,W=H*O*b*2/44100,_=w.cos(W),z=w.sin,M=z(W)/4,P=1+M,Y=-2*_/P,B=(1-M)/P,F=(1+O*_)/2/P,G=-(O+_)/P,R=0,N=0,U=0,$=0;for(n=44100*n+9,T*=44100,i*=44100,r*=44100,v*=44100,f*=500*H/85766121e6,h*=H/44100,u*=H/44100,p*=44100,d=44100*d|0,t*=.3*(globalThis.zzfxV||1),O=n+T+i+r+v|0;A<O;a[A++]=X*t)++L%(100*m|0)||(X=o?1<o?2<o?3<o?z(I*I):w.max(w.min(w.tan(I),1),-1):1-(2*I/H%2+2)%2:1-4*w.abs(w.round(I/H)-I/H):z(I),X=(d?1-x+x*z(H*A/d):1)*(X<0?-1:1)*w.abs(X)**s*(A<n?A/n:A<n+T?1-(A-n)/T*(1-E):A<n+T+i?E:A<O-v?(O-A-v)/r*E:0),X=v?X/2+(v>A?0:(A<O-v?1:(O-A)/v)*a[A-v|0]/2/t):X,b&&(X=$=F*R+G*(R=N)+F*(N=X)-B*U-Y*(U=$))),I+=(W=(l+=c+=f)*w.cos(h*S++))+W*g*z(A**5),k&&++k>p&&(l+=u,y+=u,k=0),!d||++C%d||(l=y,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,g=e.animate,h=1,m,v=1,E,T,x,b=0,w=!0,H="sans-serif",D="",y=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){null==e?m.clearRect(0,0,C.WIDTH,C.HEIGHT):C.rectfill(0,0,C.WIDTH,C.HEIGHT,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} ${y}px ${H}`,m.fillStyle=C.getcolor(l),m.fillText(a,~~e,~~t)},textfont(e){H=e},textsize(e){y=e},textstyle(e){D=e||""},textalign(e,t){e&&(m.textAlign=e),t&&(m.textBaseline=t)},textmetrics(e,t=y){m.font=`${D} ${t}px ${H}`;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={}){e.__conf=t,c?_(e):f.push(e)},listen:(e,t)=>(A[e]=A[e]||new Set,A[e].add(t),()=>A[e].delete(t)),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(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){x=1e3*(T=1/e),b=0},quit(){for(let e of(w=A=!1,o))e();if(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 of f)_(e);if((p||d)&&s(l,"resize",O),O(),e.tapEvents){let e=(e,t)=>[(e-u.offsetLeft)/h,(t-u.offsetTop)/h],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",()=>{E=performance.now(),w=!0,r(X)})),C.setfps(e.fps),C.emit("init",C),E=performance.now(),r(X)}function X(e){let t=!g,a=e-E;for(b+=a>1e3?x:a;b>=x;)C.emit("update",T*v),C.setvar("ELAPSED",C.ELAPSED+T*v),b-=x,t=1;t&&(C.textalign("start","top"),C.emit("draw")),E=e,w&&g&&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",h=Math.min(t/C.WIDTH,a/C.HEIGHT),h=(e.pixelart?~~h:h)||1,n.width=C.WIDTH*h+"px",n.height=C.HEIGHT*h+"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",h),g||r(X)}function W(e,t,a,l,n){if(A[e])for(let i of A[e])i(t,a,l,n)}function _(e){let t=e(C,k,e.__conf);if("object"==typeof t)for(let e of Object.keys(t))C.setvar(e,t[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}})();

package/package.json

@@ -1,14 +1,15 @@
 {
     "name": "litecanvas",
-    "version": "0.67.2",
+    "version": "0.68.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.7.26"
+        "prettier": "^3.4.2"
     },
     "homepage": "https://litecanvas.github.io/about.html",
     "repository": {
@@ -26,8 +27,8 @@
         "dev:test": "ava --watch",
         "dev": "esbuild src/web.js --bundle --watch --outfile=dist/dist.js --servedir=.",
         "build": "node script/build.js",
-        "gzip-size": "gzip -9 -c dist/dist.min.js | wc -c | xargs printf \"  Gzip size: %s bytes\n\"",
-        "format": "npx prettier -w src/* samples/* types/*",
+        "gzip-size": "gzip -c dist/dist.min.js | wc -c | xargs printf \"  Gzip size: %s bytes\n\"",
+        "format": "prettier -w src/* samples/* types/* script/* types/*",
         "prepare": "npm run build && npm run gzip-size",
         "prepublishOnly": "npm test"
     },

package/src/index.js

@@ -13,8 +13,15 @@ export default function litecanvas(settings = {}) {
         PI = Math.PI,
         TWO_PI = PI * 2,
         raf = requestAnimationFrame,
+        /** @type {Function[]} */
+        _browerEventListeners = [],
         /** @type {(elem:HTMLElement, evt:string, callback:(event:Event)=>void)=>void} */
-        on = (elem, evt, callback) => elem.addEventListener(evt, callback),
+        on = (elem, evt, callback) => {
+            elem.addEventListener(evt, callback, false)
+            _browerEventListeners.push(() =>
+                elem.removeEventListener(evt, callback, false)
+            )
+        },
         /** @type {LitecanvasOptions} */
         defaults = {
             fps: 60,
@@ -64,10 +71,6 @@ export default function litecanvas(settings = {}) {
         _accumulated = 0,
         /** @type {number} */
         _focused = true,
-        /** @type {number} */
-        _drawCount = 0,
-        /** @type {number} */
-        _nextFpsUpdate = 0,
         /** @type {string} */
         _fontFamily = 'sans-serif',
         /** @type {string} */
@@ -76,6 +79,8 @@ export default function litecanvas(settings = {}) {
         _fontSize = 32,
         /** @type {number} */
         _rng_seed = Date.now(),
+        /** @type {boolean} */
+        _global = settings.global,
         /**
          * default game events
          * @type {Object<string,Set<Function>>}
@@ -114,9 +119,6 @@ export default function litecanvas(settings = {}) {
         /** @type {number} */
         ELAPSED: 0,
 
-        /** @type {number} */
-        FPS: 0,
-
         /** @type {number} */
         CENTERX: 0,
 
@@ -789,7 +791,7 @@ export default function litecanvas(settings = {}) {
          */
         setvar(key, value) {
             instance[key] = value
-            if (settings.global) {
+            if (_global) {
                 root[key] = value
             }
         },
@@ -827,6 +829,22 @@ export default function litecanvas(settings = {}) {
             _stepMs = _step * 1000
             _accumulated = 0
         },
+
+        /**
+         * Stops the litecanvas instance and remove all event listeners.
+         */
+        quit() {
+            _focused = _events = false
+            for (const removeListener of _browerEventListeners) {
+                removeListener()
+            }
+            if (_global) {
+                for (const key in instance) {
+                    delete root[key]
+                }
+            }
+            delete root.__litecanvas
+        },
     }
 
     /** Copy some functions from native `Math` object */
@@ -857,7 +875,7 @@ export default function litecanvas(settings = {}) {
 
         // add listeners for default events
         const source = settings.loop ? settings.loop : root
-        for (const event of Object.keys(_events)) {
+        for (const event in _events) {
             if (source[event]) instance.listen(event, source[event])
         }
 
@@ -1025,8 +1043,8 @@ export default function litecanvas(settings = {}) {
 
             on(root, 'focus', () => {
                 _lastFrame = performance.now()
-                raf(drawFrame)
                 _focused = true
+                raf(drawFrame)
             })
         }
 
@@ -1036,7 +1054,6 @@ export default function litecanvas(settings = {}) {
         instance.emit('init', instance)
 
         _lastFrame = performance.now()
-        _nextFpsUpdate = _lastFrame + 1000
         raf(drawFrame)
     }
 
@@ -1045,30 +1062,20 @@ export default function litecanvas(settings = {}) {
      */
     function drawFrame(now) {
         let emitDraw = !_animated,
-            dt = now - _lastFrame
+            delta = now - _lastFrame
 
-        _accumulated += dt > 1000 ? _stepMs : dt
+        _accumulated += delta > 1000 ? _stepMs : delta
 
         while (_accumulated >= _stepMs) {
             instance.emit('update', _step * _timeScale)
             instance.setvar('ELAPSED', instance.ELAPSED + _step * _timeScale)
             _accumulated -= _stepMs
-            emitDraw = true
+            emitDraw = 1
         }
 
         if (emitDraw) {
-            // default values for textAlign & textBaseline
-            instance.textalign('start', 'top')
-
+            instance.textalign('start', 'top') // default values for textAlign & textBaseline
             instance.emit('draw')
-
-            _drawCount++
-
-            if (now + _accumulated > _nextFpsUpdate) {
-                instance.setvar('FPS', _drawCount)
-                _drawCount = 0
-                _nextFpsUpdate = now + 1000
-            }
         }
 
         _lastFrame = now
@@ -1094,36 +1101,34 @@ export default function litecanvas(settings = {}) {
             _fullscreen = false
         }
 
+        _canvas.style = ''
         _canvas.width = instance.WIDTH
         _canvas.height = instance.HEIGHT || instance.WIDTH
 
         if (!_canvas.parentNode) document.body.appendChild(_canvas)
-
-        // canvas CSS tweaks
-        _canvas.style.display = 'block'
-        if (_fullscreen) {
-            _canvas.style.position = 'absolute'
-            _canvas.style.inset = 0
-        } else if (_autoscale) {
-            _canvas.style.margin = 'auto'
-        }
     }
 
     function pageResized() {
         const pageWidth = root.innerWidth,
-            pageHeight = root.innerHeight
+            pageHeight = root.innerHeight,
+            styles = _canvas.style
+
+        styles.display = 'block'
 
         if (_fullscreen) {
+            styles.position = 'absolute'
+            styles.inset = 0
             instance.setvar('WIDTH', (_canvas.width = pageWidth))
             instance.setvar('HEIGHT', (_canvas.height = pageHeight))
         } else if (_autoscale) {
+            styles.margin = 'auto'
             _scale = Math.min(
                 pageWidth / instance.WIDTH,
                 pageHeight / instance.HEIGHT
             )
             _scale = (settings.pixelart ? ~~_scale : _scale) || 1
-            _canvas.style.width = instance.WIDTH * _scale + 'px'
-            _canvas.style.height = instance.HEIGHT * _scale + 'px'
+            styles.width = instance.WIDTH * _scale + 'px'
+            styles.height = instance.HEIGHT * _scale + 'px'
         }
 
         instance.setvar('CENTERX', instance.WIDTH / 2)
@@ -1161,7 +1166,7 @@ export default function litecanvas(settings = {}) {
         }
     }
 
-    if (settings.global) {
+    if (_global) {
         if (root.__litecanvas) {
             throw 'global litecanvas already instantiated'
         }

package/src/zzfx.js

@@ -80,12 +80,12 @@ export const zzfx = (
                 (a < e
                     ? a / e
                     : a < e + m
-                    ? 1 - ((a - e) / m) * (1 - w)
-                    : a < e + m + r
-                    ? w
-                    : a < h - c
-                    ? ((h - a - c) / t) * w
-                    : 0)),
+                      ? 1 - ((a - e) / m) * (1 - w)
+                      : a < e + m + r
+                        ? w
+                        : a < h - c
+                          ? ((h - a - c) / t) * w
+                          : 0)),
             (f = c
                 ? f / 2 +
                   (c > a

package/types/index.d.ts

@@ -18,8 +18,6 @@ declare global {
     var CANVAS: HTMLCanvasElement
     /** the amount of time (in seconds) since the game started */
     var ELAPSED: number
-    /** the FPS meter */
-    var FPS: number
     /** the center X of the game screen */
     var CENTERX: number
     /** the center Y of the game screen */
@@ -205,6 +203,14 @@ declare global {
      * @returns the random number
      */
     function randi(min?: number, max?: number): number
+    /**
+     * If a value is passed, initializes the random number generator with an explicit seed value.
+     * Otherwise, returns the current seed state.
+     *
+     * @param [value]
+     * @returns the seed state
+     */
+    function seed(value?: number): number
 
     /** BASIC GRAPHICS API */
     /**

package/types/types.d.ts

@@ -7,8 +7,6 @@ type LitecanvasInstance = {
     CANVAS: HTMLCanvasElement
     /** the amount of time (in seconds) since the game started */
     ELAPSED: number
-    /** the FPS meter */
-    FPS: number
     /** the center X of the game screen */
     CENTERX: number
     /** the center Y of the game screen */
@@ -194,6 +192,14 @@ type LitecanvasInstance = {
      * @returns the random number
      */
     randi(min?: number, max?: number): number
+    /**
+     * If a value is passed, initializes the random number generator with an explicit seed value.
+     * Otherwise, returns the current seed state.
+     *
+     * @param [value]
+     * @returns the seed state
+     */
+    seed(value?: number): number
 
     /** BASIC GRAPHICS API */
     /**