From e8f9ca5f35a34b5a549a558fefa7613c651d0480 Mon Sep 17 00:00:00 2001
From: k1w1 <chris@aha.io>
Date: Thu, 14 Jul 2022 20:09:24 -0700
Subject: [PATCH] Fix rendering of arcTo when a scale is applied

---
 .gitignore                |  3 ++-
 context.js                |  7 +++++--
 test/index.js             |  2 ++
 test/rendering.test.js    |  2 ++
 test/tests/arcToScaled.js | 13 +++++++++++++
 5 files changed, 24 insertions(+), 3 deletions(-)
 create mode 100644 test/tests/arcToScaled.js

diff --git a/.gitignore b/.gitignore
index 5a19e8a..f1aec7a 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,3 +1,4 @@
 node_modules
 dist
-coverage
\ No newline at end of file
+coverage
+.vscode
\ No newline at end of file
diff --git a/context.js b/context.js
index 45cfcb4..d3fd037 100644
--- a/context.js
+++ b/context.js
@@ -1015,11 +1015,14 @@ export default (function () {
             largeArcFlag = diff > Math.PI ? 1 : 0;
         }
 
+        var scaleX = Math.hypot(this.__transformMatrix.a, this.__transformMatrix.b);
+        var scaleY = Math.hypot(this.__transformMatrix.c, this.__transformMatrix.d);
+
         this.lineTo(startX, startY);
         this.__addPathCommand(format("A {rx} {ry} {xAxisRotation} {largeArcFlag} {sweepFlag} {endX} {endY}",
             {
-                rx:radius,
-                ry:radius,
+                rx:radius * scaleX,
+                ry:radius * scaleY,
                 xAxisRotation:0,
                 largeArcFlag:largeArcFlag,
                 sweepFlag:sweepFlag,
diff --git a/test/index.js b/test/index.js
index e5cfbdd..a185725 100644
--- a/test/index.js
+++ b/test/index.js
@@ -2,6 +2,7 @@ import {Element} from '../index'
 import arc from './tests/arc'
 import arcTo from './tests/arcTo'
 import arcTo2 from './tests/arcTo2'
+import arcToScaled from './tests/arcToScaled'
 import emptyArc from './tests/emptyArc'
 import fillstyle from './tests/fillstyle'
 import globalAlpha from './tests/globalalpha'
@@ -22,6 +23,7 @@ const tests = [
     arc,
     arcTo,
     arcTo2,
+    arcToScaled,
     emptyArc,
     fillstyle,
     globalAlpha,
diff --git a/test/rendering.test.js b/test/rendering.test.js
index b52cdec..0770510 100644
--- a/test/rendering.test.js
+++ b/test/rendering.test.js
@@ -3,6 +3,7 @@ import { expect } from 'chai'
 import arc from './tests/arc'
 import arcTo from './tests/arcTo'
 import arcTo2 from './tests/arcTo2'
+import arcToScaled from './tests/arcToScaled'
 import emptyArc from './tests/emptyArc'
 import fillstyle from './tests/fillstyle'
 import globalAlpha from './tests/globalalpha'
@@ -23,6 +24,7 @@ const tests = {
     arc,
     arcTo,
     arcTo2,
+    arcToScaled,
     emptyArc,
     fillstyle,
     globalAlpha,
diff --git a/test/tests/arcToScaled.js b/test/tests/arcToScaled.js
new file mode 100644
index 0000000..99b41de
--- /dev/null
+++ b/test/tests/arcToScaled.js
@@ -0,0 +1,13 @@
+export default function arcToScaled(ctx) {
+  ctx.scale(2, 0.5);
+  ctx.beginPath();
+  ctx.moveTo(100, 50);
+  ctx.arcTo(150, 50, 150, 100, 50);
+  ctx.arcTo(150, 150, 100, 150, 50);
+  ctx.arcTo(50, 150, 50, 100, 50);
+  ctx.arcTo(50, 50, 100, 50, 50);
+
+  // Reset the scale before we stroke since SVG stroke is not scaled.
+  ctx.setTransform(1, 0, 0, 1, 0, 0);
+  ctx.stroke();
+};
\ No newline at end of file