Add support for ellipses

context.js

@@ -1037,6 +1037,14 @@ export default (function () {
         if (startAngle === endAngle) {
             return;
         }
+
+        x = this.__matrixTransform(x, y).x;
+        y = this.__matrixTransform(x, y).y;
+        var scaleX = Math.hypot(this.__transformMatrix.a, this.__transformMatrix.b);
+        var scaleY = Math.hypot(this.__transformMatrix.c, this.__transformMatrix.d);
+        radiusX = radiusX * scaleX;
+        radiusY = radiusY * scaleY;
+
         startAngle = startAngle % (2*Math.PI);
         endAngle = endAngle % (2*Math.PI);
         if(startAngle === endAngle) {
@@ -1064,9 +1072,17 @@ export default (function () {
             largeArcFlag = diff > Math.PI ? 1 : 0;
         }
         
-        this.lineTo(startX, startY);
+        this.lineTo(startX / scaleX, startY / scaleY);
         this.__addPathCommand(format("A {rx} {ry} {xAxisRotation} {largeArcFlag} {sweepFlag} {endX} {endY}",
-            {rx:radiusX, ry:radiusY, xAxisRotation:rotation*(180/Math.PI), largeArcFlag:largeArcFlag, sweepFlag:sweepFlag, endX:endX, endY:endY}));
+            {
+                rx:radiusX, 
+                ry:radiusY, 
+                xAxisRotation:rotation*(180/Math.PI), 
+                largeArcFlag:largeArcFlag, 
+                sweepFlag:sweepFlag, 
+                endX:endX,
+                endY:endY
+            }));
 
         this.__currentPosition = {x: endX, y: endY};
     };

test/tests/ellipse.js

@@ -1,10 +1,7 @@
 export default function ellipse(ctx) {
-
-  //ctx.scale(2,0.5)
-
     // Draw shapes
     for (let i = 0; i < 4; i++) {
-      for (let j = 0; j < 4; j++) {
+        for (let j = 0; j < 3; j++) {
             ctx.beginPath();
             var x = 25 + j * 50;               // x coordinate
             var y = 25 + i * 50;               // y coordinate