litecanvas 0.95.1 → 0.97.0

package/README.md

@@ -4,7 +4,7 @@
 
 # Litecanvas
 
-[![NPM Version](https://badgen.net/npm/v/litecanvas?scale=1.1&label=NPM&color=2f9e44&cache=3600)](https://www.npmjs.com/package/litecanvas/)  
+[![NPM Version](https://badgen.net/npm/v/litecanvas?cache=300&scale=1.1&label=NPM&color=2f9e44)](https://www.npmjs.com/package/litecanvas/)  
 [![License](https://badgen.net/npm/license/litecanvas?scale=1.1)](LICENSE)
 
 Litecanvas is a lightweight HTML5 canvas 2D engine suitable for small web games, prototypes, game jams, animations, creative coding, learning game programming and game design, etc.
@@ -32,14 +32,10 @@ Litecanvas is a lightweight HTML5 canvas 2D engine suitable for small web games,
 
 ## Getting Started
 
-You can try our [online playground](https://litecanvas.github.io) or install the [basic template](https://github.com/litecanvas/template):
+You can try our [online playground](https://litecanvas.github.io) or install the NPM package:
 
 ```sh
-# requires Node.js & NPM
-npx tiged litecanvas/template my-game
-cd my-game
-npm install
-npm run dev
+npm i litecanvas
 ```
 
 or just use add a `<script>` tag with our CDN link:
@@ -91,7 +87,7 @@ function draw() {
 }
 ```
 
-[Play with this code in the playground](https://litecanvas.js.org?c=eJx9k91u4yAQhe%2F9FCP1ovauFZL2LlKu9hFaadtLDBNDQwDBeOOoyrsv4KR2V9FasuSfjzNnDgNj8EI8EHArISINHkghoO21xYoxMMiDhaMLuAVF5OOWMaMJBbd%2FeFx9xJULPeOdG2il6Ggekghp28dqpurPCtJlnPNb%2BARtNbUweMkJW5CBn1og7j1KuLTVpalyXVI6wn6wgrSzEAYbwVmBwKkY7DAZtKlO9cVk2bqBqVbXww7WUIQQhDMuwMMa6s5wcWgKMn3cwfM%2F1DPUJ5W8T1TgUg8xYb%2BBwWZWLI3BSUtSbLMuqHdxTOCvtwwJtIQB3qBOmt%2Fop%2BZGnzP9vqDf79KXO4FITOESCKPFITJyg1AY5yymOOuxhfMtkVxFcdtjnBrQQRjMLnRecUM6HtM2ZAU1%2FwS3L%2B9JddnouOzjfLXph2mDen7EtOO9FmljvpufbU4zUEtamDzyAy4d7rkxMSW%2FBq9HTI8%2BBRVROCvn%2Bj938JSIHyDpno%2BAVmJI0%2FIfL3kOv8ZHmFh3fVNCyyegSEUREKeksre9NqbOUbTFQ3sdlXaao7I2awK%2FdlIWEo5Ub9Yt5Pvxlft08M4nhQEflysyVl3%2BAgslJEg%3D)
+[Play with this code in the playground](https://litecanvas.js.org?c=eJx9U8tu2zAQvOsrBsghcitYtnMz4HvvLdD2SJFriTVNEuSqthH430tSduQEQQUI0GNmdnZ22bb4ziIwhFWIxKMHDwSyvbZUtS0MiWBxdIG2GJh93Lat0UxS2L8iLv%2FEpQt9Kzo38nLgo3lKIqxtH6sZVb9WSJdxzm%2FxCm01Nxi9EkwNVBCnBiy8J4VrU10XVa7Lg47Yj1aydhZhtBHOSoLgYrCjZNCmOtUbJsvWC0y1uh47rFCECNIZF%2FC0Qt0ZIQ%2BLApk%2B7vDyAfWC%2BjQk7xMqCKXHmGA%2F0WI9K5bGcNKKh3a9KlDv4vkG3GScJMsU8At1kn1H2CzuhEsifPtA%2BP0p4fpJLIpSxAxptDzElt0oB4pzIlOo9bnB5Z5LrjII21Oc2tBBGspGdGbcIZ2IaRhZYZh%2Fwu3Le1J9bPf82MrlZtOP05h6caQ0917LNJ735meb0ybUih9MHsWBHh3uhTEx5b%2BC12dKjz4FFUk6q%2Bb6X3fYJMQXKP7MRyCrKKSd%2BY%2BXvI1vSyRNrLt%2BUULL56BIRRmIpqSyt702ps5RNMVDc1uYZtqmws2aELdOCpHpzPV61SDfzz%2BET8fvchoo0PMjI8Oq6z8yIyTy)
 
 https://github.com/user-attachments/assets/854ac6bd-724f-4da8-bb3c-bc04dba5d8c8
 
@@ -99,13 +95,13 @@ https://github.com/user-attachments/assets/854ac6bd-724f-4da8-bb3c-bc04dba5d8c8
 
 Try some demos in the 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 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=eJylVVtv2jAUfs%2BvsNikJG0aEqAdZcBUdd1F6i7aRXtAaDWJAasmYY5pyVr%2B%2B47tNBia0m7zA9j%2BvnN87onSJBMoShPBU5ahHorTaDEjifAjTrAgZ4zIk2PH9Mp2rTuiT5OE8HffPpyDyIXVBbRvIVjdDPBk0j%2BZpYtEdLr14qxBjKacjHu1V1jBvTAIan346dbxA4xDyTjcxQBxqeTyYUZDMRo7GC3FaO1gtBWjvYMRHmlDjnZwmtqUZmFLt67iJqOHMpEz0qvN04wKmiYdxAnDgl6RWqErwskVzhCNe7Wo1u%2FW9flOyYVVJm6UxrmP53OSxM5dvlxrC1fP%2BVHKUg4ZtJ%2BFYWhXUkY4upxwsD4%2BLcnj8di2LEYEWnAGNwm5Rt%2B%2FnDssjbA03vWUyZmAAgL4Rp3kilRRoH0Q8zOCeTT9jDmeZf6EQInpINkuur1FkFWvFLumsZh24K7RWl9OCZ1MQVmrXTBXYBIVRMfF0Y8WksoSXx00905YA%2FqkES3eAS8j21pB3MaLJJJOIZpQ4biFN28%2Bf%2F354ezb2Rc%2Fptmc4dwRfEFcwNau%2B9mcUxWBOabQQ6XpYcOr3A%2FKnVy2D6sFS%2F7bXgWG8QNYEEgsCCqxhtTZqMBewGrCOoR1Dzs6etEMw%2BbhaPR32A6d0pZjWFW2SB%2BO2%2B3jah98X2IPxUXq3MKG6%2B3NhkAWYUY6qLnGV2rnmmmkv2USzZzqWrIUqV5HUMWCRowgNTShWHQpqdk6L7CsaJQTzqFatDLVD65BjqnssEHooYNwqO7H0HOObDUKQPAS%2FrrIEIaL%2FX13o8WkniWQOYYB4KI9s%2FrRgeHTlkx%2BX0Y3xi6hQbz0UJwPpdUbgVWawI%2Bm1AZuDeQFdQIPhe7Q%2BxfqsNyVIR1Q%2BfANAhtyMEOZUiRwZRkZNHNQ7i0j7owml%2BbH79eC8PwrYSQSKXcuBptj%2FPmNkYFVbXihU0jHkClQZKZDnotJOoZZ%2FEMHFIboKGWxXVi6MqZMzPF1OWWgtE4ZzEkkpqSYTNpoljmBa5Wvnn86ef3%2B41sXPhpiwZP7dYkTOttVmFth%2Bo%2FK42aIIT9WiXN%2FiQ6gxPx4adzlxV2%2BJkqPJLmLAnerXeU1GLN1Fy%2FRXg86Zt3DiLCMFIryakV5laJ8W9F9q%2FbNqdA3m6va2Ee772k%2BVD6r%2B7Pat8c7%2BAk%2Bz%2FCESK89qdTbGIFuWbx%2FAI20sBc%3D)
+- [Pong](https://litecanvas.js.org?c=eJy1VV1y00gQftcpmidJWJYl2U5IIKFMyiEPgKk4YMLW1paQxvYUiqSSxiT8hCtwgn3bQ3AeLsAV6J7RzyjEKV42rozdPT39%2B803CROQh%2FECDsAPPMcA%2FEP5hORxI74h0Wu3z1EeDSs5ZqUgA7JTmndhkmg%2Fz9ufc%2F6Jaa5JNUlXCelqb7yQ0RrpvJXKnLEYxaBOpYyyQjub8CUrURwqUbArQQErWxEWQh5fhknJDCPhgkVh%2BiEsrc%2FS4pLHYr0Pw7oPa8ZXa7EPoweouLYNYzCAo00psgt4%2B%2Bn4DZTZJo1LWGYFiDUvYRVeMLLJCyYEZ0Wfr1LMz4iytBTwZPbqxdEUw%2F%2FlgAM%2BG9KX6w1pCVDhQEAaB%2FZGXrVRf1zccXeU%2Fc7fD7fHmJ9NTs8ohOeOHewKjLFT8tgIl6EeZbzrVZHlUgXyRne5fzJ59uyf2fHx%2FOh0On1BcXx36MtyxhjAcz2KSnFw2ZXRpNTfc%2Fdw3aGVPp7r%2B%2FWvQJ6T60iuPlVoLDdpJHiWAk%2B5sGz43AIL4y4GQYsulE8GAfThBAYw6kyeTFHpB8a15lKEec5i68qBj7VjvgTrXoWQWtcFjSg2rFUvryzZa7tRYcM2RSrF6861%2BPrVusLk5CUbQGB3UtnkcSiYFYvbE1FOAQciuMBbUkYFY%2BnjxrIC%2FAHeAN2YgAjZB1Y8NqQpqi5QRJQyyiNOmH6xE1bklry8Kmc1SLs5GmepKdBKaOdRDCuHKqcmJen0EeVTuffkFsMr1%2B73VDsOYdGYLaoeGY0nNdxeyxuHcKLPpgaDv%2BN1dASI3VZVk4L67oPfmWIX0nY1v7p0NR7pFfKs5DQzDYi9A0VX9ytmug%2Bx0HCpts%2B724qosJnvkD0inY%2BqmEqvYiJCbrS3Cqw3ZQFfvlQJPWr0eqNUjgfQb0tvgze4vm5npNLf6kwy8p2ummKiNYveq1qiLEl4SaC%2F5GKt45BC4m7BIqHqc6pno0lA%2F6WQSo%2BQXBdIM%2FYtCWrFqleiR0%2FYH2QtG6B2bQURSdzdexsX4WXDSlFSWp59J48QIYUJkqllRiwVrDAdMC84tcC0O1YlFmnV%2FNXdspD2HOI6PHs2eQlnM0X46Gto35yhgvshXcQ2DWrxkieJ9XsT6dFv%2FMiqeBFJ220jqSliS%2Ba31S47Q6Wvw3TF09WN2i0f3yT6N3%2F8%2B9%2FP79%2FAdAuWs1CoamwHRrf7ZWl8h1eiltqzZZp4eyQibBdrnlNGFr6tnn2zi%2F%2FX9DCbAN9J8%2Bnk%2BRRmr6enZqfvv7lB3vDcB%2BNt3nqqY%2FOj2el0n4r7oxIRzb8ATsCfrQ%3D%3D)
+- [Bouncing Ball](https://litecanvas.js.org?c=eJxtkkFugzAQRfecYpaGOMFJW6lVQhddcQPWlm0iSy4gY0hRkrt3ADc4SRdI9nzm%2FzcMRjlo6lY7XVeQQa8E2TJG8YlpBHg3tdBuGM9Hy3t%2FtFzqrsX3X9%2BjyGinBK963pI4isquEpOZrrQjMZwDFx9QJDuap7t4v5h6hdEcq9fApWskd4pINzv9oW5%2BYJXdfPGWgHShPtzpw6wHKLOBT1%2F6g45AXtrTFL5qZFNQlyUoeVQtVnUJZCFb%2Ba%2FzCQVcLgHy2gsHYPM0dzhJBuvt%2Fp8q23y8TeVg%2BAyE4d9NkEr9UigUPifGpusjHc4FN778CWOYMJ4TxwXl3neyDXckLT%2F5TQvTEjYtVmgrSm1MiLjYUQ%2F78rDu8SfAUYbZzSrX2QrOYwUjfwF7%2FdPj)
+- [Scroller](https://litecanvas.js.org?c=eJxVUM1SgzAQvvMU68FpAhFDLVpH%2BxbOcOj0ECGUzATSIYsyOn13NwXRHpJNvv1%2BkrUGdam6D%2BUZj6J66Eo0rgPTGQTG4TsCaLX36qhhB6tC29K1GtCBXYQ3KyKN1C6onpSl034jcvEonsRWPItMiiw7ROd%2F9sOpUqiBVThFePMV%2FIv7OSu1ujtiQ52G4FxeAu528CAlxFDhHNiqkY0C1pJfuVe9%2Bvx9fGk9ozZA7XpgViMYEsoXKq9wnUZYkkwqgMBEYr4lTKZZbPiC0kLdh%2FRZ7Yd3jz0zArI%2FVumsCySax762zvUM4%2FyWbnMYP1yoqEcMn2dh4wvExsTEAYpluhXQJGuZeNORx4bHjZjfIKaUIDvTAH4AEIGEgw%3D%3D)
+- [3D projection](https://litecanvas.js.org?c=eJyNVcuS2jAQvPsrJofUykE8wykJySlVyRckuy4fZGwWgZEpWQSWFP%2BeGUlgizVLqgyyprul1mgkl9IUc6H%2BiJrFUbTYqbmRlQKppGEx%2FI0AanksYAa%2F4Cv8gG%2F4G8IUPmEfW4S3uloVTjSDBAMAyZjDCJ%2BUuy6%2Bj8MuRWw3pREqqUzdqPs0I4d2k3IYDiE5cHjhcEwdr4vWRjqA%2Fj2kRQgHuwm8jvc7gbTJVZHTYikg1HNJyR1Fp1byd9tcmILlxm2AI%2FWQNRiNIwwsKg2sLAxIkn7G5otP4qAs1LNZYqjXc2KAeaVqgzhl2LImG2G0PLDBYOBUiUxjS6UxdWWEc4i0za5kNoC2fjNrJOY0luPf5D5euJ5yh%2F%2FUzb%2FkCx02oqbiAvopyGGuxd4X8Lys2SimxG139ZIRt5Sq2MvcLNmEukYLVZeUc6rqCbdFbpGuVE%2Bv06vQDZMcmIQejGN4D1PeeI9DGlIQZS1u7EK3BBxkB%2BFkD84WV9Ne9VkkOGTc14QzSitmfrtFmozoOTMoMA4C2TUjuzA%2BhjP6PaEJfbZtuYl5VVLBCdT4omwwXe0tdg1kXpR1iDIvys4AInIBzE30bjZzjBjMElvA7YXvWleaPfzEy62UObiqL%2BoHWwpuVF3U56PYtdPWabDbKHC1mLhL6KJaOdUKVXYZ%2BNqo3Mmqdxt71F3kolw75Zrmc8p1WwlW16NUyjRZp%2FAB87NOk1XqCSffOmsYx%2FFQEp2xEy1XF2anFXGC3WvOtha5xEPg5vXsm7f5vKovAns1qla3TQyRUDby12KXn8e3%2FFwNE85y45tz7TE084aTp%2F93cisP95Pw6qPYdhLc2f4LGJpJDngukxf6O6Yk%2FgdWEko3)
+- [Rendering Benchmark](https://litecanvas.js.org?c=eJylVVtP2zAUfs%2BvsLpJSSCkSS9QurYTQkx7AAkB0x6qariJ21q4See40Az633dsp8G9UNDmB1Kf853j71yJ0iQTKEoTwVOWoS6K02g%2BJYnwI06wIBeMyJtjx%2FTRdq0V0KdJQvj3u6tLMLm3OqDtWQhOJwN9Mu6dTdN5ItqdanHXSowmnIy6la9YqbthEFR68KdTxW8gmhLR3IcAc%2Bnk4W1ETSFqexANhWjsQbQUorUHER5rIsd7MHVNpV5w6VRV3mT2UCZyRrqVWZpRQdOkjThhWNBHUil8RTh5xBmicbcSVXqdqr6vnNxbZeGGaZz7eDYjSeys6uVaG3r1nB%2BlLOVQQftTGIb2TsgQRw9jDuzj8xI8Go1sy2JEoDlnIEnIE%2Fpxc%2BmwNMKSvOspypmABgL1s7rJE6mmQIdg5mcE82hyjTmeZv6YQIvpJNkuenlBUFWvNHuisZi0QVZrvAonhI4n4KzRKpBLoEQF0Xlx9KOFpWLiq4vGroy1Qt%2B0Rpu3IcrItpaQNw3JZpyqYGaYwjgoaFjz1r79kpvtw2nAkV%2Fb25BjvEMeBFIeBFvymvRT25CfwKnDacJZkx8fn9TDsN4cDj8mf8OPfPcUzua7kudpq3W6zdP3pXxXvNKPIR%2Foz2tTZBFmpI3qqypCzkfzJJKNhGhCheMW4G%2FXt7%2BuLu4ubvyYZjOGc0fwOQF42Wx%2BRv%2FIIpk102XXoGoVQcMJGjGC1H6DN3TV1RqcFbqs6OkzzuER7Uy1rmuAYyqHoR966CgcKPkIxsORU0FBEXyBTwcZxiA4PHTXpkH6WQCYY5hVFx2YjYqOjJg2bPJtG93D%2B4z68cJDcT6QrEuVPMoTxFGX3iCsvhRQJ%2FBQ6A68f4EOyl9lSvtUPvyMgEMONBQVKLYuuVFBswblb8vIO6PJg%2Fl%2F6vec8PyWMBKJlDv3%2FfWN%2B%2FnZqMCyMrjXJaQjqBQ4Mssh78XSG8Ha%2FKkTCvtumLLYLpgujeaMOX4qmxNa65zBSkNiQoolokmzzAnc7fbDCZ3u67%2BNbPxHg3Ezk1AGq9Rzf4GOoJP8eGHI8kKWvwJluiS4gwLT%2F8oHkNmQxQt00IXBKMVLRFhGCkf5bkf5Lkf5pqNtVofm8PfMGdpN9t0h%2B1gMO5%2FVY7g7tvcH9QMxT%2FGYyKg96dRb23Ru2aN%2FASaYns8%3D)
 
-_See other demos in [samples](samples) folder_
+> _See other demos in [samples](/samples) folder_
 
 ## Inspirations
 

package/dist/dist.dev.js

@@ -32,27 +32,25 @@
   };
 
   // src/version.js
-  var version = "0.95.1";
+  var version = "0.97.0";
 
   // src/index.js
   function litecanvas(settings = {}) {
     const root = window, math = Math, TWO_PI = math.PI * 2, raf = requestAnimationFrame, _browserEventListeners = [], on = (elem, evt, callback) => {
       elem.addEventListener(evt, callback, false);
       _browserEventListeners.push(() => elem.removeEventListener(evt, callback, false));
-    }, preventDefault = (ev) => ev.preventDefault(), beginPath = (c) => c.beginPath(), isNumber = Number.isFinite, zzfx = setupZzFX(root), defaults = {
+    }, lowerCase = (str) => str.toLowerCase(), preventDefault = (ev) => ev.preventDefault(), beginPath = (c) => c.beginPath(), isNumber = Number.isFinite, zzfx = setupZzFX(root), defaults = {
       width: null,
       height: null,
       autoscale: true,
-      pixelart: true,
       canvas: null,
       global: true,
       loop: null,
       tapEvents: true,
-      keyboardEvents: true,
-      animate: true
+      keyboardEvents: true
     };
     settings = Object.assign(defaults, settings);
-    let _initialized = false, _plugins = [], _canvas, _scale = 1, _ctx, _outline_fix = 0.5, _timeScale = 1, _lastFrameTime, _fpsInterval = 1e3 / 60, _accumulated, _rafid, _fontFamily = "sans-serif", _fontSize = 20, _rngSeed = Date.now(), _colors = defaultPalette, _defaultSound = [0.5, 0, 1750, , , 0.3, 1, , , , 600, 0.1], _coreEvents = "init,update,draw,tap,untap,tapping,tapped,resized", _mathFunctions = "PI,sin,cos,atan2,hypot,tan,abs,ceil,floor,trunc,min,max,pow,sqrt,sign,exp", _eventListeners = {};
+    let _initialized = false, _plugins = [], _canvas, _scale = 1, _ctx, _outline_fix = 0.5, _timeScale = 1, _lastFrameTime, _fpsInterval = 1e3 / 60, _accumulated, _rafid, _fontFamily = "sans-serif", _fontSize = 20, _rngSeed = Date.now(), _currentPalette, _colors, _defaultSound = [0.5, 0, 1750, , , 0.3, 1, , , , 600, 0.1], _coreEvents = "init,update,draw,tap,untap,tapping,tapped,resized", _mathFunctions = "PI,sin,cos,atan2,hypot,tan,abs,ceil,floor,trunc,min,max,pow,sqrt,sign,exp", _eventListeners = {};
     const instance = {
       /** @type {number} */
       W: 0,
@@ -129,7 +127,7 @@
       round: (n, precision = 0) => {
         DEV: assert(isNumber(n), "[litecanvas] round() 1st param must be a number");
         DEV: assert(
-          null == precision || isNumber(precision) && precision >= 0,
+          isNumber(precision) && precision >= 0,
           "[litecanvas] round() 2nd param must be a positive number or zero"
         );
         if (!precision) {
@@ -515,15 +513,15 @@
         instance.stroke(color);
       },
       /**
-       * Sets the thickness of lines
+       * Sets the thickness of the lines
        *
        * @param {number} value
        * @see https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineWidth
        */
       linewidth(value) {
         DEV: assert(
-          isNumber(value) && ~~value > 0,
-          "[litecanvas] linewidth() 1st param must be a positive number"
+          isNumber(value) && value >= 0,
+          "[litecanvas] linewidth() 1st param must be a positive number or zero"
         );
         _ctx.lineWidth = ~~value;
         _outline_fix = 0 === ~~value % 2 ? 0 : 0.5;
@@ -626,19 +624,44 @@
         DEV: assert(isNumber(y), "[litecanvas] image() 2nd param must be a number");
         _ctx.drawImage(source, ~~x, ~~y);
       },
+      /**
+       * Draw a sprite pxiel by pixel represented by a string. Each pixel must be a base 36 number (0-9 or a-z) or a dot.
+       *
+       * @param {number} x
+       * @param {number} y
+       * @param {number} width
+       * @param {number} height
+       * @param {string} pixels
+       */
+      spr(x, y, width, height, pixels) {
+        DEV: assert(isNumber(x), "[litecanvas] spr() 1st param must be a number");
+        DEV: assert(isNumber(y), "[litecanvas] spr() 2nd param must be a number");
+        DEV: assert(isNumber(width), "[litecanvas] spr() 3rd param must be a number");
+        DEV: assert(isNumber(height), "[litecanvas] spr() 4th param must be a number");
+        DEV: assert("string" === typeof pixels, "[litecanvas] spr() 5th param must be a string");
+        const chars = pixels.replace(/\s/g, "");
+        for (let gridx = 0; gridx < width; gridx++) {
+          for (let gridy = 0; gridy < height; gridy++) {
+            const char = chars[height * gridy + gridx] || ".";
+            if (char !== ".") {
+              instance.rectfill(x + gridx, y + gridy, 1, 1, parseInt(char, 16) || 0);
+            }
+          }
+        }
+      },
       /**
        * Draw in an OffscreenCanvas and returns its image.
        *
        * @param {number} width
        * @param {number} height
-       * @param {string[]|drawCallback} drawing
+       * @param {drawCallback} callback
        * @param {object} [options]
        * @param {number} [options.scale=1]
        * @param {OffscreenCanvas} [options.canvas]
        * @returns {ImageBitmap}
        * @see https://developer.mozilla.org/en-US/docs/Web/API/OffscreenCanvas
        */
-      paint(width, height, drawing, options = {}) {
+      paint(width, height, callback, options = {}) {
         DEV: assert(
           isNumber(width) && width >= 1,
           "[litecanvas] paint() 1st param must be a positive number"
@@ -648,7 +671,7 @@
           "[litecanvas] paint() 2nd param must be a positive number"
         );
         DEV: assert(
-          "function" === typeof drawing || Array.isArray(drawing),
+          "function" === typeof callback,
           "[litecanvas] paint() 3rd param must be a function or array"
         );
         DEV: assert(
@@ -659,28 +682,13 @@
           options && null == options.canvas || options.canvas instanceof OffscreenCanvas,
           "[litecanvas] paint() 4th param (options.canvas) must be an OffscreenCanvas"
         );
-        const canvas = options.canvas || new OffscreenCanvas(1, 1), scale = options.scale || 1, contextOriginal = _ctx;
+        const canvas = options.canvas || new OffscreenCanvas(1, 1), scale = options.scale || 1, currentContext = _ctx;
         canvas.width = width * scale;
         canvas.height = height * scale;
         _ctx = canvas.getContext("2d");
         _ctx.scale(scale, scale);
-        if (Array.isArray(drawing)) {
-          let x = 0, y = 0;
-          _ctx.imageSmoothingEnabled = false;
-          for (const str of drawing) {
-            for (const color of str) {
-              if (" " !== color && "." !== color) {
-                instance.rectfill(x, y, 1, 1, parseInt(color, 16));
-              }
-              x++;
-            }
-            y++;
-            x = 0;
-          }
-        } else {
-          drawing(_ctx);
-        }
-        _ctx = contextOriginal;
+        callback(_ctx);
+        _ctx = currentContext;
         return canvas.transferToImageBitmap();
       },
       /** ADVANCED GRAPHICS API */
@@ -702,23 +710,27 @@
        *
        * @see https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/save
        */
-      push: () => _ctx.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(),
+      pop() {
+        _ctx.restore();
+      },
       /**
        * Adds a translation to the transformation matrix.
        *
        * @param {number} x
        * @param {number} y
        */
-      translate: (x, y) => {
+      translate(x, y) {
         DEV: assert(isNumber(x), "[litecanvas] translate() 1st param must be a number");
         DEV: assert(isNumber(y), "[litecanvas] translate() 2nd param must be a number");
-        return _ctx.translate(~~x, ~~y);
+        _ctx.translate(~~x, ~~y);
       },
       /**
        * Adds a scaling transformation to the canvas units horizontally and/or vertically.
@@ -726,19 +738,19 @@
        * @param {number} x
        * @param {number} [y]
        */
-      scale: (x, y) => {
+      scale(x, y) {
         DEV: assert(isNumber(x), "[litecanvas] scale() 1st param must be a number");
         DEV: assert(null == y || isNumber(y), "[litecanvas] scale() 2nd param must be a number");
-        return _ctx.scale(x, y || x);
+        _ctx.scale(x, y || x);
       },
       /**
        * Adds a rotation to the transformation matrix.
        *
        * @param {number} radians
        */
-      rotate: (radians) => {
+      rotate(radians) {
         DEV: assert(isNumber(radians), "[litecanvas] rotate() 1st param must be a number");
-        return _ctx.rotate(radians);
+        _ctx.rotate(radians);
       },
       /**
        * Sets the alpha (opacity) value to apply when drawing new shapes and images
@@ -878,7 +890,7 @@
           "function" === typeof callback,
           "[litecanvas] listen() 2nd param must be a function"
         );
-        eventName = eventName.toLowerCase();
+        eventName = lowerCase(eventName);
         _eventListeners[eventName] = _eventListeners[eventName] || /* @__PURE__ */ new Set();
         _eventListeners[eventName].add(callback);
         return () => _eventListeners && _eventListeners[eventName].delete(callback);
@@ -898,14 +910,14 @@
           "[litecanvas] emit() 1st param must be a string"
         );
         if (_initialized) {
-          eventName = eventName.toLowerCase();
+          eventName = lowerCase(eventName);
           triggerEvent("before:" + eventName, arg1, arg2, arg3, arg4);
           triggerEvent(eventName, arg1, arg2, arg3, arg4);
           triggerEvent("after:" + eventName, arg1, arg2, arg3, arg4);
         }
       },
       /**
-       * Set or reset the color palette
+       * Set or reset the color palette.
        *
        * @param {string[]} [colors]
        */
@@ -915,6 +927,31 @@
           "[litecanvas] pal() 1st param must be a array of strings"
         );
         _colors = colors;
+        _currentPalette = [...colors];
+      },
+      /**
+       * Swap two colors of the current palette.
+       *
+       * If called without arguments, reset the current palette.
+       *
+       * @param {number?} a
+       * @param {number?} b
+       */
+      palc(a, b) {
+        DEV: assert(
+          null == a || isNumber(a) && a >= 0,
+          "[litecanvas] palc() 1st param must be a positive number"
+        );
+        DEV: assert(
+          isNumber(a) ? isNumber(b) && b >= 0 : null == b,
+          "[litecanvas] palc() 2nd param must be a positive number"
+        );
+        if (a == null) {
+          _colors = [..._currentPalette];
+        } else {
+          ;
+          [_colors[a], _colors[b]] = [_colors[b], _colors[a]];
+        }
       },
       /**
        * Define or update a instance property.
@@ -963,12 +1000,15 @@
       /**
        * Returns information about that engine instance.
        *
-       * @param {number} n
+       * @param {number|string} index
        * @returns {any}
        */
-      stat(n) {
-        DEV: assert(isNumber(n) && n >= 0, "[litecanvas] stat() 1st param must be a number");
-        const list = [
+      stat(index) {
+        DEV: assert(
+          isNumber(index) || "string" === typeof index,
+          "[litecanvas] stat() 1st param must be a number or string"
+        );
+        const internals = [
           // 0
           settings,
           // 1
@@ -994,7 +1034,7 @@
           //  11
           _fontFamily
         ];
-        const data = { index: n, value: list[n] };
+        const data = { index, value: internals[index] };
         instance.emit("stat", data);
         return data.value;
       },
@@ -1223,12 +1263,12 @@
         const _keysDown = /* @__PURE__ */ new Set();
         const _keysPress = /* @__PURE__ */ new Set();
         const keyCheck = (keySet, key = "") => {
-          key = key.toLowerCase();
+          key = lowerCase(key);
           return !key ? keySet.size > 0 : keySet.has("space" === key ? " " : key);
         };
         let _lastKey = "";
         on(root, "keydown", (event) => {
-          const key = event.key.toLowerCase();
+          const key = lowerCase(event.key);
           if (!_keysDown.has(key)) {
             _keysDown.add(key);
             _keysPress.add(key);
@@ -1236,7 +1276,7 @@
           }
         });
         on(root, "keyup", (event) => {
-          _keysDown.delete(event.key.toLowerCase());
+          _keysDown.delete(lowerCase(event.key));
         });
         on(root, "blur", () => _keysDown.clear());
         instance.listen("after:update", () => _keysPress.clear());
@@ -1281,9 +1321,7 @@
       instance.resume();
     }
     function drawFrame() {
-      if (!settings.animate) {
-        return instance.emit("draw", _ctx);
-      }
+      _rafid = raf(drawFrame);
       let now = Date.now();
       let updated = 0;
       let frameTime = now - _lastFrameTime;
@@ -1305,7 +1343,6 @@
           );
         }
       }
-      _rafid = raf(drawFrame);
     }
     function setupCanvas() {
       if ("string" === typeof settings.canvas) {
@@ -1324,11 +1361,11 @@
       );
       _ctx = _canvas.getContext("2d");
       on(_canvas, "click", () => focus());
-      _canvas.style = "";
       resizeCanvas();
       if (!_canvas.parentNode) {
         document.body.appendChild(_canvas);
       }
+      _canvas.style.imageRendering = "pixelated";
       _canvas.oncontextmenu = () => false;
     }
     function resizeCanvas() {
@@ -1360,15 +1397,9 @@
         _canvas.style.width = width * _scale + "px";
         _canvas.style.height = height * _scale + "px";
       }
-      if (settings.pixelart) {
-        _ctx.imageSmoothingEnabled = false;
-        _canvas.style.imageRendering = "pixelated";
-      }
+      _ctx.imageSmoothingEnabled = false;
       instance.textalign("start", "top");
       instance.emit("resized", _scale);
-      if (!settings.animate) {
-        raf(drawFrame);
-      }
     }
     function triggerEvent(eventName, arg1, arg2, arg3, arg4) {
       if (!_eventListeners[eventName]) return;
@@ -1396,6 +1427,7 @@
     DEV: console.info(`[litecanvas] version ${version} started`);
     DEV: console.debug(`[litecanvas] litecanvas() options =`, settings);
     setupCanvas();
+    instance.pal();
     if ("loading" === document.readyState) {
       on(root, "DOMContentLoaded", () => raf(init));
     } else {