From 6e7449a6395cd06881138afe9f3afdfc3c96dc84 Mon Sep 17 00:00:00 2001
From: k1w1 <chris@aha.io>
Date: Sun, 17 Jul 2022 09:55:39 -0700
Subject: [PATCH] Fixed problem when rotation is applied

---
 context.js             | 32 ++++++++++++++++++++++++++------
 test/tests/ellipse2.js |  7 ++++---
 2 files changed, 30 insertions(+), 9 deletions(-)

diff --git a/context.js b/context.js
index a82dc5a..50e067b 100644
--- a/context.js
+++ b/context.js
@@ -1038,12 +1038,13 @@ export default (function () {
             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;
+        var transformedCenter = this.__matrixTransform(x, y);
+        x = transformedCenter.x;
+        y = transformedCenter.y;
+        var scale = this.__getTransformScale();
+        radiusX = radiusX * scale.x;
+        radiusY = radiusY * scale.y;
+        rotation = rotation + this.__getTransformRotation()
 
         startAngle = startAngle % (2*Math.PI);
         endAngle = endAngle % (2*Math.PI);
@@ -1338,6 +1339,25 @@ export default (function () {
         return new DOMPoint(x, y).matrixTransform(this.__transformMatrix)
     }
 
+    /**
+     * 
+     * @returns The scale component of the transform matrix as {x,y}.
+     */
+    Context.prototype.__getTransformScale = function() {
+        return {
+            x: Math.hypot(this.__transformMatrix.a, this.__transformMatrix.b),
+            y: Math.hypot(this.__transformMatrix.c, this.__transformMatrix.d)
+        };
+    }
+
+    /**
+     * 
+     * @returns The rotation component of the transform matrix in radians.
+     */
+    Context.prototype.__getTransformRotation = function() {
+        return Math.atan2(this.__transformMatrix.b, this.__transformMatrix.a);
+    }
+
     /**
      *
      * @param {*} sx The x-axis coordinate of the top-left corner of the rectangle from which the ImageData will be extracted.
diff --git a/test/tests/ellipse2.js b/test/tests/ellipse2.js
index e8472a6..73feaaa 100644
--- a/test/tests/ellipse2.js
+++ b/test/tests/ellipse2.js
@@ -2,10 +2,11 @@
 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;
+    var scaleX = 1.5, scaleY = 1.2;
 
+    ctx.rotate(Math.PI / 10);
     ctx.scale(scaleX, scaleY);
-    ctx.translate(100, 75);
+    ctx.translate(200, 25);
 
     ctx.beginPath();
     ctx.moveTo(-w / 2, -h / 2 + ry);
@@ -27,6 +28,6 @@ export default function ellipse2(ctx) {
     // 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.resetTransform();
     ctx.stroke();
 };
\ No newline at end of file