[web] Fixes arc scaling when counter clockwise (#19927)

* [web] Fix arc scaling when counter clockwise
* update golden write
* Removed unused var

lib/web_ui/dev/goldens_lock.yaml

 repository: https://github.com/flutter/goldens.git
-revision: b052f28ce37ae66f44ac9824835e96a3509cef8e
+revision: 043f1bc2752e01400cea46318c78a6f1f015dadc

lib/web_ui/lib/src/engine/surface/path/path.dart

@@ -589,25 +589,26 @@ class SurfacePath implements ui.Path {
         ++conicCount;
       }
     }
+
     // Any points we generate based on unit vectors cos/sinStart , cos/sinStop
     // we rotate to start vector, scale by rect.width/2 rect.height/2 and
     // then translate to center point.
     final double scaleX = rect.width / 2;
-    final double scaleY =
-        dir == SPathDirection.kCCW ? -rect.height / 2 : rect.height / 2;
+    final bool ccw = dir == SPathDirection.kCCW;
+    final double scaleY = rect.height / 2;
     final double centerX = rect.center.dx;
     final double centerY = rect.center.dy;
     for (Conic conic in conics) {
       double x = conic.p0x;
-      double y = conic.p0y;
+      double y = ccw ? -conic.p0y : conic.p0y;
       conic.p0x = (cosStart * x - sinStart * y) * scaleX + centerX;
       conic.p0y = (cosStart * y + sinStart * x) * scaleY + centerY;
       x = conic.p1x;
-      y = conic.p1y;
+      y = ccw ? -conic.p1y : conic.p1y;
       conic.p1x = (cosStart * x - sinStart * y) * scaleX + centerX;
       conic.p1y = (cosStart * y + sinStart * x) * scaleY + centerY;
       x = conic.p2x;
-      y = conic.p2y;
+      y = ccw ? -conic.p2y : conic.p2y;
       conic.p2x = (cosStart * x - sinStart * y) * scaleX + centerX;
       conic.p2y = (cosStart * y + sinStart * x) * scaleY + centerY;
     }

lib/web_ui/test/golden_tests/engine/canvas_arc_golden_test.dart

@@ -61,6 +61,24 @@ void main() async {
     html.document.body.append(canvas.rootElement);
     await matchGoldenFile('canvas_addarc.png', region: region);
   });
+
+  test('Should render counter clockwise arcs', () async {
+    final Path path = Path();
+    path.moveTo(149.999999999999997, 50);
+    path.lineTo(149.999999999999997, 20);
+    path.arcTo(Rect.fromLTRB(20, 20, 280, 280), 4.71238898038469,
+        5.759586531581287 - 4.71238898038469, true);
+    path.lineTo(236.60254037844385, 99.99999999999999);
+    path.arcTo(Rect.fromLTRB(50, 50, 250, 250), 5.759586531581287,
+        4.71238898038469 - 5.759586531581287, true);
+    path.lineTo(149.999999999999997, 20);
+    canvas.drawPath(path, SurfacePaintData()
+      ..color = Color(0xFFFF9800) // orange
+      ..style = PaintingStyle.fill);
+
+    html.document.body.append(canvas.rootElement);
+    await matchGoldenFile('canvas_addarc_ccw.png', region: region);
+  });
 }
 
 void paintArc(BitmapCanvas canvas, Offset offset,