Fix a problem with ellipse drawing if at translation is applied.

context.js

@@ -1071,8 +1071,14 @@ export default (function () {
         } else {
             largeArcFlag = diff > Math.PI ? 1 : 0;
         }
-        
+
-        this.lineTo(startX / scaleX, startY / scaleY);
+        // Transform is already applied, so temporarily remove since lineTo
+        // will apply it again.
+        var currentTransform = this.__transformMatrix;
+        this.resetTransform();
+        this.lineTo(startX, startY);
+        this.__transformMatrix = currentTransform;
+
         this.__addPathCommand(format("A {rx} {ry} {xAxisRotation} {largeArcFlag} {sweepFlag} {endX} {endY}",
             {
                 rx:radiusX, 

test/index.js

@@ -4,6 +4,7 @@ import arcTo from './tests/arcTo'
 import arcTo2 from './tests/arcTo2'
 import emptyArc from './tests/emptyArc'
 import ellipse from './tests/ellipse'
+import ellipse2 from './tests/ellipse2'
 import fillstyle from './tests/fillstyle'
 import globalAlpha from './tests/globalalpha'
 import gradient from './tests/gradient'
@@ -25,6 +26,7 @@ const tests = [
     arcTo2,
     emptyArc,
     ellipse,
+    ellipse2,
     fillstyle,
     globalAlpha,
     gradient,

test/rendering.test.js

@@ -5,6 +5,7 @@ import arcTo from './tests/arcTo'
 import arcTo2 from './tests/arcTo2'
 import emptyArc from './tests/emptyArc'
 import ellipse from './tests/ellipse'
+import ellipse2 from './tests/ellipse2'
 import fillstyle from './tests/fillstyle'
 import globalAlpha from './tests/globalalpha'
 import gradient from './tests/gradient'
@@ -26,6 +27,7 @@ const tests = {
     arcTo2,
     emptyArc,
     ellipse,
+    ellipse2,
     fillstyle,
     globalAlpha,
     gradient,

test/tests/ellipse2.js

@@ -0,0 +1,32 @@
+
+export default function ellipse2(ctx) {
+    // Draw a cylinder using ellipses and lines.
+    var w = 100, h = 100, rx = 50, ry = 10;
+    var scaleX = 1.5, scaleY = 2.5;
+
+    ctx.scale(scaleX, scaleY);
+    ctx.translate(100, 75);
+
+    ctx.beginPath();
+    ctx.moveTo(-w / 2, -h / 2 + ry);
+    // upper arc top
+    ctx.ellipse(0, -h / 2 + ry, rx, ry, Math.PI, 0, Math.PI, 0);
+    ctx.moveTo(-w / 2, -h / 2 + ry);
+    // upper arc bottom
+    ctx.ellipse(0, -h / 2 + ry, rx, ry, Math.PI, 0, Math.PI, 1);
+    ctx.moveTo(-w / 2, -h / 2 + ry);
+    // left line
+    ctx.lineTo(-w / 2, + h / 2 - ry);
+    // lower arc
+    ctx.ellipse(0, h / 2 - ry, rx, ry, Math.PI, 0, Math.PI, 1);
+    // right line
+    ctx.lineTo(w / 2, -h / 2 + ry);
+    ctx.moveTo(-w / 2, -h / 2 + ry);
+    ctx.closePath();
+
+    // Remove scale before stroking because the SVG conversion is not correctly
+    // scaling the stroke as well. Without this the pixel differences are too
+    // high.
+    ctx.scale(1 / scaleX, 1 / scaleY);
+    ctx.stroke();
+};