[web] Fix arc rendering when it starts a new sub path. (#18535)

* Fix Path.addArc failure due to incorrect start position

Author: ferhatb

lib/web_ui/dev/goldens_lock.yaml

@@ -1,2 +1,2 @@
 repository: https://github.com/flutter/goldens.git
-revision: f80e019e225915e220f0f37884c8cd1b942d9bc2
+revision: 993752770817654e362b85f4781d300a9b215d4c

lib/web_ui/lib/src/engine/canvas_pool.dart

@@ -520,6 +520,11 @@ class _CanvasPool extends _SaveStackTracking {
             break;
           case PathCommandTypes.ellipse:
             final Ellipse ellipse = command;
+            if (c == 0) {
+              // Ellipses that start a new path need to set start point,
+              // otherwise it incorrectly uses last point.
+              ctx.moveTo(subpath.startX, subpath.startY);
+            }
             DomRenderer.ellipse(ctx,
                 ellipse.x,
                 ellipse.y,

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

@@ -4,7 +4,7 @@
 
 // @dart = 2.6
 import 'dart:html' as html;
-
+import 'dart:math' as math;
 import 'package:ui/src/engine.dart';
 import 'package:ui/ui.dart';
 import 'package:test/test.dart';
@@ -47,6 +47,20 @@ void main() async {
     await matchGoldenFile('canvas_arc_to_point.png', region: region);
   });
 
+  test('Path.addArc that starts new path has correct start point', () async {
+    final Rect rect = Rect.fromLTWH(20, 20, 200, 200);
+    final Path p = Path()
+      ..fillType = PathFillType.evenOdd
+      ..addRect(rect)
+      ..addArc(Rect.fromCircle(center: rect.center,
+          radius: rect.size.shortestSide / 2), 0.25 * math.pi, 1.5 * math.pi);
+    canvas.drawPath(p, SurfacePaintData()
+      ..color = Color(0xFFFF9800) // orange
+      ..style = PaintingStyle.fill);
+
+    html.document.body.append(canvas.rootElement);
+    await matchGoldenFile('canvas_addarc.png', region: region);
+  });
 }
 
 void paintArc(BitmapCanvas canvas, Offset offset,