Fixed clipping behavior and handling of save/restore around stroke and fill.

package-lock.json

@@ -1,6 +1,6 @@
 {
-  "name": "svgcanvas",
+  "name": "@aha-app/svgcanvas",
-  "version": "2.5.0",
+  "version": "2.5.0-a11",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aha-app/svgcanvas",
-  "version": "2.5.0-a6",
+  "version": "2.5.0-a11",
   "description": "svgcanvas",
   "main": "dist/svgcanvas.js",
   "scripts": {

path2d.js

@@ -1,4 +1,4 @@
-import { format } from './utils';
+import { format } from "./utils";
 
 export default (function () {
   "use strict";
@@ -9,10 +9,10 @@ export default (function () {
     if (!ctx) {
       console.error("Path2D must be passed the context");
     }
-        if (typeof arg === 'string') {
+    if (typeof arg === "string") {
       // Initialize from string path.
       this.__pathString = arg;
-        } else if (typeof arg === 'object') {
+    } else if (typeof arg === "object") {
       // Initialize by copying another path.
       this.__pathString = arg.__pathString;
     } else {
@@ -22,17 +22,18 @@ export default (function () {
 
     this.ctx = ctx;
     this.__currentPosition = { x: undefined, y: undefined };
-    }
+  };
 
   Path2D.prototype.__matrixTransform = function (x, y) {
     return this.ctx.__matrixTransform(x, y);
-    }
+  };
 
   Path2D.prototype.addPath = function (path, transform) {
-        if (transform) console.error("transform argument to addPath is not supported");
+    if (transform)
+      console.error("transform argument to addPath is not supported");
 
     this.__pathString = this.__pathString + " " + path;
-    }
+  };
 
   /**
    * Closes the current path
@@ -48,28 +49,33 @@ export default (function () {
   Path2D.prototype.moveTo = function (x, y) {
     // creates a new subpath with the given point
     this.__currentPosition = { x: x, y: y };
-        this.addPath(format("M {x} {y}", {
+    this.addPath(
+      format("M {x} {y}", {
         x: this.__matrixTransform(x, y).x,
-            y: this.__matrixTransform(x, y).y
+        y: this.__matrixTransform(x, y).y,
-        }));
+      })
+    );
   };
 
-
   /**
    * Adds a line to command
    */
   Path2D.prototype.lineTo = function (x, y) {
     this.__currentPosition = { x: x, y: y };
-        if (this.__pathString.indexOf('M') > -1) {
+    if (this.__pathString.indexOf("M") > -1) {
-            this.addPath(format("L {x} {y}", {
+      this.addPath(
+        format("L {x} {y}", {
           x: this.__matrixTransform(x, y).x,
-                y: this.__matrixTransform(x, y).y
+          y: this.__matrixTransform(x, y).y,
-            }));
+        })
+      );
     } else {
-            this.addPath(format("M {x} {y}", {
+      this.addPath(
+        format("M {x} {y}", {
           x: this.__matrixTransform(x, y).x,
-                y: this.__matrixTransform(x, y).y
+          y: this.__matrixTransform(x, y).y,
-            }));
+        })
+      );
     }
   };
 
@@ -77,15 +83,11 @@ export default (function () {
    *  Adds a rectangle to the path.
    */
   Path2D.prototype.rect = function (x, y, width, height) {
-        if (this.__currentElement.nodeName !== "path") {
-            this.beginPath();
-        }
     this.moveTo(x, y);
     this.lineTo(x + width, y);
     this.lineTo(x + width, y + height);
     this.lineTo(x, y + height);
     this.lineTo(x, y);
-        this.closePath();
   };
 
   /**
@@ -93,15 +95,16 @@ export default (function () {
    */
   Path2D.prototype.bezierCurveTo = function (cp1x, cp1y, cp2x, cp2y, x, y) {
     this.__currentPosition = { x: x, y: y };
-        this.addPath(format("C {cp1x} {cp1y} {cp2x} {cp2y} {x} {y}",
+    this.addPath(
-            {
+      format("C {cp1x} {cp1y} {cp2x} {cp2y} {x} {y}", {
         cp1x: this.__matrixTransform(cp1x, cp1y).x,
         cp1y: this.__matrixTransform(cp1x, cp1y).y,
         cp2x: this.__matrixTransform(cp2x, cp2y).x,
         cp2y: this.__matrixTransform(cp2x, cp2y).y,
         x: this.__matrixTransform(x, y).x,
-                y: this.__matrixTransform(x, y).y
+        y: this.__matrixTransform(x, y).y,
-            }));
+      })
+    );
   };
 
   /**
@@ -109,20 +112,27 @@ export default (function () {
    */
   Path2D.prototype.quadraticCurveTo = function (cpx, cpy, x, y) {
     this.__currentPosition = { x: x, y: y };
-        this.addPath(format("Q {cpx} {cpy} {x} {y}", {
+    this.addPath(
+      format("Q {cpx} {cpy} {x} {y}", {
         cpx: this.__matrixTransform(cpx, cpy).x,
         cpy: this.__matrixTransform(cpx, cpy).y,
         x: this.__matrixTransform(x, y).x,
-            y: this.__matrixTransform(x, y).y
+        y: this.__matrixTransform(x, y).y,
-        }));
+      })
+    );
   };
 
-
-
   /**
    *  Arc command!
    */
-     Path2D.prototype.arc = function (x, y, radius, startAngle, endAngle, counterClockwise) {
+  Path2D.prototype.arc = function (
+    x,
+    y,
+    radius,
+    startAngle,
+    endAngle,
+    counterClockwise
+  ) {
     // in canvas no circle is drawn if no angle is provided.
     if (startAngle === endAngle) {
       return;
@@ -131,7 +141,9 @@ export default (function () {
     endAngle = endAngle % (2 * Math.PI);
     if (startAngle === endAngle) {
       //circle time! subtract some of the angle so svg is happy (svg elliptical arc can't draw a full circle)
-          endAngle = ((endAngle + (2*Math.PI)) - 0.001 * (counterClockwise ? -1 : 1)) % (2*Math.PI);
+      endAngle =
+        (endAngle + 2 * Math.PI - 0.001 * (counterClockwise ? -1 : 1)) %
+        (2 * Math.PI);
     }
     var endX = x + radius * Math.cos(endAngle),
       endY = y + radius * Math.sin(endAngle),
@@ -152,11 +164,19 @@ export default (function () {
       largeArcFlag = diff > Math.PI ? 1 : 0;
     }
 
-      var scaleX = Math.hypot(this.ctx.__transformMatrix.a, this.ctx.__transformMatrix.b);
+    var scaleX = Math.hypot(
-      var scaleY = Math.hypot(this.ctx.__transformMatrix.c, this.ctx.__transformMatrix.d);
+      this.ctx.__transformMatrix.a,
+      this.ctx.__transformMatrix.b
+    );
+    var scaleY = Math.hypot(
+      this.ctx.__transformMatrix.c,
+      this.ctx.__transformMatrix.d
+    );
 
     this.lineTo(startX, startY);
-      this.addPath(format("A {rx} {ry} {xAxisRotation} {largeArcFlag} {sweepFlag} {endX} {endY}",
+    this.addPath(
+      format(
+        "A {rx} {ry} {xAxisRotation} {largeArcFlag} {sweepFlag} {endX} {endY}",
         {
           rx: radius * scaleX,
           ry: radius * scaleY,
@@ -164,13 +184,14 @@ export default (function () {
           largeArcFlag: largeArcFlag,
           sweepFlag: sweepFlag,
           endX: this.__matrixTransform(endX, endY).x,
-              endY: this.__matrixTransform(endX, endY).y
+          endY: this.__matrixTransform(endX, endY).y,
-          }));
+        }
+      )
+    );
 
     this.__currentPosition = { x: endX, y: endY };
   };
 
-
   /**
    * Return a new normalized vector of given vector
    */
@@ -196,7 +217,9 @@ export default (function () {
 
     // Negative values for radius must cause the implementation to throw an IndexSizeError exception.
     if (radius < 0) {
-          throw new Error("IndexSizeError: The radius provided (" + radius + ") is negative.");
+      throw new Error(
+        "IndexSizeError: The radius provided (" + radius + ") is negative."
+      );
     }
 
     // If the point (x0, y0) is equal to the point (x1, y1),
@@ -204,9 +227,7 @@ export default (function () {
     // or if the radius radius is zero,
     // then the method must add the point (x1, y1) to the subpath,
     // and connect that point to the previous point (x0, y0) by a straight line.
-      if (((x0 === x1) && (y0 === y1))
+    if ((x0 === x1 && y0 === y1) || (x1 === x2 && y1 === y2) || radius === 0) {
-          || ((x1 === x2) && (y1 === y2))
-          || (radius === 0)) {
       this.lineTo(x1, y1);
       return;
     }
@@ -216,7 +237,10 @@ export default (function () {
     // and connect that point to the previous point (x0, y0) by a straight line.
     var unit_vec_p1_p0 = normalize([x0 - x1, y0 - y1]);
     var unit_vec_p1_p2 = normalize([x2 - x1, y2 - y1]);
-      if (unit_vec_p1_p0[0] * unit_vec_p1_p2[1] === unit_vec_p1_p0[1] * unit_vec_p1_p2[0]) {
+    if (
+      unit_vec_p1_p0[0] * unit_vec_p1_p2[1] ===
+      unit_vec_p1_p0[1] * unit_vec_p1_p2[0]
+    ) {
       this.lineTo(x1, y1);
       return;
     }
@@ -227,13 +251,15 @@ export default (function () {
     // The points at which this circle touches these two lines are called the start and end tangent points respectively.
 
     // note that both vectors are unit vectors, so the length is 1
-      var cos = (unit_vec_p1_p0[0] * unit_vec_p1_p2[0] + unit_vec_p1_p0[1] * unit_vec_p1_p2[1]);
+    var cos =
+      unit_vec_p1_p0[0] * unit_vec_p1_p2[0] +
+      unit_vec_p1_p0[1] * unit_vec_p1_p2[1];
     var theta = Math.acos(Math.abs(cos));
 
     // Calculate origin
     var unit_vec_p1_origin = normalize([
       unit_vec_p1_p0[0] + unit_vec_p1_p2[0],
-          unit_vec_p1_p0[1] + unit_vec_p1_p2[1]
+      unit_vec_p1_p0[1] + unit_vec_p1_p2[1],
     ]);
     var len_p1_origin = radius / Math.sin(theta / 2);
     var x = x1 + len_p1_origin * unit_vec_p1_origin[0];
@@ -241,20 +267,15 @@ export default (function () {
 
     // Calculate start angle and end angle
     // rotate 90deg clockwise (note that y axis points to its down)
-      var unit_vec_origin_start_tangent = [
+    var unit_vec_origin_start_tangent = [-unit_vec_p1_p0[1], unit_vec_p1_p0[0]];
-          -unit_vec_p1_p0[1],
-          unit_vec_p1_p0[0]
-      ];
     // rotate 90deg counter clockwise (note that y axis points to its down)
-      var unit_vec_origin_end_tangent = [
+    var unit_vec_origin_end_tangent = [unit_vec_p1_p2[1], -unit_vec_p1_p2[0]];
-          unit_vec_p1_p2[1],
-          -unit_vec_p1_p2[0]
-      ];
     var getAngle = function (vector) {
       // get angle (clockwise) between vector and (1, 0)
       var x = vector[0];
       var y = vector[1];
-          if (y >= 0) { // note that y axis points to its down
+      if (y >= 0) {
+        // note that y axis points to its down
         return Math.acos(x);
       } else {
         return -Math.acos(x);
@@ -264,19 +285,29 @@ export default (function () {
     var endAngle = getAngle(unit_vec_origin_end_tangent);
 
     // Connect the point (x0, y0) to the start tangent point by a straight line
-      this.lineTo(x + unit_vec_origin_start_tangent[0] * radius,
+    this.lineTo(
-                  y + unit_vec_origin_start_tangent[1] * radius);
+      x + unit_vec_origin_start_tangent[0] * radius,
+      y + unit_vec_origin_start_tangent[1] * radius
+    );
 
     // Connect the start tangent point to the end tangent point by arc
     // and adding the end tangent point to the subpath.
     this.arc(x, y, radius, startAngle, endAngle);
   };
 
-
   /**
    *  Ellipse command!
    */
-   Path2D.prototype.ellipse = function(x, y, radiusX, radiusY, rotation, startAngle, endAngle, counterClockwise) {
+  Path2D.prototype.ellipse = function (
+    x,
+    y,
+    radiusX,
+    radiusY,
+    rotation,
+    startAngle,
+    endAngle,
+    counterClockwise
+  ) {
     if (startAngle === endAngle) {
       return;
     }
@@ -287,21 +318,31 @@ export default (function () {
     var scale = this.ctx.__getTransformScale();
     radiusX = radiusX * scale.x;
     radiusY = radiusY * scale.y;
-      rotation = rotation + this.ctx.__getTransformRotation()
+    rotation = rotation + this.ctx.__getTransformRotation();
 
     startAngle = startAngle % (2 * Math.PI);
     endAngle = endAngle % (2 * Math.PI);
     if (startAngle === endAngle) {
-          endAngle = ((endAngle + (2*Math.PI)) - 0.001 * (counterClockwise ? -1 : 1)) % (2*Math.PI);
+      endAngle =
+        (endAngle + 2 * Math.PI - 0.001 * (counterClockwise ? -1 : 1)) %
+        (2 * Math.PI);
     }
-      var endX = x + Math.cos(-rotation) * radiusX * Math.cos(endAngle)
+    var endX =
-                   + Math.sin(-rotation) * radiusY * Math.sin(endAngle),
+        x +
-          endY = y - Math.sin(-rotation) * radiusX * Math.cos(endAngle)
+        Math.cos(-rotation) * radiusX * Math.cos(endAngle) +
-                   + Math.cos(-rotation) * radiusY * Math.sin(endAngle),
+        Math.sin(-rotation) * radiusY * Math.sin(endAngle),
-          startX = x + Math.cos(-rotation) * radiusX * Math.cos(startAngle)
+      endY =
-                     + Math.sin(-rotation) * radiusY * Math.sin(startAngle),
+        y -
-          startY = y - Math.sin(-rotation) * radiusX * Math.cos(startAngle)
+        Math.sin(-rotation) * radiusX * Math.cos(endAngle) +
-                     + Math.cos(-rotation) * radiusY * Math.sin(startAngle),
+        Math.cos(-rotation) * radiusY * Math.sin(endAngle),
+      startX =
+        x +
+        Math.cos(-rotation) * radiusX * Math.cos(startAngle) +
+        Math.sin(-rotation) * radiusY * Math.sin(startAngle),
+      startY =
+        y -
+        Math.sin(-rotation) * radiusX * Math.cos(startAngle) +
+        Math.cos(-rotation) * radiusY * Math.sin(startAngle),
       sweepFlag = counterClockwise ? 0 : 1,
       largeArcFlag = 0,
       diff = endAngle - startAngle;
@@ -323,7 +364,9 @@ export default (function () {
     this.lineTo(startX, startY);
     this.ctx.__transformMatrix = currentTransform;
 
-      this.addPath(format("A {rx} {ry} {xAxisRotation} {largeArcFlag} {sweepFlag} {endX} {endY}",
+    this.addPath(
+      format(
+        "A {rx} {ry} {xAxisRotation} {largeArcFlag} {sweepFlag} {endX} {endY}",
         {
           rx: radiusX,
           ry: radiusY,
@@ -331,11 +374,13 @@ export default (function () {
           largeArcFlag: largeArcFlag,
           sweepFlag: sweepFlag,
           endX: endX,
-              endY:endY
+          endY: endY,
-          }));
+        }
+      )
+    );
 
     this.__currentPosition = { x: endX, y: endY };
   };
 
   return Path2D;
-}());
+})();

test/tests/clip.js

@@ -19,7 +19,7 @@ export default function clip(ctx) {
   ctx.beginPath();
   ctx.rect(20, 30, 30, 10);
   ctx.rect(0, 0, 300, 300);
-  // ctx.stroke(); // Uncomment for debugging clip.
+  ctx.stroke();
   ctx.clip("evenodd");
 
   // Draw line.