melonjs 10.7.1 → 10.10.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "melonjs",
-  "version": "10.7.1",
+  "version": "10.10.0",
   "description": "melonJS Game Engine",
   "homepage": "http://www.melonjs.org/",
   "keywords": [
@@ -35,6 +35,7 @@
     "name": "Olivier Biot",
     "email": "contact@melonjs.org"
   },
+  "funding": "https://github.com/sponsors/melonjs",
   "engines": {
     "node": ">= 12"
   },
@@ -46,7 +47,6 @@
     "dist/melonjs.min.js",
     "dist/melonjs.module.js",
     "dist/melonjs.module.d.ts",
-    "plugins/",
     "src/",
     "package.json",
     "README.md",
@@ -55,35 +55,37 @@
   ],
   "dependencies": {
     "@teppeis/multimaps": "^2.0.0",
-    "core-js": "^3.22.4",
+    "core-js": "^3.22.8",
     "earcut": "2.2.3",
     "eventemitter3": "^4.0.7",
     "howler": "2.2.3"
   },
   "devDependencies": {
+    "@melonjs/jsdoc-template": "^2.0.2",
     "@rollup/plugin-buble": "^0.21.3",
     "@rollup/plugin-commonjs": "^22.0.0",
     "@rollup/plugin-node-resolve": "^13.3.0",
     "@rollup/plugin-replace": "^4.0.0",
-    "@types/offscreencanvas": "^2019.6.4",
-    "cheerio": "^1.0.0-rc.10",
+    "@types/offscreencanvas": "^2019.7.0",
+    "@webdoc/cli": "^1.6.0",
+    "cheerio": "^1.0.0-rc.11",
     "del-cli": "^4.0.1",
-    "eslint": "^8.14.0",
-    "eslint-plugin-jsdoc": "^39.2.9",
-    "jasmine-core": "^4.1.0",
+    "eslint": "^8.17.0",
+    "eslint-plugin-jsdoc": "^39.3.2",
+    "jasmine-core": "^4.1.1",
     "jsdoc": "^3.6.10",
-    "karma": "^6.3.19",
+    "karma": "^6.3.20",
     "karma-chrome-launcher": "^3.1.1",
     "karma-coverage": "^2.2.0",
     "karma-html-detailed-reporter": "^2.1.0",
-    "karma-jasmine": "^5.0.0",
+    "karma-jasmine": "^5.0.1",
     "karma-nyan-reporter": "0.2.5",
-    "qs": "^6.10.3",
-    "rollup": "^2.71.1",
+    "qs": "^6.10.5",
+    "rollup": "^2.75.5",
     "rollup-plugin-bundle-size": "^1.0.3",
     "rollup-plugin-string": "^3.0.0",
-    "terser": "^5.13.1",
-    "typescript": "^4.6.4"
+    "terser": "^5.14.0",
+    "typescript": "^4.7.3"
   },
   "scripts": {
     "build": "npm run lint && rollup -c --silent",
@@ -92,6 +94,7 @@
     "lint": "eslint src rollup.config.js",
     "test": "npm run build && karma start tests/karma.conf.cjs",
     "doc": "mkdirp docs && jsdoc -c jsdoc_conf.json",
+    "webdoc": "mkdirp dist && webdoc --quiet -R README.md",
     "release": "npm run dist && npm publish --access public",
     "clean": "del-cli --force build/*.js dist/*.js dist/*.d.ts docs src/**/*.d.ts",
     "types": "tsc dist/melonjs.module.js --declaration --allowJs --emitDeclarationOnly"

package/src/camera/camera2d.js

@@ -7,7 +7,7 @@ import Matrix3d from "./../math/matrix3.js";
 import Rect from "./../geometries/rectangle.js";
 import { renderer } from "./../video/video.js";
 import * as event from "./../system/event.js";
-import * as pool from "./../system/pooling.js";
+import pool from "./../system/pooling.js";
 import Renderable from "./../renderable/renderable.js";
 import {clamp, toBeCloseTo} from "./../math/math.js";
 import { world } from "./../game.js";

package/src/entity/entity.js

@@ -1,8 +1,7 @@
-import Vector2d from "./../math/vector2.js";
+import pool from "./../system/pooling.js";
 import Renderable from "./../renderable/renderable.js";
 import Sprite from "./../renderable/sprite.js";
 import Body from "./../physics/body.js";
-import Polygon from "./../geometries/poly.js";
 
 
 /**
@@ -102,11 +101,11 @@ class Entity extends Renderable {
          */
         // initialize the default body
         if (typeof settings.shapes === "undefined") {
-            settings.shapes = new Polygon(0, 0, [
-                new Vector2d(0,          0),
-                new Vector2d(this.width, 0),
-                new Vector2d(this.width, this.height),
-                new Vector2d(0,          this.height)
+            settings.shapes = pool.pull("Polygon", 0, 0, [
+                pool.pull("Vector2d", 0,          0),
+                pool.pull("Vector2d", this.width, 0),
+                pool.pull("Vector2d", this.width, this.height),
+                pool.pull("Vector2d", 0,          this.height)
             ]);
         }
         this.body = new Body(this, settings.shapes, this.onBodyUpdate.bind(this));

package/src/game.js

@@ -5,9 +5,9 @@ import state from "./state/state.js";
 import World from "./physics/world.js";
 
 /**
- * me.game represents your current game, it contains all the objects,
+ * game represents your current game, it contains all the objects,
  * tilemap layers, current viewport, collision map, etc...<br>
- * me.game is also responsible for updating (each frame) the object status and draw them.
+ * game is also responsible for updating (each frame) the object status and draw them.
  * @namespace game
  */
 

package/src/geometries/ellipse.js

@@ -1,5 +1,4 @@
-import Vector2d from "./../math/vector2.js";
-import * as pool from "./../system/pooling.js";
+import pool from "./../system/pooling.js";
 
 /**
  * @classdesc
@@ -18,9 +17,9 @@ class Ellipse {
          * @public
          * @type {Vector2d}
          * @name pos
-         * @memberof Ellipse#
+         * @memberof Ellipse
          */
-        this.pos = new Vector2d();
+        this.pos = pool.pull("Vector2d");
 
         /**
          * The bounding rectangle for this shape
@@ -42,27 +41,27 @@ class Ellipse {
          * @public
          * @type {Vector2d}
          * @name radiusV
-         * @memberof Ellipse#
+         * @memberof Ellipse
          */
-        this.radiusV = new Vector2d();
+        this.radiusV = pool.pull("Vector2d");
 
         /**
          * Radius squared, for pythagorean theorom
          * @public
          * @type {Vector2d}
          * @name radiusSq
-         * @memberof Ellipse#
+         * @memberof Ellipse
          */
-        this.radiusSq = new Vector2d();
+        this.radiusSq = pool.pull("Vector2d");
 
         /**
          * x/y scaling ratio for ellipse
          * @public
          * @type {Vector2d}
          * @name ratio
-         * @memberof Ellipse#
+         * @memberof Ellipse
          */
-        this.ratio = new Vector2d();
+        this.ratio = pool.pull("Vector2d");
 
         // the shape type
         this.shapeType = "Ellipse";
@@ -77,7 +76,7 @@ class Ellipse {
     /**
      * set new value to the Ellipse shape
      * @name setShape
-     * @memberof Ellipse.prototype
+     * @memberof Ellipse
      * @function
      * @param {number} x the center x coordinate of the ellipse
      * @param {number} y the center y coordinate of the ellipse
@@ -107,7 +106,7 @@ class Ellipse {
     /**
      * Rotate this Ellipse (counter-clockwise) by the specified angle (in radians).
      * @name rotate
-     * @memberof Ellipse.prototype
+     * @memberof Ellipse
      * @function
      * @param {number} angle The angle to rotate (in radians)
      * @param {Vector2d|ObservableVector2d} [v] an optional point to rotate around
@@ -124,7 +123,7 @@ class Ellipse {
     /**
      * Scale this Ellipse by the specified scalar.
      * @name scale
-     * @memberof Ellipse.prototype
+     * @memberof Ellipse
      * @function
      * @param {number} x
      * @param {number} [y=x]
@@ -143,7 +142,7 @@ class Ellipse {
     /**
      * Scale this Ellipse by the specified vector.
      * @name scale
-     * @memberof Ellipse.prototype
+     * @memberof Ellipse
      * @function
      * @param {Vector2d} v
      * @returns {Ellipse} Reference to this object for method chaining
@@ -155,7 +154,7 @@ class Ellipse {
     /**
      * apply the given transformation matrix to this ellipse
      * @name transform
-     * @memberof Ellipse.prototype
+     * @memberof Ellipse
      * @function
      * @param {Matrix2d} matrix the transformation matrix
      * @returns {Polygon} Reference to this object for method chaining
@@ -168,7 +167,7 @@ class Ellipse {
     /**
      * translate the circle/ellipse by the specified offset
      * @name translate
-     * @memberof Ellipse.prototype
+     * @memberof Ellipse
      * @function
      * @param {number} x x offset
      * @param {number} y y offset
@@ -177,7 +176,7 @@ class Ellipse {
     /**
      * translate the circle/ellipse by the specified vector
      * @name translate
-     * @memberof Ellipse.prototype
+     * @memberof Ellipse
      * @function
      * @param {Vector2d} v vector offset
      * @returns {Ellipse} this ellipse
@@ -205,7 +204,7 @@ class Ellipse {
     /**
      * check if this circle/ellipse contains the specified point
      * @name contains
-     * @memberof Ellipse.prototype
+     * @memberof Ellipse
      * @function
      * @param {Vector2d} point
      * @returns {boolean} true if contains
@@ -214,7 +213,7 @@ class Ellipse {
     /**
      * check if this circle/ellipse contains the specified point
      * @name contains
-     * @memberof Ellipse.prototype
+     * @memberof Ellipse
      * @function
      * @param  {number} x x coordinate
      * @param  {number} y y coordinate
@@ -246,7 +245,7 @@ class Ellipse {
     /**
      * returns the bounding box for this shape, the smallest Rectangle object completely containing this shape.
      * @name getBounds
-     * @memberof Ellipse.prototype
+     * @memberof Ellipse
      * @function
      * @returns {Bounds} this shape bounding box Rectangle object
      */
@@ -260,7 +259,7 @@ class Ellipse {
     /**
      * clone this Ellipse
      * @name clone
-     * @memberof Ellipse.prototype
+     * @memberof Ellipse
      * @function
      * @returns {Ellipse} new Ellipse
      */

package/src/geometries/line.js

@@ -1,4 +1,4 @@
-import Vector2d from "./../math/vector2.js";
+import pool from "./../system/pooling.js";
 import Polygon from "./poly.js";
 
 /**
@@ -15,7 +15,7 @@ class Line extends Polygon {
     /**
      * Returns true if the Line contains the given point
      * @name contains
-     * @memberof Line.prototype
+     * @memberof Line
      * @function
      * @param {Vector2d} point
      * @returns {boolean} true if contains
@@ -24,7 +24,7 @@ class Line extends Polygon {
     /**
      * Returns true if the Line contains the given point
      * @name contains
-     * @memberof Line.prototype
+     * @memberof Line
      * @function
      * @param  {number} x x coordinate
      * @param  {number} y y coordinate
@@ -58,7 +58,7 @@ class Line extends Polygon {
      * Computes the calculated collision edges and normals.
      * This **must** be called if the `points` array, `angle`, or `offset` is modified manually.
      * @name recalc
-     * @memberof Line.prototype
+     * @memberof Line
      * @function
      * @returns {Line} this instance for objecf chaining
      */
@@ -76,11 +76,11 @@ class Line extends Polygon {
 
         // Calculate the edges/normals
         if (edges[0] === undefined) {
-            edges[0] = new Vector2d();
+            edges[0] = pool.pull("Vector2d");
         }
         edges[0].copy(points[1]).sub(points[0]);
         if (normals[0] === undefined) {
-            normals[0] = new Vector2d();
+            normals[0] = pool.pull("Vector2d");
         }
         normals[0].copy(edges[0]).perp().normalize();
 
@@ -94,7 +94,7 @@ class Line extends Polygon {
     /**
      * clone this line segment
      * @name clone
-     * @memberof Line.prototype
+     * @memberof Line
      * @function
      * @returns {Line} new Line
      */

package/src/geometries/path2d.js

@@ -0,0 +1,319 @@
+import pool from "./../system/pooling.js";
+import { TAU } from "./../math/math.js";
+import earcut from "earcut";
+
+/**
+ * @classdesc
+ * a simplified path2d implementation, supporting only one path
+ */
+class Path2D {
+    constructor() {
+        /**
+         * the points defining the current path
+         * @public
+         * @type {Vector2d[]}
+         * @name points
+         * @memberof Path2D#
+         */
+        this.points = [];
+
+        /**
+         * space between interpolated points for quadratic and bezier curve approx. in pixels.
+         * @public
+         * @type {number}
+         * @name arcResolution
+         * @default 5
+         * @memberof Path2D#
+         */
+        this.arcResolution = 5;
+
+        /* @ignore */
+        this.vertices = [];
+    }
+
+    /**
+     * begin a new path
+     * @name beginPath
+     * @memberof Path2D
+     * @function
+     */
+    beginPath() {
+        // empty the cache and recycle all vectors
+        this.points.forEach((point) => {
+            pool.push(point);
+        });
+        this.points.length = 0;
+    }
+
+    /**
+     * causes the point of the pen to move back to the start of the current path.
+     * It tries to draw a straight line from the current point to the start.
+     * If the shape has already been closed or has only one point, this function does nothing.
+     * @name closePath
+     * @memberof Path2D
+     * @function
+     */
+    closePath() {
+        var points = this.points;
+        if (points.length > 1 && !points[points.length-1].equals(points[0])) {
+            points.push(pool.pull("Vector2d", points[0].x, points[0].y));
+        }
+    }
+
+    /**
+     * triangulate the shape defined by this path into an array of triangles
+     * @name triangulatePath
+     * @memberof Path2D
+     * @function
+     * @returns {Vector2d[]}
+     */
+    triangulatePath() {
+        var i = 0;
+        var points = this.points;
+        var vertices = this.vertices;
+        var indices = earcut(points.flatMap(p => [p.x, p.y]));
+
+        // calculate all vertices
+        for (i = 0; i < indices.length; i++ ) {
+            if (typeof vertices[i] === "undefined") {
+                // increase cache buffer if necessary
+                vertices[i] = pool.pull("Vector2d");
+            }
+            vertices[i].set(points[indices[i]].x, points[indices[i]].y);
+        }
+
+        // recycle overhead from a previous triangulation
+        while (vertices.length > indices.length) {
+            pool.push(vertices[vertices.length-1]);
+            vertices.length -= 1;
+        }
+
+        return vertices;
+    }
+
+    /**
+     * moves the starting point of the current path to the (x, y) coordinates.
+     * @name moveTo
+     * @memberof Path2D
+     * @function
+     * @param {number} x the x-axis (horizontal) coordinate of the point.
+     * @param {number} y the y-axis (vertical) coordinate of the point.
+     */
+    moveTo(x, y) {
+      this.points.push(pool.pull("Vector2d", x, y));
+    }
+
+    /**
+     * connects the last point in the current patch to the (x, y) coordinates with a straight line.
+     * @name lineTo
+     * @memberof Path2D
+     * @function
+     * @param {number} x the x-axis coordinate of the line's end point.
+     * @param {number} y the y-axis coordinate of the line's end point.
+     */
+    lineTo(x, y) {
+        this.points.push(pool.pull("Vector2d", x, y));
+    }
+
+    /**
+     * adds an arc to the current path which is centered at (x, y) position with the given radius,
+     * starting at startAngle and ending at endAngle going in the given direction by counterclockwise (defaulting to clockwise).
+     * @name arc
+     * @memberof Path2D
+     * @function
+     * @param {number} x the horizontal coordinate of the arc's center.
+     * @param {number} y the vertical coordinate of the arc's center.
+     * @param {number} radius the arc's radius. Must be positive.
+     * @param {number} startAngle the angle at which the arc starts in radians, measured from the positive x-axis.
+     * @param {number} endAngle the angle at which the arc ends in radians, measured from the positive x-axis.
+     * @param {boolean} [anticlockwise=false] an optional boolean value. If true, draws the arc counter-clockwise between the start and end angles.
+     */
+    arc(x, y, radius, startAngle, endAngle, anticlockwise = false) {
+        var points = this.points;
+        // based on from https://github.com/karellodewijk/canvas-webgl/blob/master/canvas-webgl.js
+        //bring angles all in [0, 2*PI] range
+        if (startAngle === endAngle) return;
+        var fullCircle = anticlockwise ? Math.abs(startAngle-endAngle) >= (TAU) : Math.abs(endAngle-startAngle) >= (TAU);
+
+        startAngle = startAngle % (TAU);
+        endAngle = endAngle % (TAU);
+
+        if (startAngle < 0) startAngle += TAU;
+        if (endAngle < 0) endAngle += TAU;
+
+        if (startAngle >= endAngle) {
+            endAngle+= TAU;
+        }
+
+        var diff = endAngle - startAngle;
+        var direction = 1;
+        if (anticlockwise) {
+            direction = -1;
+            diff = TAU - diff;
+        }
+
+        if (fullCircle) diff = TAU;
+
+        var length = diff * radius;
+        var nr_of_interpolation_points = length / this.arcResolution;
+        var dangle = diff / nr_of_interpolation_points;
+
+        var angle = startAngle;
+        for (var j = 0; j < nr_of_interpolation_points; j++) {
+            points.push(pool.pull("Vector2d", x + radius * Math.cos(angle), y + radius * Math.sin(angle)));
+            angle += direction * dangle;
+        }
+        points.push(pool.pull("Vector2d", x + radius * Math.cos(endAngle), y + radius * Math.sin(endAngle)));
+    }
+
+    /**
+     * adds a circular arc to the path with the given control points and radius, connected to the previous point by a straight line.
+     * @name arcTo
+     * @memberof Path2D
+     * @function
+     * @param {number} x the x-axis coordinate of the first control point.
+     * @param {number} y the y-axis coordinate of the first control point.
+     * @param {number} x the x-axis coordinate of the second control point.
+     * @param {number} y the y-axis coordinate of the second control point.
+     * @param {number} radius the arc's radius. Must be positive.
+     */
+    arcTo(x1, y1, x2, y2, radius) {
+        var points = this.points;
+        // based on from https://github.com/karellodewijk/canvas-webgl/blob/master/canvas-webgl.js
+        var x0 = points[points.length-1].x, y0 = points[points.length-1].y;
+
+        //a = -incoming vector, b = outgoing vector to x1, y1
+        var a = [x0 - x1, y0 - y1];
+        var b = [x2 - x1, y2 - y1];
+
+        //normalize
+        var l_a = Math.sqrt(Math.pow(a[0], 2) + Math.pow(a[1], 2));
+        var l_b = Math.sqrt(Math.pow(b[0], 2) + Math.pow(b[1], 2));
+        a[0] /= l_a; a[1] /= l_a; b[0] /= l_b; b[1] /= l_b;
+        var angle = Math.atan2(a[1], a[0]) - Math.atan2(b[1], b[0]);
+
+        //work out tangent points using tan(θ) = opposite / adjacent; angle/2 because hypotenuse is the bisection of a,b
+        var tan_angle_div2 = Math.tan(angle/2);
+        var adj_l = (radius/tan_angle_div2);
+
+        var tangent_point1 =  [x1 + a[0] * adj_l, y1 + a[1] * adj_l];
+        var tangent_point2 =  [x1 + b[0] * adj_l, y1 + b[1] * adj_l];
+
+        points.push(pool.pull("Vector2d", tangent_point1[0], tangent_point1[1]));
+
+        var bisec = [(a[0] + b[0]) / 2.0, (a[1] + b[1]) / 2.0];
+        var bisec_l = Math.sqrt(Math.pow(bisec[0], 2) + Math.pow(bisec[1], 2));
+        bisec[0] /= bisec_l; bisec[1] /= bisec_l;
+
+        var hyp_l = Math.sqrt(Math.pow(radius, 2) + Math.pow(adj_l, 2));
+        var center = [x1 + hyp_l * bisec[0], y1 + hyp_l * bisec[1]];
+
+        var startAngle = Math.atan2(tangent_point1[1] - center[1], tangent_point1[0] - center[0]);
+        var endAngle = Math.atan2(tangent_point2[1] - center[1], tangent_point2[0] - center[0]);
+
+        this.arc(center[0], center[1], radius, startAngle, endAngle);
+    }
+
+    /**
+     * adds an elliptical arc to the path which is centered at (x, y) position with the radii radiusX and radiusY
+     * starting at startAngle and ending at endAngle going in the given direction by counterclockwise.
+     * @name ellipse
+     * @memberof Path2D
+     * @function
+     * @param {number} x the x-axis (horizontal) coordinate of the ellipse's center.
+     * @param {number} y the  y-axis (vertical) coordinate of the ellipse's center.
+     * @param {number} radiusX the ellipse's major-axis radius. Must be non-negative.
+     * @param {number} radiusY the ellipse's minor-axis radius. Must be non-negative.
+     * @param {number} rotation the rotation of the ellipse, expressed in radians.
+     * @param {number} startAngle the angle at which the ellipse starts, measured clockwise from the positive x-axis and expressed in radians.
+     * @param {number} endAngle the angle at which the ellipse ends, measured clockwise from the positive x-axis and expressed in radians.
+     * @param {boolean} [anticlockwise=false] an optional boolean value which, if true, draws the ellipse counterclockwise (anticlockwise).
+     */
+    ellipse(x, y, radiusX, radiusY, rotation, startAngle, endAngle, anticlockwise = false) {
+        var points = this.points;
+        // based on from https://github.com/karellodewijk/canvas-webgl/blob/master/canvas-webgl.js
+        if (startAngle === endAngle) return;
+        var fullCircle = anticlockwise ? Math.abs(startAngle-endAngle) >= (TAU) : Math.abs(endAngle-startAngle) >= (TAU);
+
+        //bring angles all in [0, 2*PI] range
+        startAngle = startAngle % (TAU);
+        endAngle = endAngle % (TAU);
+        if (startAngle < 0) startAngle += TAU;
+        if (endAngle < 0) endAngle += TAU;
+
+        if (startAngle>=endAngle) {
+            endAngle += TAU;
+        }
+
+        var diff = endAngle - startAngle;
+
+        var direction = 1;
+        if (anticlockwise) {
+            direction = -1;
+            diff = TAU - diff;
+        }
+
+        if (fullCircle) diff = TAU;
+
+        var length = (diff * radiusX + diff * radiusY) / 2;
+        var nr_of_interpolation_points = length / this.arcResolution;
+        var dangle = diff / nr_of_interpolation_points;
+
+        var angle = startAngle;
+        var cos_rotation = Math.cos(rotation);
+        var sin_rotation = Math.sin(rotation);
+        for (var j = 0; j < nr_of_interpolation_points; j++) {
+            var _x1 = radiusX * Math.cos(angle);
+            var _y1 = radiusY * Math.sin(angle);
+            var _x2 = x + _x1 * cos_rotation - _y1 * sin_rotation;
+            var _y2 = y + _x1 * sin_rotation + _y1 * cos_rotation;
+            points.push(pool.pull("Vector2d", _x2, _y2));
+            angle += direction * dangle;
+        }
+        //var x1 = radiusX * Math.cos(endAngle);
+        //var y1 = radiusY * Math.sin(endAngle);
+        //points.push(pool.pull("Vector2d", x + x1 * cos_rotation - y1 * sin_rotation, y + x1 * sin_rotation + y1 * cos_rotation));
+    }
+
+    /**
+     * creates a path for a rectangle at position (x, y) with a size that is determined by width and height.
+     * @name rect
+     * @memberof Path2D
+     * @function
+     * @param {number} x the x-axis coordinate of the rectangle's starting point.
+     * @param {number} y the y-axis coordinate of the rectangle's starting point.
+     * @param {number} width the rectangle's width. Positive values are to the right, and negative to the left.
+     * @param {number} height the rectangle's height. Positive values are down, and negative are up.
+     */
+    rect(x, y, width, height) {
+        this.moveTo(x, y);
+        this.lineTo(x + width, y);
+        this.lineTo(x + width, y + height);
+        this.lineTo(x, y + height);
+        this.lineTo(x, y);
+    }
+
+    /**
+     * adds an rounded rectangle to the current path.
+     * @name roundRect
+     * @memberof Path2D
+     * @function
+     * @param {number} x the x-axis coordinate of the rectangle's starting point.
+     * @param {number} y the y-axis coordinate of the rectangle's starting point.
+     * @param {number} width the rectangle's width. Positive values are to the right, and negative to the left.
+     * @param {number} height the rectangle's height. Positive values are down, and negative are up.
+     * @param {number} radius the arc's radius to draw the borders. Must be positive.
+     */
+     roundRect(x, y, width, height, radius) {
+        this.moveTo(x + radius, y);
+        this.lineTo(x + width - radius, y);
+        this.arcTo(x + width, y, x + width, y + radius, radius);
+        this.lineTo(x + width, y + height - radius);
+        this.arcTo(x + width, y + height, x + width - radius, y + height, radius);
+        this.lineTo(x + radius, y + height);
+        this.arcTo(x, y + height, x, y + height - radius, radius);
+        this.lineTo(x, y + radius);
+        this.arcTo(x, y, x + radius, y, radius);
+    }
+}
+export default Path2D;