update engine and deps

Author: luizbills

package.json

@@ -28,7 +28,7 @@
     "@litecanvas/plugin-migrate": "latest",
     "@litecanvas/utils": "latest",
     "codemirror": "^6.0.2",
-    "eslint-linter-browserify": "9.29.0",
+    "eslint-linter-browserify": "9.30.0",
     "litecanvas": "latest",
     "pako": "^2.1.0"
   }

public/about.html

@@ -420,6 +420,12 @@ <h2><a id="drawing">Functions for Drawing</a></h2>
 // draw a outline circle
 circ(x, y, r, color = 0): void
 
+// draw a color-filled ellipse
+ovalfill(x, y, rx, ry, color = 0): void
+
+// draw a outline ellipse
+oval(x, y, rx, ry, color = 0): void
+
 // draw a line from one point (x1, y1) to another (x2, y2)
 line(x1, y1, x2, y2, color = 0): void
 

public/app.js

@@ -198,6 +198,7 @@
           DEV: assert(isNumber(value), "norm: 1st param must be a number");
           DEV: assert(isNumber(start), "norm: 2nd param must be a number");
           DEV: assert(isNumber(stop), "norm: 3rd param must be a number");
+          DEV: assert(start !== stop, "norm: the 2nd param must be different than the 3rd param");
           return instance.map(value, start, stop, 0, 1);
         },
         /**
@@ -398,6 +399,62 @@
           _ctx.arc(~~x, ~~y, ~~radius, 0, TWO_PI);
           instance.fill(color);
         },
+        /**
+         * Draw a ellipse outline
+         *
+         * @param {number} x
+         * @param {number} y
+         * @param {number} radiusX
+         * @param {number} radiusY
+         * @param {number} [color=0] the color index
+         */
+        oval(x, y, radiusX, radiusY, color) {
+          DEV: assert(isNumber(x), "oval: 1st param must be a number");
+          DEV: assert(isNumber(y), "oval: 2nd param must be a number");
+          DEV: assert(
+            isNumber(radiusX) && radiusX >= 0,
+            "oval: 3rd param must be a positive number or zero"
+          );
+          DEV: assert(
+            isNumber(radiusY) && radiusY >= 0,
+            "oval: 4th param must be a positive number or zero"
+          );
+          DEV: assert(
+            null == color || isNumber(color) && color >= 0,
+            "oval: 5th param must be a positive number or zero"
+          );
+          _ctx.beginPath();
+          _ctx.ellipse(~~x, ~~y, ~~radiusX, ~~radiusY, 0, 0, TWO_PI);
+          instance.stroke(color);
+        },
+        /**
+         * Draw a color-filled ellipse
+         *
+         * @param {number} x
+         * @param {number} y
+         * @param {number} radiusX
+         * @param {number} radiusY
+         * @param {number} [color=0] the color index
+         */
+        ovalfill(x, y, radiusX, radiusY, color) {
+          DEV: assert(isNumber(x), "ovalfill: 1st param must be a number");
+          DEV: assert(isNumber(y), "ovalfill: 2nd param must be a number");
+          DEV: assert(
+            isNumber(radiusX) && radiusX >= 0,
+            "ovalfill: 3rd param must be a positive number or zero"
+          );
+          DEV: assert(
+            isNumber(radiusY) && radiusY >= 0,
+            "ovalfill: 4th param must be a positive number or zero"
+          );
+          DEV: assert(
+            null == color || isNumber(color) && color >= 0,
+            "ovalfill: 5th param must be a positive number or zero"
+          );
+          _ctx.beginPath();
+          _ctx.ellipse(~~x, ~~y, ~~radiusX, ~~radiusY, 0, 0, TWO_PI);
+          instance.fill(color);
+        },
         /**
          * Draw a line
          *
@@ -1219,17 +1276,19 @@
           `Litecanvas' option "width" is required when the option "height" is defined`
         );
         const width = settings.width || root.innerWidth, height = settings.height || settings.width || root.innerHeight;
-        instance.def("W", _canvas.width = width);
-        instance.def("H", _canvas.height = height);
+        instance.def("W", width);
+        instance.def("H", height);
+        _canvas.width = width;
+        _canvas.height = height;
         if (settings.autoscale) {
           if (!_canvas.style.display) {
             _canvas.style.display = "block";
             _canvas.style.margin = "auto";
           }
-          _scale = math.min(root.innerWidth / instance.W, root.innerHeight / instance.H);
+          _scale = math.min(root.innerWidth / width, root.innerHeight / height);
           _scale = (settings.pixelart ? ~~_scale : _scale) || 1;
-          _canvas.style.width = instance.W * _scale + "px";
-          _canvas.style.height = instance.H * _scale + "px";
+          _canvas.style.width = width * _scale + "px";
+          _canvas.style.height = height * _scale + "px";
         }
         if (!settings.antialias || settings.pixelart) {
           _ctx.imageSmoothingEnabled = false;

public/litecanvas.js

@@ -1,5 +1,5 @@
 const cacheName = "luizbills.litecanvas-editor-v1";
-const version = "2025.06.28.0";
+const version = "2025.06.30.0";
 
 const precacheResources = [
   "/",

public/sw.js

@@ -63,6 +63,18 @@ export default function customCompletions(context) {
         apply: "circfill(",
         detail: "(x, y, radius, color=0)",
       },
+      {
+        label: "oval",
+        type: "function",
+        apply: "oval(",
+        detail: "(x, y, rx, ry, color=0)",
+      },
+      {
+        label: "ovalfill",
+        type: "function",
+        apply: "ovalfill(",
+        detail: "(x, y, rx, ry, color=0)",
+      },
       {
         label: "line",
         type: "function",