litecanvas 0.98.4 → 0.100.0

package/README.md

@@ -30,22 +30,24 @@ Litecanvas is a lightweight HTML5 canvas 2D engine suitable for small web games,
 
 ## Getting Started
 
-### Installation
+You can get started using our [online playground](https://litecanvas.github.io) without installing nothing.
 
-You can get started using our [online playground](https://litecanvas.github.io).
+If you want to test locally, just use one of the installation options.
 
-Or installing our package via NPM:
+### HTML/CDN
 
-```sh
-npm i litecanvas
-```
-
-Or just create a HTML file and add a `<script>` tag with our CDN link:
+Create a HTML file and add a `<script>` tag with our CDN link:
 
 ```html
 <script src="https://unpkg.com/litecanvas"></script>
 ```
 
+### Template
+
+For those who are familiar with Node/NPM, we have a [basic template](https://github.com/litecanvas/template).
+
+## API
+
 ### Basic game structure
 
 ```js
@@ -104,7 +106,7 @@ Each time a Litecanvas' function ask for a color, you should use an of theses co
 
 ```js
 // example: draw a white rectangle
-color = 3
+let color = 3
 rectfill(0, 0, 32, 32, color)
 ```
 
@@ -117,11 +119,13 @@ function draw() {
     // clear and fill the game screen with color #0 (black)
     cls(0)
 
-    // print a red "Hello" text at x=0, y=0
-    text(0, 0, 'Hello', 4)
+    // print a red text at x=0, y=0
+    text(0, 0, 'Hello!!!', 4)
 }
 ```
 
+[Live Demo](https://litecanvas.js.org?c=eJwtTDEOwjAQ2%2FMKVwxNpErNwNqdbxzXK404EpQGWoT4O6HC8mBbtjUUYYpPWqwzZnpELiFFjJlW6%2FA2qOh7sAplUBwxBVWUWXChm2DhLBKxhjKDk6aMg4c9K%2FHV7VvWxfr6%2FP%2B55xALCFlGFNmqLNgG3%2BE1%2BL3zC231le1JVFPTNG2HozOfL6wIMU0%3D)
+
 ### Drawing shapes
 
 You can use the following functions to draw shapes:
@@ -139,18 +143,20 @@ litecanvas()
 function draw() {
     cls(0)
 
-    // draw a color filled rectangle at x=0 and y=0
+    // draw a color filled rectangle at x=10 and y=20
     // with width=32 and height=32
     // and color=3 (white)
-    rectfill(0, 0, 32, 32, 3)
+    rectfill(10, 20, 32, 32, 3)
 
-    // draw a circle outline at x=64 and y=32
-    // with radius=40
+    // draw a circle outline at x=64 and y=96
+    // with radius=50
     // and color=5 (yellow)
-    circ(64, 32, 40, 5)
+    circ(64, 96, 50, 5)
 }
 ```
 
+[Live Demo](https://litecanvas.js.org?c=eJxljk0KwyAQhfc5xSwNBGJ%2BFLrwMKImCoOCMU1D6d2rabIoGZhBfeN7H7pklPRPuZC6qqbVq%2BSCBx3lRmp4V5BL4UJoVsu5bQ8NJKiAIcLkEI2GaFSSfkYDMsFLdBSk17CLnl6%2FNpdsHjpZMfSHao2bbcq3a6U8Hq5iALLZTFYfUjEvOaSjDfS5h%2F7sO5SLKkOENaHzJwwfT5gH%2F4OJUrt1EYze8xmQ3SCG7QdQXAkfG3jwBlgGYHX1%2BQLFaFeI)
+
 ### Drawing sprites
 
 ```js
@@ -162,7 +168,7 @@ litecanvas({
 // each visible char is a pixel
 // numbers are colors
 // dots are transparent pixels
-const smile = `
+let smile8x8 = `
     .555555.
     55555555
     55055055
@@ -176,26 +182,26 @@ function draw() {
     cls(0)
 
     spr(
-        0, 0, // position X Y
-        8, 8, // sprite Width and Height
-        smile // the pixels
+        0, 0,    // position X Y
+        8, 8,    // the sprite Width and Height
+        smile8x8 // the sprite Pixels
     )
 }
 ```
 
+[Live Demo](https://litecanvas.js.org?c=eJxtUMtqwzAQvOsr5mhDSNxCIBR67x%2B0vUWR1UigSEa7zoOQf%2B9KdkwPHfawuzOzSBM8W6PjWVNzV8DF9%2Bze8PK6U49Wqc0GtzRCBDDZaragIYuDRMgOxNnHIxWZ1cbh7MkfgoVxOsMTNAZ%2FtaHwcTwdbJZVFjqFlKurTzytOOtIg3SRJw%2BpYBl08nLuHXt5GrDeVqzrsJ0xD12t%2F4a%2Fsq603SITzMzz9F6pnzEa9imiz%2FrStLhXgQnUdJJI6SWDpjYF3aqU%2FGVI5KvvC98Lu1uVEnbKDZ8lX%2BjY48P6o%2BNFOP1UhOzsM4Gyb9XjF0Vyb7o%3D)
+
 ### Creating and drawing images
 
 ```js
 litecanvas()
 
-// lets create the flag of the Japan
-const japan = paint(
-    48, 32, // image width and height
+// lets create flag of Japan
+let japanFlag = paint(
+    48, 32, // the image width and height
     function () {
-        // the result of this drawings
-        // goes to an offscreen canvas
-        rectfill(0, 0, 48, 32, 3)
-        circfill(24, 16, 8, 4)
+        cls(3) // white background
+        circfill(24, 16, 8, 4) // red circle
     }, {
         // you can scale your image
         // by default, scale=1
@@ -205,25 +211,32 @@ const japan = paint(
 
 function draw() {
     cls(0)
-    // now the japan variable holds a image
-    image(W/2 - japan.width/2, H/2 - japan.height/2, japan)
+
+    // draw the japanFlag image
+    image(
+        W/2 - japanFlag.width/2,  // game screen center X
+        H/2 - japanFlag.height/2, // game screen center Y
+        japanFlag                 // the image
+    )
 }
 ```
 
-It's very useful when you need to draw something the same way every time. This way, you create an image of that drawing, working as a kind of cache.
+[Live Demo](https://litecanvas.js.org?c=eJxtUctOwzAQvPsr5phIgdA0QgipV4T4AeC4dTaJi%2BtUjkNUof47toOcqmJPXs%2FMPma1cizJfNOY5UKUJTS7EdIyOUarqcPQ4o1OZIRHcAivl%2FC9w4mUcZmAj%2FqpwLYq4PWuZ6gjdYxZNa4HmQY9q653kdlORjo1GGQ5fuJPCKnHbJsH%2Bdz7gbAn%2BdXZYTLNSlFWtkrrrKoLbB4L%2BJZ1lFhuIqo5ki%2FFVWEPn4cJfkOMkjSHzC7zXXP2ZzTc0qRdsfB2mwTH%2FBn1Ulx4l9IOjaU57RF2ePDoX8mARTNWy9a28ZWlFu9lhbuVeB%2BdK72foVBHR%2FZDWGYDycaxxUdSvt4oF6fL5RT%2FKD%2BTch3rNq6PGOm5uPwCs6aXUg%3D%3D)
 
-You can also use the image() function to draw PNG/JPG images, but you'll need to load them first:
+> Note: It's very useful when you need to draw something the same way every time. This way, you create an image of that drawing, working as a kind of cache.
+
+You can also draw PNG/JPG image files, but you'll need to load them first:
 
 ```js
 litecanvas()
 
-let PngImage
+let myImage
 
 function init() {
     // load a image from its URL
-    const img = new Image()
+    let img = new Image()
     img.onload = () => {
-        PngImage = img
+        myImage = img
     }
     img.src = 'https://litecanvas.js.org/icons/icon-128.png'
 }
@@ -231,17 +244,19 @@ function init() {
 function draw() {
     cls(0)
 
-    if (!PngImage) {
+    if (!myImage) {
         // if not loaded, show this message
         text(10, 10, 'Loading image...')
     } else {
         // when loaded, draw the image file
-        image(0, 0, PngImage)
+        image(0, 0, myImage)
     }
 }
 ```
 
-To help you load multiple assets (images, fonts, music, etc.), you can I recommend you the [Asset Loader Plugin](https://github.com/litecanvas/plugin-asset-loader).
+[Live Demo](https://litecanvas.js.org?c=eJxVkMFOwzAMhu95CnNqKo1044SQyh1pJyQeIGrTNih1ptpQEOq742RtGVGSg%2F37s38Hz66x%2BGlJl0oFxzB%2Bv4y2d0p1H9iwjwgePesSfhTIqSoI0bZgwScZdFMcwTPB2%2Bs5CxLDjz3UgG6GzBJ0ykjURMzVNQiwfl6Z6axtJSOyHF32IpoaiRcD84WeqirsM5t3MnHqK99EpPzfnx4ezQX7Qi03DtrJzruDJpA%2BitlM70Dfra3Lm2nEpaQwcjbr2gPQEGfgwROMjigtaNOy%2B2J9Oh4gveIseo%2F9dTvGmOLqfQEXyP3vMA8Od34aUfhuW6sPfx1ySAtd7jbsuqLlFwWNf7A%3D)
+
+If you need to load multiple assets (images, fonts, music, etc.), I recommend you the [Asset Loader Plugin](https://github.com/litecanvas/plugin-asset-loader).
 
 ### Keyboard
 
@@ -258,9 +273,7 @@ function update() {
     }
 
     // Returns the last key pressed in your keyboard.
-    const key = lastkey()
-
-    console.log(key)
+    let key = lastkey()
 }
 ```
 
@@ -324,7 +337,7 @@ You can find a complete list of everything litecanvas has to offer on our [cheat
 
 Try some demos in the playground:
 
-- [Bouncing Ball](https://litecanvas.js.org?c=eJxtkkFugzAQRfecYpaGOMFJW6lVQhddcQPWlm0iSy4gY0hRkrt3ADc4SRdI9nzm%2FzcMRjlo6lY7XVeQQa8E2TJG8YlpBHg3tdBuGM9Hy3t%2FtFzqrsX3X9%2BjyGinBK963pI4isquEpOZrrQjMZwDFx9QJDuap7t4v5h6hdEcq9fApWskd4pINzv9oW5%2BYJXdfPGWgHShPtzpw6wHKLOBT1%2F6g45AXtrTFL5qZFNQlyUoeVQtVnUJZCFb%2Ba%2FzCQVcLgHy2gsHYPM0dzhJBuvt%2Fp8q23y8TeVg%2BAyE4d9NkEr9UigUPifGpusjHc4FN778CWOYMJ4TxwXl3neyDXckLT%2F5TQvTEjYtVmgrSm1MiLjYUQ%2F78rDu8SfAUYbZzSrX2QrOYwUjfwF7%2FdPj)
+- [Bouncing Ball](https://litecanvas.js.org?c=eJxtksFygyAQhu8%2BxR7VmGjSdqZNag89%2BQaeGcAMM1QdRBsm8d27Co3Y9MAM7M%2F%2B%2By2L5BraphNaNDXkMHAa7rMswRUlAeBZNlRoM%2B3PigxuqwgTfYf3n1%2BDQArNKakH0oVREFR9TWczUQsdRnD1XDDhejmW8SExxyI9jKfF1UrZJGB49Hz6lhHNQ6at1y%2Fs7gKb%2FO6MpxiY9nWz0o3VPRhr4Mov%2BV6GJy%2FpaQqfDbJxaKoKODvzDqOignAh27j3%2BYASbjcPeeuEd8hsNyucOIft%2FvRPNNu9vcxhr%2FkcqCRfrVc1cWNJoHR1Ikwa%2F9JhX3DnKx4wzIzxWHGaUOF8Z1t%2FRkyRbzdrKrswi6YuqFC0ElL6iItd4mCfovW4px%2BIrRjrprjuVY1fAyNY8gdFptV%2F)
 - [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)

package/dist/dist.dev.js

@@ -32,7 +32,7 @@
   };
 
   // src/version.js
-  var version = "0.98.4";
+  var version = "0.100.0";
 
   // src/index.js
   function litecanvas(settings = {}) {
@@ -50,7 +50,7 @@
       keyboardEvents: true
     };
     settings = Object.assign(defaults, settings);
-    let _initialized = false, _canvas, _scale = 1, _ctx, _outline_fix = 0.5, _timeScale = 1, _lastFrameTime, _fpsInterval = 1e3 / 60, _accumulated, _rafid, _fontFamily = "sans-serif", _fontSize = 20, _rngSeed = Date.now(), _colorPalette = defaultPalette, _colorPaletteState = [], _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, _paused = true, _canvas, _scale = 1, _ctx, _outline_fix = 0.5, _timeScale = 1, _lastFrameTime, _fpsInterval = 1e3 / 60, _accumulated, _rafid, _fontFamily = "sans-serif", _fontSize = 20, _fontLineHeight = 1.2, _rngSeed = Date.now(), _colorPalette = defaultPalette, _colorPaletteState = [], _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,
@@ -545,7 +545,7 @@
       },
       /** TEXT RENDERING API */
       /**
-       * Draw text
+       * Draw text. You can use `\n` to break lines.
        *
        * @param {number} x
        * @param {number} y
@@ -566,7 +566,20 @@
         );
         _ctx.font = `${fontStyle} ${_fontSize}px ${_fontFamily}`;
         _ctx.fillStyle = getColor(color);
-        _ctx.fillText(message, ~~x, ~~y);
+        const messages = ("" + message).split("\n");
+        for (let i = 0; i < messages.length; i++) {
+          _ctx.fillText(messages[i], ~~x, ~~y + _fontSize * _fontLineHeight * i);
+        }
+      },
+      /**
+       * Sets the height ratio of the text lines based on current text size.
+       *
+       * Default = `1.2`
+       *
+       * @param value
+       */
+      textgap(value) {
+        _fontLineHeight = value;
       },
       /**
        * Set the font family
@@ -995,7 +1008,7 @@
         _fpsInterval = 1e3 / ~~value;
       },
       /**
-       * Returns information about that engine instance.
+       * Returns information about the engine instance.
        *
        * @param {number|string} index
        * @returns {any}
@@ -1028,43 +1041,34 @@
           _rngSeed,
           // 10
           _fontSize,
-          //  11
-          _fontFamily
+          // 11
+          _fontFamily,
+          // 12
+          _colorPaletteState,
+          // 13
+          _fontLineHeight
         ];
         const data = { index, value: internals[index] };
         instance.emit("stat", data);
         return data.value;
       },
-      /**
-       * Stops the litecanvas instance and remove all event listeners.
-       */
-      quit() {
-        instance.pause();
-        instance.emit("quit");
-        _eventListeners = {};
-        for (const removeListener of _browserEventListeners) {
-          removeListener();
-        }
-        if (settings.global) {
-          for (const key in instance) {
-            delete root[key];
-          }
-          delete root.ENGINE;
-        }
-        _initialized = false;
-      },
       /**
        * Pauses the engine loop (update & draw).
        */
       pause() {
+        _paused = true;
         cancelAnimationFrame(_rafid);
-        _rafid = 0;
       },
       /**
        * Resumes (if paused) the engine loop.
        */
       resume() {
-        if (_initialized && !_rafid) {
+        DEV: assert(
+          _initialized,
+          '[litecanvas] resume() cannot be called before the "init" event and neither after the quit() function'
+        );
+        if (_initialized && _paused) {
+          _paused = false;
           _accumulated = _fpsInterval;
           _lastFrameTime = Date.now();
           _rafid = raf(drawFrame);
@@ -1076,7 +1080,26 @@
        * @returns {boolean}
        */
       paused() {
-        return !_rafid;
+        return _paused;
+      },
+      /**
+       * Shutdown the litecanvas instance and remove all event listeners.
+       */
+      quit() {
+        instance.emit("quit");
+        instance.pause();
+        _initialized = false;
+        _eventListeners = {};
+        for (const removeListener of _browserEventListeners) {
+          removeListener();
+        }
+        if (settings.global) {
+          for (const key in instance) {
+            delete root[key];
+          }
+          delete root.ENGINE;
+        }
+        DEV: console.warn("[litecanvas] quit() terminated a Litecanvas instance.");
       }
     };
     for (const k of _mathFunctions.split(",")) {
@@ -1428,7 +1451,7 @@
     if ("loading" === document.readyState) {
       on(root, "DOMContentLoaded", () => raf(init));
     } else {
-      raf(init);
+      _rafid = raf(init);
     }
     return instance;
   }

package/dist/dist.js

@@ -42,7 +42,7 @@
       keyboardEvents: true
     };
     settings = Object.assign(defaults, settings);
-    let _initialized = false, _canvas, _scale = 1, _ctx, _outline_fix = 0.5, _timeScale = 1, _lastFrameTime, _fpsInterval = 1e3 / 60, _accumulated, _rafid, _fontFamily = "sans-serif", _fontSize = 20, _rngSeed = Date.now(), _colorPalette = defaultPalette, _colorPaletteState = [], _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, _paused = true, _canvas, _scale = 1, _ctx, _outline_fix = 0.5, _timeScale = 1, _lastFrameTime, _fpsInterval = 1e3 / 60, _accumulated, _rafid, _fontFamily = "sans-serif", _fontSize = 20, _fontLineHeight = 1.2, _rngSeed = Date.now(), _colorPalette = defaultPalette, _colorPaletteState = [], _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,
@@ -363,7 +363,7 @@
       },
       /** TEXT RENDERING API */
       /**
-       * Draw text
+       * Draw text. You can use `\n` to break lines.
        *
        * @param {number} x
        * @param {number} y
@@ -374,7 +374,20 @@
       text(x, y, message, color = 3, fontStyle = "normal") {
         _ctx.font = `${fontStyle} ${_fontSize}px ${_fontFamily}`;
         _ctx.fillStyle = getColor(color);
-        _ctx.fillText(message, ~~x, ~~y);
+        const messages = ("" + message).split("\n");
+        for (let i = 0; i < messages.length; i++) {
+          _ctx.fillText(messages[i], ~~x, ~~y + _fontSize * _fontLineHeight * i);
+        }
+      },
+      /**
+       * Sets the height ratio of the text lines based on current text size.
+       *
+       * Default = `1.2`
+       *
+       * @param value
+       */
+      textgap(value) {
+        _fontLineHeight = value;
       },
       /**
        * Set the font family
@@ -687,7 +700,7 @@
         _fpsInterval = 1e3 / ~~value;
       },
       /**
-       * Returns information about that engine instance.
+       * Returns information about the engine instance.
        *
        * @param {number|string} index
        * @returns {any}
@@ -716,43 +729,30 @@
           _rngSeed,
           // 10
           _fontSize,
-          //  11
-          _fontFamily
+          // 11
+          _fontFamily,
+          // 12
+          _colorPaletteState,
+          // 13
+          _fontLineHeight
         ];
         const data = { index, value: internals[index] };
         instance.emit("stat", data);
         return data.value;
       },
-      /**
-       * Stops the litecanvas instance and remove all event listeners.
-       */
-      quit() {
-        instance.pause();
-        instance.emit("quit");
-        _eventListeners = {};
-        for (const removeListener of _browserEventListeners) {
-          removeListener();
-        }
-        if (settings.global) {
-          for (const key in instance) {
-            delete root[key];
-          }
-          delete root.ENGINE;
-        }
-        _initialized = false;
-      },
       /**
        * Pauses the engine loop (update & draw).
        */
       pause() {
+        _paused = true;
         cancelAnimationFrame(_rafid);
-        _rafid = 0;
       },
       /**
        * Resumes (if paused) the engine loop.
        */
       resume() {
-        if (_initialized && !_rafid) {
+        if (_initialized && _paused) {
+          _paused = false;
           _accumulated = _fpsInterval;
           _lastFrameTime = Date.now();
           _rafid = raf(drawFrame);
@@ -764,7 +764,25 @@
        * @returns {boolean}
        */
       paused() {
-        return !_rafid;
+        return _paused;
+      },
+      /**
+       * Shutdown the litecanvas instance and remove all event listeners.
+       */
+      quit() {
+        instance.emit("quit");
+        instance.pause();
+        _initialized = false;
+        _eventListeners = {};
+        for (const removeListener of _browserEventListeners) {
+          removeListener();
+        }
+        if (settings.global) {
+          for (const key in instance) {
+            delete root[key];
+          }
+          delete root.ENGINE;
+        }
       }
     };
     for (const k of _mathFunctions.split(",")) {
@@ -1076,7 +1094,7 @@
     if ("loading" === document.readyState) {
       on(root, "DOMContentLoaded", () => raf(init));
     } else {
-      raf(init);
+      _rafid = raf(init);
     }
     return instance;
   }

package/dist/dist.min.js

@@ -1 +1 @@
-(()=>{var e=["#111","#6a7799","#aec2c2","#FFF1E8","#e83b3b","#fabc20","#155fd9","#3cbcfc","#327345","#63c64d","#6c2c1f","#ac7c00"];globalThis.litecanvas=function(t={}){let a=window,l=Math,n=2*l.PI,i=requestAnimationFrame,o=[],r=(e,t,a)=>{e.addEventListener(t,a,!1),o.push(()=>e.removeEventListener(t,a,!1))},s=e=>e.toLowerCase(),c=e=>e.preventDefault(),f=e=>e.beginPath(),d=(e=>{let t=new AudioContext;return e.zzfxV=1,(a=1,l=.05,n=220,i=0,o=0,r=.1,s=0,c=1,f=0,d=0,u=0,p=0,h=0,m=0,g=0,v=0,w=0,x=1,y=0,b=0,k=0)=>{let E=Math,z=2*E.PI,T=f*=500*z/44100/44100,I=n*=(1-l+2*l*E.random(l=[]))*z/44100,D=0,S=0,A=0,M=1,C=0,L=0,N=0,P=k<0?-1:1,F=z*P*k*2/44100,q=E.cos(F),B=E.sin,H=B(F)/4,O=1+H,V=-2*q/O,W=(1-H)/O,R=(1+P*q)/2/O,G=-(P+q)/O,X=0,Y=0,$=0,j=0;for(i=44100*i+9,y*=44100,o*=44100,r*=44100,w*=44100,d*=500*z/85766121e6,g*=z/44100,u*=z/44100,p*=44100,h=44100*h|0,a*=.3*e.zzfxV,P=i+y+o+r+w|0;A<P;l[A++]=N*a)++L%(100*v|0)||(N=s?1<s?2<s?3<s?B(D*D):E.max(E.min(E.tan(D),1),-1):1-(2*D/z%2+2)%2:1-4*E.abs(E.round(D/z)-D/z):B(D),N=(h?1-b+b*B(z*A/h):1)*(N<0?-1:1)*E.abs(N)**c*(A<i?A/i:A<i+y?1-(A-i)/y*(1-x):A<i+y+o?x:A<P-w?(P-A-w)/r*x:0),N=w?N/2+(w>A?0:(A<P-w?1:(P-A)/w)*l[A-w|0]/2/a):N,k&&(N=j=R*X+G*(X=Y)+R*(Y=N)-W*$-V*($=j))),D+=(F=(n+=f+=d)*E.cos(g*S++))+F*m*B(A**5),M&&++M>p&&(n+=u,I+=u,M=0),!h||++C%h||(n=I,f=T,M=M||1);(a=t.createBuffer(1,P,44100)).getChannelData(0).set(l),(n=t.createBufferSource()).buffer=a,n.connect(t.destination),n.start()}})(a);t=Object.assign({width:null,height:null,autoscale:!0,canvas:null,global:!0,loop:null,tapEvents:!0,keyboardEvents:!0},t);let u=!1,p,h=1,m,g=.5,v=1,w,x=1e3/60,y,b,k="sans-serif",E=20,z=Date.now(),T=e,I=[],D=[.5,0,1750,,,.3,1,,,,600,.1],S={},A={W:0,H:0,T:0,MX:-1,MY:-1,TWO_PI:n,HALF_PI:n/4,lerp:(e,t,a)=>a*(t-e)+e,deg2rad:e=>l.PI/180*e,rad2deg:e=>180/l.PI*e,round:(e,t=0)=>{if(!t)return l.round(e);let a=10**t;return l.round(e*a)/a},clamp:(e,t,a)=>e<t?t:e>a?a:e,wrap:(e,t,a)=>e-(a-t)*l.floor((e-t)/(a-t)),map(e,t,a,l,n,i){let o=(e-t)/(a-t)*(n-l)+l;return i?A.clamp(o,l,n):o},norm:(e,t,a)=>A.map(e,t,a,0,1),wave:(e,t,a,l=Math.sin)=>e+(l(a)+1)/2*(t-e),rand:(e=0,t=1)=>(z=(1664525*z+0x3c6ef35f)%0x100000000)/0x100000000*(t-e)+e,randi:(e=0,t=1)=>l.floor(A.rand(e,t+1)),rseed(e){z=~~e},cls(e){null==e?m.clearRect(0,0,m.canvas.width,m.canvas.height):A.rectfill(0,0,m.canvas.width,m.canvas.height,e)},rect(e,t,a,l,n,i){f(m),m[i?"roundRect":"rect"](~~e-g,~~t-g,~~a+2*g,~~l+2*g,i),A.stroke(n)},rectfill(e,t,a,l,n,i){f(m),m[i?"roundRect":"rect"](~~e,~~t,~~a,~~l,i),A.fill(n)},circ(e,t,a,l){f(m),m.arc(~~e,~~t,~~a,0,n),A.stroke(l)},circfill(e,t,a,l){f(m),m.arc(~~e,~~t,~~a,0,n),A.fill(l)},oval(e,t,a,l,i){f(m),m.ellipse(~~e,~~t,~~a,~~l,0,0,n),A.stroke(i)},ovalfill(e,t,a,l,i){f(m),m.ellipse(~~e,~~t,~~a,~~l,0,0,n),A.fill(i)},line(e,t,a,l,n){f(m);let i=.5*(0!==g&&~~e==~~a),o=.5*(0!==g&&~~t==~~l);m.moveTo(~~e+i,~~t+o),m.lineTo(~~a+i,~~l+o),A.stroke(n)},linewidth(e){m.lineWidth=~~e,g=.5*(0!=~~e%2)},linedash(e,t=0){m.setLineDash(e),m.lineDashOffset=t},text(e,t,a,l=3,n="normal"){m.font=`${n} ${E}px ${k}`,m.fillStyle=P(l),m.fillText(a,~~e,~~t)},textfont(e){k=e},textsize(e){E=e},textalign(e,t){e&&(m.textAlign=e),t&&(m.textBaseline=t)},image(e,t,a){m.drawImage(a,~~e,~~t)},spr(e,t,a,l,n){let i=n.replace(/\s/g,"");for(let n=0;n<a;n++)for(let o=0;o<l;o++){let l=i[a*o+n]||".";"."!==l&&A.rectfill(e+n,t+o,1,1,parseInt(l,36)||0)}},paint(e,t,a,l={}){let n=l.canvas||new OffscreenCanvas(1,1),i=l.scale||1,o=m;return n.width=e*i,n.height=t*i,(m=n.getContext("2d")).scale(i,i),a(m),m=o,n.transferToImageBitmap()},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=A.clamp(e,0,1)},fill(e){m.fillStyle=P(e),m.fill()},stroke(e){m.strokeStyle=P(e),m.stroke()},clip(e){f(m),e(m),m.clip()},sfx:(e,t=0,l=1)=>!!a.zzfxV&&(!navigator.userActivation||!!navigator.userActivation.hasBeenActive)&&(e=e||D,(0!==t||1!==l)&&((e=e.slice())[0]=l*(e[0]||1),e[10]=~~e[10]+t),d.apply(0,e),e),volume(e){a.zzfxV=e},canvas:()=>p,use(e,t={}){var a=e,l=t;let n=a(A,l);for(let e in n)A.def(e,n[e])},listen:(e,t)=>(S[e=s(e)]=S[e]||new Set,S[e].add(t),()=>S&&S[e].delete(t)),emit(e,t,a,l,n){u&&(N("before:"+(e=s(e)),t,a,l,n),N(e,t,a,l,n),N("after:"+e,t,a,l,n))},pal(t=e){T=t,I=[]},palc(e,t){null==e?I=[]:I[e]=t},def(e,l){A[e]=l,t.global&&(a[e]=l)},timescale(e){v=e},framerate(e){x=1e3/~~e},stat(e){let l={index:e,value:[t,u,x/1e3,h,S,T,D,v,a.zzfxV,z,E,k][e]};return A.emit("stat",l),l.value},quit(){for(let e of(A.pause(),A.emit("quit"),S={},o))e();if(t.global){for(let e in A)delete a[e];delete a.ENGINE}u=!1},pause(){cancelAnimationFrame(b),b=0},resume(){u&&!b&&(y=x,w=Date.now(),b=i(C))},paused:()=>!b};for(let e of"PI,sin,cos,atan2,hypot,tan,abs,ceil,floor,trunc,min,max,pow,sqrt,sign,exp".split(","))A[e]=l[e];function M(){let e=t.loop?t.loop:a;for(let t of"init,update,draw,tap,untap,tapping,tapped,resized".split(","))e[t]&&A.listen(t,e[t]);if(t.autoscale&&r(a,"resize",L),t.tapEvents){let e=e=>[(e.pageX-p.offsetLeft)/h,(e.pageY-p.offsetTop)/h],t=new Map,l=(e,a,l)=>{let n={x:a,y:l,xi:a,yi:l,t:Date.now()};return t.set(e,n),n},n=(e,a,n)=>{let i=t.get(e)||l(e);i.x=a,i.y=n},i=e=>e&&Date.now()-e.t<=300,o=!1;r(p,"mousedown",t=>{if(0===t.button){c(t);let[a,n]=e(t);A.emit("tap",a,n,0),l(0,a,n),o=!0}}),r(p,"mouseup",a=>{if(0===a.button){c(a);let l=t.get(0),[n,r]=e(a);i(l)&&A.emit("tapped",l.xi,l.yi,0),A.emit("untap",n,r,0),t.delete(0),o=!1}}),r(a,"mousemove",t=>{c(t);let[a,l]=e(t);A.def("MX",a),A.def("MY",l),o&&(A.emit("tapping",a,l,0),n(0,a,l))}),r(p,"touchstart",t=>{for(let a of(c(t),t.changedTouches)){let[t,n]=e(a);A.emit("tap",t,n,a.identifier+1),l(a.identifier+1,t,n)}}),r(p,"touchmove",t=>{for(let a of(c(t),t.changedTouches)){let[t,l]=e(a);A.emit("tapping",t,l,a.identifier+1),n(a.identifier+1,t,l)}});let s=e=>{c(e);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)&&A.emit("tapped",l.xi,l.yi,e),A.emit("untap",l.x,l.y,e),t.delete(e))};r(p,"touchend",s),r(p,"touchcancel",s),r(a,"blur",()=>{for(let[e,a]of(o=!1,t))A.emit("untap",a.x,a.y,e),t.delete(e)})}if(t.keyboardEvents){let e=new Set,t=new Set,l=(e,t="")=>(t=s(t))?e.has("space"===t?" ":t):e.size>0,n="";r(a,"keydown",a=>{let l=s(a.key);e.has(l)||(e.add(l),t.add(l),n=" "===l?"space":l)}),r(a,"keyup",t=>{e.delete(s(t.key))}),r(a,"blur",()=>e.clear()),A.listen("after:update",()=>t.clear()),A.def("iskeydown",t=>l(e,t)),A.def("iskeypressed",e=>l(t,e)),A.def("lastkey",()=>n)}u=!0,A.emit("init",A),A.resume()}function C(){b=i(C);let e=Date.now(),t=0,a=e-w;for(w=e,y+=a<100?a:x;y>=x;){t++,y-=x;let e=x/1e3*v;A.emit("update",e,t),A.def("T",A.T+e)}t&&(A.emit("draw",m),t>1&&(y=0))}function L(){let e=t.width>0?t.width:innerWidth,a=t.width>0?t.height||t.width:innerHeight;if(A.def("W",e),A.def("H",a),p.width=e,p.height=a,t.autoscale){let n=+t.autoscale;p.style.display||(p.style.display="block",p.style.margin="auto"),h=l.min(innerWidth/e,innerHeight/a),h=n>1&&h>n?n:h,p.style.width=e*h+"px",p.style.height=a*h+"px"}m.imageSmoothingEnabled=!1,A.textalign("start","top"),A.emit("resized",h)}function N(e,t,a,l,n){if(S[e])for(let i of S[e])i(t,a,l,n)}function P(e){return T[~~(I[e]??e)%T.length]}if(t.global){if(a.ENGINE)throw Error("only one global litecanvas is allowed");Object.assign(a,A),a.ENGINE=A}return m=(p=(p="string"==typeof t.canvas?document.querySelector(t.canvas):t.canvas)||document.createElement("canvas")).getContext("2d"),r(p,"click",()=>focus()),L(),p.parentNode||document.body.appendChild(p),p.style.imageRendering="pixelated",p.oncontextmenu=()=>!1,"loading"===document.readyState?r(a,"DOMContentLoaded",()=>i(M)):i(M),A}})();
+(()=>{var e=["#111","#6a7799","#aec2c2","#FFF1E8","#e83b3b","#fabc20","#155fd9","#3cbcfc","#327345","#63c64d","#6c2c1f","#ac7c00"];globalThis.litecanvas=function(t={}){let a,l=window,n=Math,i=2*n.PI,o=requestAnimationFrame,r=[],s=(e,t,a)=>{e.addEventListener(t,a,!1),r.push(()=>e.removeEventListener(t,a,!1))},f=(a=new AudioContext,l.zzfxV=1,(e=1,t=.05,n=220,i=0,o=0,r=.1,s=0,f=1,c=0,d=0,u=0,p=0,h=0,g=0,m=0,v=0,w=0,x=1,b=0,y=0,k=0)=>{let E=Math,z=2*E.PI,D=c*=500*z/44100/44100,P=n*=(1-t+2*t*E.random(t=[]))*z/44100,T=0,C=0,I=0,L=1,S=0,A=0,M=0,N=k<0?-1:1,F=z*N*k*2/44100,q=E.cos(F),B=E.sin,H=B(F)/4,O=1+H,V=-2*q/O,W=(1-H)/O,R=(1+N*q)/2/O,G=-(N+q)/O,X=0,Y=0,$=0,j=0;for(i=44100*i+9,b*=44100,o*=44100,r*=44100,w*=44100,d*=500*z/85766121e6,m*=z/44100,u*=z/44100,p*=44100,h=44100*h|0,e*=.3*l.zzfxV,N=i+b+o+r+w|0;I<N;t[I++]=M*e)++A%(100*v|0)||(M=s?1<s?2<s?3<s?B(T*T):E.max(E.min(E.tan(T),1),-1):1-(2*T/z%2+2)%2:1-4*E.abs(E.round(T/z)-T/z):B(T),M=(h?1-y+y*B(z*I/h):1)*(M<0?-1:1)*E.abs(M)**f*(I<i?I/i:I<i+b?1-(I-i)/b*(1-x):I<i+b+o?x:I<N-w?(N-I-w)/r*x:0),M=w?M/2+(w>I?0:(I<N-w?1:(N-I)/w)*t[I-w|0]/2/e):M,k&&(M=j=R*X+G*(X=Y)+R*(Y=M)-W*$-V*($=j))),T+=(F=(n+=c+=d)*E.cos(m*C++))+F*g*B(I**5),L&&++L>p&&(n+=u,P+=u,L=0),!h||++S%h||(n=P,c=D,L=L||1);(e=a.createBuffer(1,N,44100)).getChannelData(0).set(t),(n=a.createBufferSource()).buffer=e,n.connect(a.destination),n.start()});t=Object.assign({width:null,height:null,autoscale:!0,canvas:null,global:!0,loop:null,tapEvents:!0,keyboardEvents:!0},t);let c=!1,d=!0,u,p=1,h,g=.5,m=1,v,w=1e3/60,x,b,y="sans-serif",k=20,E=1.2,z=Date.now(),D=e,P=[],T=[.5,0,1750,,,.3,1,,,,600,.1],C={},I={W:0,H:0,T:0,MX:-1,MY:-1,TWO_PI:i,HALF_PI:i/4,lerp:(e,t,a)=>a*(t-e)+e,deg2rad:e=>n.PI/180*e,rad2deg:e=>180/n.PI*e,round:(e,t=0)=>{if(!t)return n.round(e);let a=10**t;return n.round(e*a)/a},clamp:(e,t,a)=>e<t?t:e>a?a:e,wrap:(e,t,a)=>e-(a-t)*n.floor((e-t)/(a-t)),map(e,t,a,l,n,i){let o=(e-t)/(a-t)*(n-l)+l;return i?I.clamp(o,l,n):o},norm:(e,t,a)=>I.map(e,t,a,0,1),wave:(e,t,a,l=Math.sin)=>e+(l(a)+1)/2*(t-e),rand:(e=0,t=1)=>(z=(1664525*z+0x3c6ef35f)%0x100000000)/0x100000000*(t-e)+e,randi:(e=0,t=1)=>n.floor(I.rand(e,t+1)),rseed(e){z=~~e},cls(e){null==e?h.clearRect(0,0,h.canvas.width,h.canvas.height):I.rectfill(0,0,h.canvas.width,h.canvas.height,e)},rect(e,t,a,l,n,i){h.beginPath(),h[i?"roundRect":"rect"](~~e-g,~~t-g,~~a+2*g,~~l+2*g,i),I.stroke(n)},rectfill(e,t,a,l,n,i){h.beginPath(),h[i?"roundRect":"rect"](~~e,~~t,~~a,~~l,i),I.fill(n)},circ(e,t,a,l){h.beginPath(),h.arc(~~e,~~t,~~a,0,i),I.stroke(l)},circfill(e,t,a,l){h.beginPath(),h.arc(~~e,~~t,~~a,0,i),I.fill(l)},oval(e,t,a,l,n){h.beginPath(),h.ellipse(~~e,~~t,~~a,~~l,0,0,i),I.stroke(n)},ovalfill(e,t,a,l,n){h.beginPath(),h.ellipse(~~e,~~t,~~a,~~l,0,0,i),I.fill(n)},line(e,t,a,l,n){h.beginPath();let i=.5*(0!==g&&~~e==~~a),o=.5*(0!==g&&~~t==~~l);h.moveTo(~~e+i,~~t+o),h.lineTo(~~a+i,~~l+o),I.stroke(n)},linewidth(e){h.lineWidth=~~e,g=.5*(0!=~~e%2)},linedash(e,t=0){h.setLineDash(e),h.lineDashOffset=t},text(e,t,a,l=3,n="normal"){h.font=`${n} ${k}px ${y}`,h.fillStyle=N(l);let i=(""+a).split("\n");for(let a=0;a<i.length;a++)h.fillText(i[a],~~e,~~t+k*E*a)},textgap(e){E=e},textfont(e){y=e},textsize(e){k=e},textalign(e,t){e&&(h.textAlign=e),t&&(h.textBaseline=t)},image(e,t,a){h.drawImage(a,~~e,~~t)},spr(e,t,a,l,n){let i=n.replace(/\s/g,"");for(let n=0;n<a;n++)for(let o=0;o<l;o++){let l=i[a*o+n]||".";"."!==l&&I.rectfill(e+n,t+o,1,1,parseInt(l,36)||0)}},paint(e,t,a,l={}){let n=l.canvas||new OffscreenCanvas(1,1),i=l.scale||1,o=h;return n.width=e*i,n.height=t*i,(h=n.getContext("2d")).scale(i,i),a(h),h=o,n.transferToImageBitmap()},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)},alpha(e){h.globalAlpha=I.clamp(e,0,1)},fill(e){h.fillStyle=N(e),h.fill()},stroke(e){h.strokeStyle=N(e),h.stroke()},clip(e){h.beginPath(),e(h),h.clip()},sfx:(e,t=0,a=1)=>!!l.zzfxV&&(!navigator.userActivation||!!navigator.userActivation.hasBeenActive)&&(e=e||T,(0!==t||1!==a)&&((e=e.slice())[0]=a*(e[0]||1),e[10]=~~e[10]+t),f.apply(0,e),e),volume(e){l.zzfxV=e},canvas:()=>u,use(e,t={}){var a=e,l=t;let n=a(I,l);for(let e in n)I.def(e,n[e])},listen:(e,t)=>(C[e=e.toLowerCase()]=C[e]||new Set,C[e].add(t),()=>C&&C[e].delete(t)),emit(e,t,a,l,n){c&&(M("before:"+(e=e.toLowerCase()),t,a,l,n),M(e,t,a,l,n),M("after:"+e,t,a,l,n))},pal(t=e){D=t,P=[]},palc(e,t){null==e?P=[]:P[e]=t},def(e,a){I[e]=a,t.global&&(l[e]=a)},timescale(e){m=e},framerate(e){w=1e3/~~e},stat(e){let a={index:e,value:[t,c,w/1e3,p,C,D,T,m,l.zzfxV,z,k,y,P,E][e]};return I.emit("stat",a),a.value},pause(){d=!0,cancelAnimationFrame(b)},resume(){c&&d&&(d=!1,x=w,v=Date.now(),b=o(S))},paused:()=>d,quit(){for(let e of(I.emit("quit"),I.pause(),c=!1,C={},r))e();if(t.global){for(let e in I)delete l[e];delete l.ENGINE}}};for(let e of"PI,sin,cos,atan2,hypot,tan,abs,ceil,floor,trunc,min,max,pow,sqrt,sign,exp".split(","))I[e]=n[e];function L(){let e=t.loop?t.loop:l;for(let t of"init,update,draw,tap,untap,tapping,tapped,resized".split(","))e[t]&&I.listen(t,e[t]);if(t.autoscale&&s(l,"resize",A),t.tapEvents){let e=e=>[(e.pageX-u.offsetLeft)/p,(e.pageY-u.offsetTop)/p],t=new Map,a=(e,a,l)=>{let n={x:a,y:l,xi:a,yi:l,t:Date.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&&Date.now()-e.t<=300,o=!1;s(u,"mousedown",t=>{if(0===t.button){t.preventDefault();let[l,n]=e(t);I.emit("tap",l,n,0),a(0,l,n),o=!0}}),s(u,"mouseup",a=>{if(0===a.button){a.preventDefault();let l=t.get(0),[n,r]=e(a);i(l)&&I.emit("tapped",l.xi,l.yi,0),I.emit("untap",n,r,0),t.delete(0),o=!1}}),s(l,"mousemove",t=>{t.preventDefault();let[a,l]=e(t);I.def("MX",a),I.def("MY",l),o&&(I.emit("tapping",a,l,0),n(0,a,l))}),s(u,"touchstart",t=>{for(let l of(t.preventDefault(),t.changedTouches)){let[t,n]=e(l);I.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);I.emit("tapping",t,l,a.identifier+1),n(a.identifier+1,t,l)}});let r=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)&&I.emit("tapped",l.xi,l.yi,e),I.emit("untap",l.x,l.y,e),t.delete(e))};s(u,"touchend",r),s(u,"touchcancel",r),s(l,"blur",()=>{for(let[e,a]of(o=!1,t))I.emit("untap",a.x,a.y,e),t.delete(e)})}if(t.keyboardEvents){let e=new Set,t=new Set,a=(e,t="")=>(t=t.toLowerCase())?e.has("space"===t?" ":t):e.size>0,n="";s(l,"keydown",a=>{let l=a.key.toLowerCase();e.has(l)||(e.add(l),t.add(l),n=" "===l?"space":l)}),s(l,"keyup",t=>{e.delete(t.key.toLowerCase())}),s(l,"blur",()=>e.clear()),I.listen("after:update",()=>t.clear()),I.def("iskeydown",t=>a(e,t)),I.def("iskeypressed",e=>a(t,e)),I.def("lastkey",()=>n)}c=!0,I.emit("init",I),I.resume()}function S(){b=o(S);let e=Date.now(),t=0,a=e-v;for(v=e,x+=a<100?a:w;x>=w;){t++,x-=w;let e=w/1e3*m;I.emit("update",e,t),I.def("T",I.T+e)}t&&(I.emit("draw",h),t>1&&(x=0))}function A(){let e=t.width>0?t.width:innerWidth,a=t.width>0?t.height||t.width:innerHeight;if(I.def("W",e),I.def("H",a),u.width=e,u.height=a,t.autoscale){let l=+t.autoscale;u.style.display||(u.style.display="block",u.style.margin="auto"),p=n.min(innerWidth/e,innerHeight/a),p=l>1&&p>l?l:p,u.style.width=e*p+"px",u.style.height=a*p+"px"}h.imageSmoothingEnabled=!1,I.textalign("start","top"),I.emit("resized",p)}function M(e,t,a,l,n){if(C[e])for(let i of C[e])i(t,a,l,n)}function N(e){return D[~~(P[e]??e)%D.length]}if(t.global){if(l.ENGINE)throw Error("only one global litecanvas is allowed");Object.assign(l,I),l.ENGINE=I}return h=(u=(u="string"==typeof t.canvas?document.querySelector(t.canvas):t.canvas)||document.createElement("canvas")).getContext("2d"),s(u,"click",()=>focus()),A(),u.parentNode||document.body.appendChild(u),u.style.imageRendering="pixelated",u.oncontextmenu=()=>!1,"loading"===document.readyState?s(l,"DOMContentLoaded",()=>o(L)):b=o(L),I}})();

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "litecanvas",
-    "version": "0.98.4",
+    "version": "0.100.0",
     "description": "Lightweight HTML5 canvas 2D game engine suitable for small projects and creative coding. Inspired by PICO-8 and p5.js/Processing.",
     "license": "MIT",
     "author": "Luiz Bills <luizbills@pm.me>",
@@ -31,15 +31,13 @@
         "creative coding"
     ],
     "devDependencies": {
-        "@litecanvas/jsdom-extras": "^2.0.1",
+        "@happy-dom/global-registrator": "^18.0.1",
         "@size-limit/preset-small-lib": "^11.2.0",
-        "@swc/core": "^1.13.3",
-        "@types/jsdom": "^21.1.7",
+        "@swc/core": "^1.13.19",
         "ava": "^6.4.1",
-        "esbuild": "^0.25.8",
+        "esbuild": "^0.25.10",
         "genversion": "^3.2.0",
         "gzip-size": "^7.0.0",
-        "jsdom": "^26.1.0",
         "prettier": "^3.6.2",
         "sinon": "^21.0.0",
         "size-limit": "^11.2.0",
@@ -51,7 +49,7 @@
     "scripts": {
         "prepare": "npm run build",
         "prepublishOnly": "npm test",
-        "test": "ava --timeout=1s --fast-fail --tap | tap-min",
+        "test": "ava --tap | tap-min",
         "test:watch": "ava --watch",
         "dev": "esbuild src/web.js --bundle --watch --outfile=samples/dist.js --servedir=samples",
         "build": "npm run genversion && node script/build.js && size-limit",
@@ -66,8 +64,14 @@
     ],
     "ava": {
         "files": [
-            "tests/**/*.js"
-        ]
+            "tests/**/*.js",
+            "!tests/_preload/**/*.js"
+        ],
+        "require": [
+            "./tests/_preload/happy-dom.js"
+        ],
+        "failFast": true,
+        "timeout": "10s"
     },
     "size-limit": [
         {

package/src/index.js

@@ -48,6 +48,8 @@ export default function litecanvas(settings = {}) {
 
     let /** @type {boolean} */
         _initialized = false,
+        /** @type {boolean} */
+        _paused = true,
         /** @type {HTMLCanvasElement} _canvas */
         _canvas,
         /** @type {number} */
@@ -71,6 +73,8 @@ export default function litecanvas(settings = {}) {
         /** @type {number} */
         _fontSize = 20,
         /** @type {number} */
+        _fontLineHeight = 1.2,
+        /** @type {number} */
         _rngSeed = Date.now(),
         /** @type {string[]} */
         _colorPalette = defaultPalette,
@@ -637,7 +641,7 @@ export default function litecanvas(settings = {}) {
 
         /** TEXT RENDERING API */
         /**
-         * Draw text
+         * Draw text. You can use `\n` to break lines.
          *
          * @param {number} x
          * @param {number} y
@@ -659,7 +663,22 @@ export default function litecanvas(settings = {}) {
 
             _ctx.font = `${fontStyle} ${_fontSize}px ${_fontFamily}`
             _ctx.fillStyle = getColor(color)
-            _ctx.fillText(message, ~~x, ~~y)
+
+            const messages = ('' + message).split('\n')
+            for (let i = 0; i < messages.length; i++) {
+                _ctx.fillText(messages[i], ~~x, ~~y + _fontSize * _fontLineHeight * i)
+            }
+        },
+
+        /**
+         * Sets the height ratio of the text lines based on current text size.
+         *
+         * Default = `1.2`
+         *
+         * @param value
+         */
+        textgap(value) {
+            _fontLineHeight = value
         },
 
         /**
@@ -1056,6 +1075,7 @@ export default function litecanvas(settings = {}) {
                 'string' === typeof eventName,
                 '[litecanvas] emit() 1st param must be a string'
             )
+
             if (_initialized) {
                 eventName = lowerCase(eventName)
 
@@ -1156,7 +1176,7 @@ export default function litecanvas(settings = {}) {
         },
 
         /**
-         * Returns information about that engine instance.
+         * Returns information about the engine instance.
          *
          * @param {number|string} index
          * @returns {any}
@@ -1190,8 +1210,12 @@ export default function litecanvas(settings = {}) {
                 _rngSeed,
                 // 10
                 _fontSize,
-                //  11
+                // 11
                 _fontFamily,
+                // 12
+                _colorPaletteState,
+                // 13
+                _fontLineHeight,
             ]
 
             const data = { index, value: internals[index] }
@@ -1202,49 +1226,24 @@ export default function litecanvas(settings = {}) {
             return data.value
         },
 
-        /**
-         * Stops the litecanvas instance and remove all event listeners.
-         */
-        quit() {
-            // stop the game loop (update & draw)
-            instance.pause()
-
-            // emit "quit" event to manual clean ups
-            instance.emit('quit')
-
-            // clear all engine event listeners
-            _eventListeners = {}
-
-            // clear all browser event listeners
-            for (const removeListener of _browserEventListeners) {
-                removeListener()
-            }
-
-            // maybe clear global context
-            if (settings.global) {
-                for (const key in instance) {
-                    delete root[key]
-                }
-                delete root.ENGINE
-            }
-
-            // unset that flag
-            _initialized = false
-        },
-
         /**
          * Pauses the engine loop (update & draw).
          */
         pause() {
+            _paused = true
             cancelAnimationFrame(_rafid)
-            _rafid = 0
         },
 
         /**
          * Resumes (if paused) the engine loop.
          */
         resume() {
-            if (_initialized && !_rafid) {
+            DEV: assert(
+                _initialized,
+                '[litecanvas] resume() cannot be called before the "init" event and neither after the quit() function'
+            )
+            if (_initialized && _paused) {
+                _paused = false
                 _accumulated = _fpsInterval
                 _lastFrameTime = Date.now()
                 _rafid = raf(drawFrame)
@@ -1257,7 +1256,39 @@ export default function litecanvas(settings = {}) {
          * @returns {boolean}
          */
         paused() {
-            return !_rafid
+            return _paused
+        },
+
+        /**
+         * Shutdown the litecanvas instance and remove all event listeners.
+         */
+        quit() {
+            // emit "quit" event to manual clean ups
+            instance.emit('quit')
+
+            // stop the game loop (update & draw)
+            instance.pause()
+
+            // deinitialize the engine
+            _initialized = false
+
+            // clear all engine event listeners
+            _eventListeners = {}
+
+            // clear all browser event listeners
+            for (const removeListener of _browserEventListeners) {
+                removeListener()
+            }
+
+            // maybe clear global context
+            if (settings.global) {
+                for (const key in instance) {
+                    delete root[key]
+                }
+                delete root.ENGINE
+            }
+
+            DEV: console.warn('[litecanvas] quit() terminated a Litecanvas instance.')
         },
     }
 
@@ -1713,7 +1744,7 @@ export default function litecanvas(settings = {}) {
     if ('loading' === document.readyState) {
         on(root, 'DOMContentLoaded', () => raf(init))
     } else {
-        raf(init)
+        _rafid = raf(init)
     }
 
     return instance

package/src/version.js

@@ -1,2 +1,2 @@
 // Generated by genversion.
-export const version = '0.98.4'
+export const version = '0.100.0'

package/types/global.d.ts

@@ -325,7 +325,7 @@ declare global {
 
     /** TEXT RENDERING API */
     /**
-     * Draw text
+     * Draw text. You can use `\n` to break lines.
      *
      * @param x
      * @param y
@@ -355,6 +355,14 @@ declare global {
      * @see https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/textAlign
      */
     function textalign(align: CanvasTextAlign, baseline: CanvasTextBaseline): void
+    /**
+     * Sets the height ratio of the text lines based on current text size.
+     *
+     * Default = `1.2`
+     *
+     * @param value
+     */
+    function textgap(value: number): void
 
     /** BASIC GRAPHICS API */
     /**
@@ -583,9 +591,9 @@ declare global {
      */
     function framerate(fps: number): void
     /**
-     * Returns information about that engine instance.
+     * Returns information about the engine instance.
      *
-     * - n = 0: the settings passed to that instance
+     * - n = 0: the settings passed to this instance
      * - n = 1: returns true if the "init" event has already been emitted
      * - n = 2: the current delta time (dt)
      * - n = 3: the current canvas element scale (not the context 2D scale)
@@ -597,15 +605,13 @@ declare global {
      * - n = 9: the current RNG state
      * - n = 10: the current font size
      * - n = 11: the current font family
+     * - n = 12: the current state of the color palette
+     * - n = 13: the current font gap
      * - n = *any other value*: probably returns undefined
      *
-     * @param n
+     * @param index
      */
-    function stat(n: number): any
-    /**
-     * Shutdown the litecanvas instance and remove all event listeners.
-     */
-    function quit(): void
+    function stat(index: number | string): any
     /**
      * Pauses the engine loop (update & draw).
      */
@@ -618,4 +624,8 @@ declare global {
      * Returns `true` if the engine loop is paused.
      */
     function paused(): boolean
+    /**
+     * Shutdown the litecanvas instance and remove all event listeners.
+     */
+    function quit(): void
 }

package/types/types.d.ts

@@ -319,7 +319,7 @@ type LitecanvasInstance = {
 
     /** TEXT RENDERING API */
     /**
-     * Draw text
+     * Draw text. You can use `\n` to break lines.
      *
      * @param x
      * @param y
@@ -349,6 +349,14 @@ type LitecanvasInstance = {
      * @see https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/textAlign
      */
     textalign(align: CanvasTextAlign, baseline: CanvasTextBaseline): void
+    /**
+     * Sets the height ratio of the text lines based on current text size.
+     *
+     * Default = `1.2`
+     *
+     * @param value
+     */
+    textgap(value: number): void
 
     /** BASIC GRAPHICS API */
     /**
@@ -573,9 +581,9 @@ type LitecanvasInstance = {
      */
     framerate(fps: number): void
     /**
-     * Returns information about that engine instance.
+     * Returns information about the engine instance.
      *
-     * - n = 0: the settings passed to that instance
+     * - n = 0: the settings passed to this instance
      * - n = 1: returns true if the "init" event has already been emitted
      * - n = 2: the current delta time (dt)
      * - n = 3: the current canvas element scale (not the context 2D scale)
@@ -587,15 +595,13 @@ type LitecanvasInstance = {
      * - n = 9: the current RNG state
      * - n = 10: the current font size
      * - n = 11: the current font family
+     * - n = 12: the current state of the color palette
+     * - n = 13: the current font gap
      * - n = *any other value*: probably returns undefined
      *
-     * @param n
+     * @param index
      */
-    stat(n: number): any
-    /**
-     * Stops the litecanvas instance and remove all event listeners.
-     */
-    quit(): void
+    stat(index: number | string): any
     /**
      * Pauses the engine loop (update & draw).
      */
@@ -608,6 +614,10 @@ type LitecanvasInstance = {
      * Returns `true` if the engine loop is paused.
      */
     paused(): boolean
+    /**
+     * Shutdown the litecanvas instance and remove all event listeners.
+     */
+    quit(): void
 }
 
 type LitecanvasOptions = {