litecanvas 0.40.0 → 0.41.1

package/README.md

@@ -17,7 +17,7 @@ Lightweight HTML5 canvas engine suitable for small games and animations for peop
 -   **Extensible**: Use or create [plugins](https://www.npmjs.com/search?q=keywords:litecanvas) to add functionalities or change the engine.
 -   **Offline Playground**: Install the [playground](https://litecanvas.js.org/) webapp and use anywhere at any time.
 
-[Learn more](https://litecanvas.js.org/about.html)
+[Learn more...](https://litecanvas.js.org/about.html)
 
 ## Getting Started
 
@@ -43,31 +43,36 @@ import litecanvas from 'litecanvas'
 // you can setup other configurations here
 // learn more in the cheatsheet
 litecanvas({
-    loop: { init, update, draw },
+    loop: { init, update, draw, tapped },
 })
 
-// run once before the game starts
 function init() {
+    // this function run once
+    // before the game starts
     bg = 0
     color = 3
+    radius = 32
     posx = CENTERX
     posy = CENTERY
 }
 
-// called at 60 fps by default
-// use to update your things
+// this function detect taps/clicks
+// and changes the circle position
+function tapped(x, y) {
+    posx = x
+    posy = y
+}
+
+// this function controls the game logic
 function update(dt) {
-    // example: tap to change the circle position
-    if (TAPPED) {
-        posx = TAPX
-        posy = TAPY
-    }
+    // make the circle falls 100 pixels per second
+    posy += 100 * dt
 }
 
-// use to draw your things
+// this function render the game scene
 function draw() {
-    clear(bg) // clear the screen
-    circfill(posx, posy, 50, color) // draw a circle
+    cls(bg) // clear the screen
+    circfill(posx, posy, radius, color) // draw a circle
 }
 ```
 
@@ -79,11 +84,10 @@ Check out our [Cheatsheet](https://litecanvas.js.org/about.html).
 
 Try some demos in our playground:
 
--   [Pong](https://litecanvas.js.org?c=eJy1VV1SE0EQfs8p2qfdJQv5AZSiCFYKIlClYkFKzOO4O5tMuZlNzU6AEvEKnsA3D%2BF5vIBXsHt6drNRtHixKiTT0z1f%2F33d5MrKROhrUYZ3LYAbldrZPmz3uzFKM6mmM7sPO3tO7HRALG1RJiKX%2B5CJvJSt%2B6jVypY6sarQoLSyYQQEtBDpFQyg1%2B%2BycErCLp%2Ff0bnrFRMUdrZJSGVpSUUWKL4XeU7i0ej1eHRR3Uzqmwlswuno7OR0DB3Y8epL9VFWnkge6mlOFw5fGeeZjxN%2FLBdSpnjuu4DKpDCVfa4yWeJ5G89W3lqPfXV2PD5Fl3tkboWx7jlXg4uUFyIFAcmytMUcskJbQsPLF3gMg3mhi6kR8yCGoEPaslNdbVmb4XVoZBnB4NBVEkBl%2FoaiyNYxImch0TnYmSluIDgSGnRhOQqyDtAE23TfaNRykQorw9Rys8jBy%2FPh8dnrkwiMtEuj%2Fe0Tn2HkQ1klPB6%2BeTM6dpf1i3v%2FyldugHWs8KguUzGXUFxL89wXaiZ0iu1RerG0pX9LuC4OdliR4vNn0rzDnjtmdaAfOYcMNEdUzF%2BSEhE9lKPaE4zCgVSInoC5NAtnEbM6hu5Wd7cJmhY6wDJK20BGUXhXZWKk1E1XB5SuhycCua7U2jZHfsgEqg2ZTpxWy6Mx0dsrRh96plc5VLPRe9qtZSL0MxYr5vLvpuM59i67DbebCTIL3GNYFKUiatSD1x7wwGz4CdmA1NYzyMrJupJB3xdIMg%2BKTFurkkdu5sXpf%2FrkvR7UupoALogBbK6S6EUNrnFAD76rRnztFUeZzGTygYNMijxXJU3FjbKzdQahzsjEcuAxJx%2FXrponZhLtM%2Fd9FUMv%2Bi2UKgO3Ytq0AuvYuhxbc0RTI278Lk2QdIZtHj%2BptCtErqY6DBKprTS0buaKkvNLgyxKDD6sltvqOvRLN652Lb7F8YPxOVyOhxdjxGImrTjOXDukEbjzWyGxmcrz8M%2FS0P8Dj4DZKZM4u78VGYfy4XirLbCWrCsD5YrLZar0tJFs2OtiW%2FAv%2BPH128%2FvXyDYMnIhheXgoxh2Gq48ntTpw2h%2FK1010OQIP2EQIONd06MtTPyS4gufoi5aL%2BL%2FaBuG0d9FgJPhqxGcvx1dBHXZ%2F6zmBm7Avd1%2FobW5epdH5xejfUrrEckhqX8Bx8Nfnw%3D%3D)
+-   [Pong](https://litecanvas.js.org?c=eJy1VVFu20gM%2Ffcp2C9JsRLLTtwGQZzCSL1JgN1mkRhN%2FTmRRvZg5ZExGidpm%2FYKe4L96yF6nr3AXmHJ4UiW07TYnwUcezjkkHzkI1MoK1Oh70QVfuoA3KvMLo5gf5DEKC2kmi%2FsERwcJp3PUaeTr3VqValBaWXDCOjFSmQ3MIL%2BIGHhnIQhn9%2FTOfGKGQoH%2ByRksrKkIgsUb0VRkHg6eTudXNU3s%2BZmBrtwPrk4O59CDw68%2Blp9lHUkksd6XtCF86%2BMi8zHmT9WKykzPA9cQlVamtq%2BULms8LyPZysfrPd9c%2FFmeo4hD8ncCmPd81wUlezgVa8HRSkyEJCuK1suIS%2B1JW94%2BQsew2BZ6nJuxDKIIeiRturVV3vW5ngdGllFMDpxlQRQub%2BhLPJtH5GzkBgc7MKU9xCcCg26tJwFWQdogm363GqUFauVzMKHGD5wuyjEC48m8mHb8KxZS39ppF0bTT5bPfvyJXzAfriu92CwHW29yoSVYWafi8XuqGxWWexVlRop9Wtv53swwo60TediKaG8k%2Ba1L%2FkSBSyApAyyQvrXjmsv8LFLs8blGVhIs3IWMatjSPaSYeSAsdOs1AHWUdqWZxSFD8WZtkMdU5bePTHItaXRdrk8J8ygxpD5xLXreG%2FM9O6G0iee6jWGejj6L5NGJka%2FYrGmLv%2FuOqJjO%2FOHcL8NkBvjHsOqrBR1q5m87ognZsePyA5kthlCVs62lez0tsS%2Be6fY%2FK0qec9tXAz%2F8dFHPW50NVROYgS7GxD9yNNvU6tn39UzvvWKs0wXMv2Dk0zLolAVEfVe2cU2g1BnZGo58ZjBx02o9omZRAvNfd%2FE0I%2BepFIjcDumSzuwyS3h3NpTkxlx75dpiqQzZOOz%2BvVy%2FObi7Vk9EfX10wGmdSEKNddhkEptpaGNs1QEz%2B8Nsqgw%2FbDeb5vr0O%2FduF63%2BHY6%2Fh2ml3A9HV9N0RdzacNyZtsJDQEnQKXLVVGE3xeH%2FiV4D4hPmdTZ%2FajMQwf9mXx52TwB68pAWBdCz5Wet8CG%2FQQbg3%2FB3399%2FefbnxDsGbmSwnLyUQwHrVDen9TZ895%2BVLp6pCkQfsIgQM67tkd7CPya8gtfoi7aLuL%2F0TZMYzBEB2fj3yZw%2BW5yFTRl%2F76aO7gDD4c%2F89bl6l2fXl5NjgjWfwCHtP4XpMdclw%3D%3D)
 -   [Bouncing ball](https://litecanvas.js.org?c=eJxtUj1vgzAQ3fkVNxpCAklbqRWlQ9WqZI%2FU2TImsuQCAkOLkvz3GvsKDs3gwff8Pu7OUijOaNnTlvieJ7mCumqFElUJKfSckW0ch%2Fr4Buu5rJhQQ2Jux4b206WhuehaTbp%2F9LyiK5nREKVQxIeTBxMXdT%2F3b4cs2IXZ%2B%2F4jO0Q7P9FvUBGfxAhq6OJodnVOFSe5srp%2FeTc%2FsEonF30LIFcuPlzhg8WdYFYAI8x8h%2BHAMz2K4LXS2ThURQE8P%2FJWV0UBZE62wum8gGkbzmcn9hrBZ4htR1eRghTW2%2BRGNd48PZiyM4AUmKRfteMc4mJC64xeviZelil1fzDlxMkv8wwmz3%2FrcWWWgg7GwN1a3tBv%2FAlMtiQ2%2B2aiYYWQ0g08a4YY%2FW7xAca%2FoRsbrFrDVdeUcBor2vIXzlHggw%3D%3D)
--   [Scroller](https://litecanvas.js.org?c=eJxVUE1PAjEQve%2BvGA%2BGdrdilw%2FFKAcTSDTxYKIJB8Kh7ha2SWnJdtCNhv%2FulAWUQz9m3pv3ZsYa1IVynyowniTLrSvQeAfGGQTG4ScBWOsQ1ErDGDozbQu%2F1oAe7KnwokOkhuDZ8%2BT9if4bZSma98VADMWNuBUjcSdyKfJ8kez%2BmWw3pUINrMTWCKlq%2BvL4%2BjadUBTMtz6KXh966FrtVlgRWhE0lHvjqzH0pYQUSjyTL2v1dZyhsFrVTNKIAEtfA7MawZCGvKfnAc71KZdlbSFAZGJsDTMmu3lq%2BClNB3VN0LE8bD8C1swIyP9Yhbc%2Bkmgt86X1vmaI6fCSwoMdX%2By5qBuMQ7N48VOKrVXDGgE9yTOTRiyV3ZGAKuvJLBgX1QY8rcShHdEatgKFd8Fbmsuv2N6W%2F%2Fclyo5W9guGqpXp)
+-   [Scroller](https://litecanvas.js.org?c=eJxVUMFOwzAMvfcrzAEtacNIxwZDsAPSJoG0AxJIO0w7hDZdI6XN1HhQgfbvOOs22CGJ7ff8nh1rUGeq%2FlSe8SgqtnWGxtVgaoPAOPxEAJX2Xq01TKC30DZzlQZ0YE%2BNFz0itQQvXqbvzxRvlKVsORQjcSvuxFjci1SKNF1Fu38W202uUAPLsbNB6pnNn17fZlPKvPnWR8nrwwR9q%2Bs1loSWBI3k3vZqAjdSQgw5nsnnjfo6bpBZzySnoHANMKsRDAnIB3oe4VycaknSdQEEJoa5MGGyn8aGn8p0UDcEHdv99sNjw4yA9I%2BVOesCiX5kWVjnGoYYjy4pPdjx1Z6LusWwMQsXP5VYpVrWChhInpg4YLHsjwWUyUAm3tRBbcjjUhzGEZ1hENjRZ%2FwCV%2F6J0w%3D%3D)
 -   [3D Projection](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)
--   [Clip](https://litecanvas.js.org?c=eJx1UE1LxDAUvPdXvNsmNEi2blnw4yCo215kwYJK6aG2qRssaUlTbZX9774mtbgHIR9vhuS9mamlEUWuPvKOUM%2BrelUY2SiQShpC4dsDGOAa1pxjNWK1DT2sXptBdIjSDEHVaCC1MCCR4Zd4XUHIp8L3XYv5w1nbdweS6lyVknAGT%2FFtElEGCxHdxbsoWZgNgy3NKDY44u7kl5ikBKF3%2FKO0b8vcCFIaN0pWQJKb%2FT5%2B2P3Ongwg9WzB6MDL3PSkVanzz9l0UXeET5OtZGoZ2RZSF2RgMDKrhs4Pz%2Bk%2FKTjXtVBv5nAShxaFqWRdE%2FsilVnKMwYLWCMIQrcXMrBJYA5GN%2B%2FCqZsstE1rBRoxmClEXKv7%2FePFyseTwYaixx%2BHoYO9)
 
 _See other demos in [samples](samples) folder_
 

package/dist/dist.js

@@ -26,7 +26,7 @@
   };
 
   // src/palette.js
-  var palette_default = colors = [
+  var colors = [
     "#18161c",
     "#6a7799",
     "#aec2c2",
@@ -42,7 +42,7 @@
   ];
 
   // src/sounds.js
-  var sounds_default = sounds = [
+  var sounds = [
     // 0 - pickup
     [0.8, 0, 2e3, 0.01, 0.05, , 1, 2, , , -600, 0.05, , , , , , 0.5, 0.05],
     // 1 - hit
@@ -56,31 +56,33 @@
   // src/index.js
   var root = globalThis;
   function litecanvas(settings = {}) {
-    const body = document.body, math = Math, PI = math.PI, TWO_PI = PI * 2, on = (elem, evt, callback) => elem.addEventListener(evt, callback), off = (elem, evt, callback) => elem.removeEventListener(evt, callback), time = () => performance.now(), NULL = null, UNDEF = void 0, defaults = {
+    const PI = Math.PI, TWO_PI = PI * 2, on = (elem, evt, callback) => elem.addEventListener(evt, callback), defaults = {
       fps: 60,
       fullscreen: true,
-      width: NULL,
-      height: NULL,
+      width: null,
+      height: null,
       autoscale: true,
       pixelart: false,
       antialias: true,
-      background: NULL,
-      canvas: NULL,
+      canvas: null,
       global: true,
       tapEvents: true,
-      useMouse: false,
-      loop: NULL
+      loop: null
     };
     settings = Object.assign(defaults, settings);
-    let _initialized = false, _plugins = [], _canvas = settings.canvas || document.createElement("canvas"), _fullscreen = settings.fullscreen, _autoscale = settings.autoscale, _bg = settings.background, _hasMouse = settings.useMouse || matchMedia("(pointer:fine)").matches, _tappingHandler, _scale = 1, _offsetTop = 0, _offsetLeft = 0, _ctx, _lastFrame, _step = 1 / settings.fps, _stepMs = _step * 1e3, _accumulated = 0, _rafid, _drawCount = 0, _drawTime = 0, _fontFamily = "sans-serif", _fontStyle = "", _fontSize = 32, _textAlign = "start", _textBaseline = "top", _loop = {
+    let _initialized = false, _plugins = [], _canvas = settings.canvas || document.createElement("canvas"), _fullscreen = settings.fullscreen, _autoscale = settings.autoscale, _scale = 1, _mouseX, _mouseY, _ctx, _lastFrame, _step = 1 / settings.fps, _stepMs = _step * 1e3, _accumulated = 0, _rafid, _drawCount = 0, _drawTime = 0, _fontFamily = "sans-serif", _fontStyle = "", _fontSize = 32, _textAlign = "start", _textBaseline = "top", _events = {
       init: [],
       update: [],
       draw: [],
-      resized: []
+      resized: [],
+      tap: [],
+      untap: [],
+      tapping: [],
+      tapped: []
     }, _helpers = {
       settings: Object.assign({}, settings),
-      colors: palette_default,
-      sounds: sounds_default
+      colors,
+      sounds
     };
     const instance = {
       /** @type {number} */
@@ -88,25 +90,15 @@
       /** @type {number} */
       HEIGHT: settings.height || settings.width,
       /** @type {HTMLCanvasElement} */
-      CANVAS: NULL,
-      /** @type {boolean} */
-      TAPPED: NULL,
-      /** @type {boolean} */
-      TAPPING: NULL,
-      /** @type {number} */
-      TAPX: NULL,
-      /** @type {number} */
-      TAPY: NULL,
+      CANVAS: null,
       /** @type {number} */
       ELAPSED: 0,
       /** @type {number} */
       FPS: settings.fps,
       /** @type {number} */
-      DT: _step,
-      /** @type {number} */
-      CENTERX: NULL,
+      CENTERX: null,
       /** @type {number} */
-      CENTERY: NULL,
+      CENTERY: null,
       /** MATH API */
       /**
        * The value of the mathematical constant PI (π).
@@ -164,7 +156,7 @@
        * @param {number} max
        * @returns {number}
        */
-      clamp: (value, min, max) => math.min(math.max(value, min), max),
+      clamp: (value, min, max) => Math.min(Math.max(value, min), max),
       /**
        * Wraps a number between `min` (inclusive) and `max` (exclusive).
        *
@@ -173,7 +165,7 @@
        * @param {number} max
        * @returns {number}
        */
-      wrap: (value, min, max) => value - (max - min) * math.floor((value - min) / (max - min)),
+      wrap: (value, min, max) => value - (max - min) * Math.floor((value - min) / (max - min)),
       /**
        * Re-maps a number from one range to another.
        *
@@ -198,13 +190,6 @@
        * @returns {number} the normalized number.
        */
       norm: (value, min, max) => instance.map(value, min, max, 0, 1),
-      /**
-       * Returns the fractional part of a number
-       *
-       * @param {number} value The number
-       * @returns {number}
-       */
-      fract: (value) => value % 1,
       /** RNG API */
       /**
        * Generates a pseudorandom float between min (inclusive) and max (exclusive)
@@ -213,7 +198,7 @@
        * @param {number} [max=1.0]
        * @returns {number} the random number
        */
-      rand: (min = 0, max = 1) => math.random() * (max - min) + min,
+      rand: (min = 0, max = 1) => Math.random() * (max - min) + min,
       /**
        * Generates a pseudorandom integer between min (inclusive) and max (inclusive)
        *
@@ -228,8 +213,8 @@
        *
        * @param {number|null} color The background color (from 0 to 7) or null
        */
-      clear(color) {
-        if (NULL == color) {
+      cls(color) {
+        if (null == color) {
           _ctx.clearRect(0, 0, instance.WIDTH, instance.HEIGHT);
         } else {
           instance.rectfill(0, 0, instance.WIDTH, instance.HEIGHT, color);
@@ -245,7 +230,7 @@
        * @param {number} [color=0] the color index (generally from 0 to 7)
        * @param {number|number[]} [radii] A number or list specifying the radii used to draw a rounded-borders rectangle
        */
-      rect(x, y, width, height, color = 0, radii = UNDEF) {
+      rect(x, y, width, height, color = 0, radii = null) {
         _ctx.beginPath();
         _ctx[radii ? "roundRect" : "rect"](
           ~~x,
@@ -266,7 +251,7 @@
        * @param {number} [color=0] the color index (generally from 0 to 7)
        * @param {number|number[]} [radii] A number or list specifying the radii used to draw a rounded-borders rectangle
        */
-      rectfill(x, y, width, height, color = 0, radii = UNDEF) {
+      rectfill(x, y, width, height, color = 0, radii = null) {
         _ctx.beginPath();
         _ctx[radii ? "roundRect" : "rect"](
           ~~x,
@@ -341,26 +326,6 @@
         _ctx.setLineDash(Array.isArray(segments) ? segments : [segments]);
         _ctx.lineDashOffset = offset;
       },
-      /**
-       * Determines the shape used to draw the end points of lines
-       * Possible values are: "butt", "round" or "square"
-       *
-       * @param {string} value
-       * @see https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineCap
-       */
-      linecap(value) {
-        _ctx.lineCap = value;
-      },
-      /**
-       * Determines the shape used to join two line segments where they meet
-       * Possible values are: "round", "bevel", and "miter"
-       *
-       * @param {string} value
-       * @see https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineJoin
-       */
-      linejoin(value) {
-        _ctx.lineJoin = value;
-      },
       /** TEXT RENDERING API */
       /**
        * Draw text
@@ -605,16 +570,6 @@
       blendmode(value) {
         _ctx.globalCompositeOperation = value;
       },
-      /**
-       * Provides filter effects such as blurring and grayscaling.
-       * It is similar to the CSS filter property and accepts the same values.
-       *
-       * @param {string} effect
-       * @see https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/filter
-       */
-      filter(effect) {
-        _ctx.filter = effect;
-      },
       /** SOUND API */
       /**
        * Play a defined sound or a ZzFX array of params
@@ -630,7 +585,7 @@
         if (navigator.userActivation && !navigator.userActivation.hasBeenActive) {
           return;
         }
-        let z = Array.isArray(sound) ? sound : sounds_default[~~sound % sounds_default.length];
+        let z = Array.isArray(sound) ? sound : sounds[~~sound % sounds.length];
         if (volume !== 1 || pitch || randomness) {
           z = [...z];
           z[0] = (Number(volume) || 1) * (z[0] || 1);
@@ -666,38 +621,58 @@
        * @returns {boolean}
        */
       colcirc: (x1, y1, r1, x2, y2, r2) => (x2 - x1) ** 2 + (y2 - y1) ** 2 <= (r1 + r2) ** 2,
+      /**
+       * Get the mouse position
+       * @returns number[]
+       */
+      mousepos: () => [_mouseX, _mouseY],
       /** PLUGINS API */
       /**
        * Prepares a plugin to be loaded
        *
        * @param {pluginCallback} callback
        */
-      use: (callback) => {
+      use: (callback, config = {}) => {
+        callback.__config = config;
         _initialized ? loadPlugin(callback) : _plugins.push(callback);
       },
       /**
-       * Add a game loop event listener
+       * Add a game event listener
        *
-       * @param {string} event should be "init", "update", "draw" or "resized"
+       * @param {string} event the event type name
        * @param {function} callback the function that is called when the event occurs
        * @param {boolean} [highPriority=false] determines whether the callback will be called before or after the others
-       * @returns {function?} a function to remove the listener or `undefined` if passed a invalid event
+       * @returns {function} a function to remove the listener
        */
       listen(event, callback, highPriority = false) {
-        if (!_loop[event])
-          return;
-        _loop[event][highPriority ? "unshift" : "push"](callback);
+        _events[event] = _events[event] || [];
+        _events[event][highPriority ? "unshift" : "push"](callback);
         return () => {
-          _loop[event] = _loop[event].filter((f) => f !== callback);
+          _events[event] = _events[event].filter(
+            (item) => item !== callback
+          );
         };
       },
+      /**
+       * Call all listeners attached to a game event
+       *
+       * @param {string} event The game event type
+       * @param  {...any} args Arguments passed to all listeners
+       */
+      emit(event, ...args) {
+        if (!_events[event])
+          return;
+        for (let i = 0; i < _events[event].length; ++i) {
+          _events[event][i](...args);
+        }
+      },
       /**
        * Get the color value
        *
        * @param {number} index The color number
        * @returns {string} the color value
        */
-      getcolor: (index) => palette_default[~~index % palette_default.length],
+      getcolor: (index) => colors[~~index % colors.length],
       /**
        * Create or update a instance variable
        *
@@ -722,8 +697,6 @@
         pageResized();
       }
     };
-    instance.cls = instance.clear;
-    instance.print = instance.text;
     for (const k of [
       "sin",
       "cos",
@@ -742,88 +715,145 @@
       "sign",
       "exp"
     ]) {
-      instance[k] = math[k];
+      instance[k] = Math[k];
     }
     function init() {
       _initialized = true;
       setupCanvas();
-      if (settings.tapEvents) {
-        const _tappedLimit = 200;
-        const _getXY = (event) => {
-          return _hasMouse ? [event.pageX, event.pageY] : [event.touches[0].pageX, event.touches[0].pageY];
-        }, _eventTapStart = _hasMouse ? "mousedown" : "touchstart", _eventTapEnd = _hasMouse ? "mouseup" : "touchend", _eventTapMove = _hasMouse ? "mousemove" : "touchmove";
-        let _tapStartX, _tapStartY, _last, _start;
-        _tappingHandler = (ev) => {
-          updateTapping(true, ..._getXY(ev));
-        };
-        on(instance.CANVAS, _eventTapStart, function(ev) {
-          ev.preventDefault();
-          if (!_rafid)
-            _resume();
-          on(body, _eventTapMove, _tappingHandler);
-          const [x, y] = [_tapStartX, _tapStartY] = _getXY(ev);
-          updateTapping(true, x, y);
-          _last = _start = time();
-        });
-        on(instance.CANVAS, _eventTapEnd, function(ev) {
-          off(body, _eventTapMove, _tappingHandler);
-          updateTapping(false);
-          if (time() - _start <= _tappedLimit) {
-            updateTapped(true, _tapStartX, _tapStartY);
-          }
-        });
-      }
-      on(root, "focus", () => {
-        if (!_rafid)
-          _resume();
-      });
-      function _resume() {
-        _lastFrame = time();
-        _rafid = requestAnimationFrame(frame);
-      }
       on(root, "blur", () => {
         cancelAnimationFrame(_rafid);
         _rafid = 0;
-        if (settings.tapEvents) {
-          off(
-            body,
-            _hasMouse ? "mousemove" : "touchmove",
-            _tappingHandler
-          );
-          updateTapping(false);
+      });
+      on(root, "focus", () => {
+        if (!_rafid) {
+          _lastFrame = performance.now();
+          _rafid = requestAnimationFrame(drawFrame);
         }
       });
       const source = settings.loop ? settings.loop : root;
-      for (const event in _loop) {
+      for (const event in _events) {
         if (source[event])
           instance.listen(event, source[event]);
       }
       for (let i = 0; i < _plugins.length; i++) {
         loadPlugin(_plugins[i]);
       }
-      if (NULL != _bg) {
-        instance.CANVAS.style.background = instance.getcolor(_bg);
-      }
       on(root, "resize", pageResized);
       pageResized();
-      emit("init");
-      _lastFrame = time();
-      _rafid = requestAnimationFrame(frame);
+      instance.emit("init");
+      _lastFrame = performance.now();
+      _rafid = requestAnimationFrame(drawFrame);
+      if (settings.tapEvents) {
+        const _getXY = (pageX, pageY) => [
+          (pageX - _canvas.offsetLeft) / _scale,
+          (pageY - _canvas.offsetTop) / _scale
+        ], _taps = /* @__PURE__ */ new Map(), _registerTap = (id, x, y) => {
+          const tap = {
+            x,
+            y,
+            startX: x,
+            startY: y,
+            // timestamp
+            ts: performance.now()
+          };
+          _taps.set(id, tap);
+          return tap;
+        }, _updateTap = (id, x, y) => {
+          const tap = _taps.get(id) || _registerTap(id);
+          tap.x = x;
+          tap.y = y;
+        }, _checkTapped = (tap) => tap && performance.now() - tap.ts <= 200;
+        let _pressingMouse = false;
+        on(_canvas, "mousedown", (ev) => {
+          ev.preventDefault();
+          const [x, y] = _getXY(ev.pageX, ev.pageY);
+          instance.emit("tap", x, y, 0);
+          _registerTap(0, x, y);
+          _pressingMouse = true;
+        });
+        on(_canvas, "mousemove", (ev) => {
+          ev.preventDefault();
+          const [x, y] = [_mouseX, _mouseY] = _getXY(ev.pageX, ev.pageY);
+          if (!_pressingMouse)
+            return;
+          instance.emit("tapping", x, y, 0);
+          _updateTap(0, x, y);
+        });
+        on(_canvas, "mouseup", (ev) => {
+          ev.preventDefault();
+          const tap = _taps.get(0);
+          const [x, y] = _getXY(ev.pageX, ev.pageY);
+          if (_checkTapped(tap)) {
+            instance.emit("tapped", tap.startX, tap.startY, 0);
+          }
+          instance.emit("untap", x, y, 0);
+          _taps.delete(0);
+          _pressingMouse = false;
+        });
+        on(_canvas, "touchstart", (ev) => {
+          ev.preventDefault();
+          const touches = ev.changedTouches;
+          for (let i = 0; i < touches.length; i++) {
+            const touch = touches[i];
+            const [x, y] = _getXY(touch.pageX, touch.pageY);
+            instance.emit("tap", x, y, touch.identifier + 1);
+            _registerTap(touch.identifier + 1, x, y);
+          }
+        });
+        on(_canvas, "touchmove", (ev) => {
+          ev.preventDefault();
+          const touches = ev.changedTouches;
+          for (let i = 0; i < touches.length; i++) {
+            const touch = touches[i];
+            const [x, y] = _getXY(touch.pageX, touch.pageY);
+            instance.emit("tapping", x, y, touch.identifier + 1);
+            _updateTap(touch.identifier + 1, x, y);
+          }
+        });
+        const _touchEndHandler = (ev) => {
+          ev.preventDefault();
+          const existing = [];
+          if (ev.targetTouches.length > 0) {
+            for (const touch of ev.targetTouches) {
+              existing.push(touch.identifier + 1);
+            }
+          }
+          for (const [id, tap] of _taps) {
+            if (existing.includes(id))
+              continue;
+            if (_checkTapped(tap)) {
+              instance.emit("tapped", tap.startX, tap.startY, id);
+            }
+            instance.emit("untap", tap.x, tap.y, id);
+            _taps.delete(id);
+          }
+        };
+        on(_canvas, "touchend", _touchEndHandler);
+        on(_canvas, "touchcancel", _touchEndHandler);
+        on(root, "blur", () => {
+          _pressingMouse = false;
+          if (_taps.size === 0)
+            return;
+          for (const [id, tap] of _taps) {
+            instance.emit("untap", tap.x, tap.y, id);
+            _taps.delete(id);
+          }
+        });
+      }
     }
-    function frame(now) {
+    function drawFrame(now) {
       let ticks = 0, t = now - _lastFrame;
       _lastFrame = now;
       _accumulated += t;
       while (_accumulated >= _stepMs) {
-        emit("update", _step);
+        instance.emit("update", _step);
         instance.setvar("ELAPSED", instance.ELAPSED + _step);
         _accumulated -= _stepMs;
         ticks++;
-        instance.setvar("TAPPED", false);
       }
       if (ticks) {
         _drawCount++;
-        emit("draw");
+        instance.emit("draw");
         _drawTime += _stepMs * ticks;
         if (_drawTime + _accumulated >= 1e3) {
           instance.setvar("FPS", _drawCount);
@@ -832,7 +862,7 @@
         }
       }
       if (_rafid)
-        _rafid = requestAnimationFrame(frame);
+        _rafid = requestAnimationFrame(drawFrame);
     }
     function setupCanvas() {
       _canvas = "string" === typeof _canvas ? document.querySelector(_canvas) : _canvas;
@@ -843,7 +873,7 @@
       _canvas.width = instance.WIDTH;
       _canvas.height = instance.HEIGHT || instance.WIDTH;
       if (!_canvas.parentNode)
-        body.appendChild(_canvas);
+        document.body.appendChild(_canvas);
       if (!settings.antialias || settings.pixelart) {
         _ctx.imageSmoothingEnabled = false;
         _canvas.style.imageRendering = "pixelated";
@@ -863,46 +893,27 @@
         instance.setvar("WIDTH", innerWidth);
         instance.setvar("HEIGHT", innerHeight);
       } else if (_autoscale) {
-        _scale = math.min(
+        _scale = Math.min(
           innerWidth / instance.WIDTH,
           innerHeight / instance.HEIGHT
         );
-        _scale = settings.pixelart ? math.floor(_scale) : _scale;
+        _scale = settings.pixelart ? Math.floor(_scale) : _scale;
         _canvas.style.width = instance.WIDTH * _scale + "px";
         _canvas.style.height = instance.HEIGHT * _scale + "px";
       }
       instance.setvar("CENTERX", instance.WIDTH / 2);
       instance.setvar("CENTERY", instance.HEIGHT / 2);
-      _offsetTop = _canvas.offsetTop;
-      _offsetLeft = _canvas.offsetLeft;
       instance.textalign(_textAlign, _textBaseline);
-      emit("resized");
-    }
-    function updateTapped(tapped, x, y) {
-      instance.setvar("TAPPED", tapped);
-      instance.setvar("TAPX", (x - _offsetLeft) / _scale);
-      instance.setvar("TAPY", (y - _offsetTop) / _scale);
-    }
-    function updateTapping(tapped, x, y) {
-      instance.setvar("TAPPING", tapped);
-      instance.setvar("TAPX", (x - _offsetLeft) / _scale);
-      instance.setvar("TAPY", (y - _offsetTop) / _scale);
+      instance.emit("resized", _scale);
     }
     function loadPlugin(callback) {
-      const pluginData = callback(instance, _helpers);
+      const pluginData = callback(instance, _helpers, callback.__config);
       if ("object" === typeof pluginData) {
         for (const key in pluginData) {
           instance.setvar(key, pluginData[key]);
         }
       }
     }
-    function emit(event, ...args) {
-      if (!_loop[event])
-        return;
-      for (let i = 0; i < _loop[event].length; ++i) {
-        _loop[event][i](...args);
-      }
-    }
     if (settings.global) {
       if (root.__litecanvas) {
         throw new Error("Cannot instantiate litecanvas globally twice");