Repository: flutter
Issue: Issue with canvas.drawArc rendering in HTML web renderer
Labels: framework,platform-web,e: web_html,has reproducible steps,P2,found in release: 3.3,found in release: 3.6,team-web,triaged-web

Drawing a arc using `canvas.drawArc` gives improper rendering in `HTML` web renderer.

## Steps to Reproduce

Run the following sample in both HTML and CanvasKit web renderer.

```
import 'package:flutter/material.dart';
import 'dart:math' as math;

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(home: GradientArcPainterDemo());
  }
}

class GradientArcPainterDemo extends StatefulWidget {
  const GradientArcPainterDemo({super.key});

  @override
  GradientArcPainterDemoState createState() => GradientArcPainterDemoState();
}

double _value = math.pi;

class GradientArcPainterDemoState extends State<GradientArcPainterDemo> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        children: [
          ArcGradientWidget(value: _value),
          Slider(
            min: 0,
            max: math.pi * 2,
            value: _value,
            onChanged: (value) {
              setState(() {
                _value = value;
              });
            },
          ),
        ],
      ),
    );
  }
}

class ArcGradientWidget extends LeafRenderObjectWidget {
  const ArcGradientWidget({super.key, required this.value});

  final double value;

  @override
  ArcGradientRenderBox createRenderObject(BuildContext context) {
    return ArcGradientRenderBox(value: value);
  }

  @override
  void updateRenderObject(
      BuildContext context, ArcGradientRenderBox renderObject) {
    super.updateRenderObject(context, renderObject);
    renderObject.value = value;
  }
}

class ArcGradientRenderBox extends RenderBox {
  ArcGradientRenderBox({required double value}) : _value = value;

  double get value => _value;
  double _value = 0;
  set value(double newValue) {
    if (newValue != _value) {
      _value = newValue;
      markNeedsPaint();
    }
  }

  @override
  void performLayout() {
    size = const Size(250, 250);
  }

  @override
  void paint(PaintingContext context, Offset offset) {
    super.paint(context, offset);
    context.canvas
        .drawRect(paintBounds, Paint()..color = Colors.teal.withOpacity(0.1));
    const gradient = SweepGradient(
      colors: [Colors.blue, Colors.red],
      stops: [0.5, 1],
    );

    Paint paint = Paint()
      ..isAntiAlias = true
      ..style = PaintingStyle.stroke
      ..shader = gradient.createShader(paintBounds)
      ..strokeWidth = 10.0;

    double startAngle = 0;
    double sweepAngle = _value;
    context.canvas.drawArc(
      Rect.fromCircle(
        center: Offset(size.height / 2, size.width / 2),
        radius: 100,
      ),
      startAngle,
      sweepAngle,
      false,
      paint,
    );
  }
}
```

### CanvasKit output

https://user-images.githubusercontent.com/92971875/202273849-cf6b7ee5-628d-40d9-939d-e42d080badcd.mov


### HTML output

https://user-images.githubusercontent.com/92971875/202273783-009082d2-de3b-4f46-a5d0-bfe4bfc7e5ad.mov

**Expected results:**
Expecting HTML rendering likewise CanvasKit.

**Actual results:**
HTML arc rendering is completely improper and the demo video is attached above.

<details>
  <summary>Logs</summary>

```
[✓] Flutter (Channel stable, 3.3.8, on macOS 13.0 22A380 darwin-x64, locale en-IN)
    • Flutter version 3.3.8 on channel stable at 
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 52b3dc25f6 (8 days ago), 2022-11-09 12:09:26 +0800
    • Engine revision 857bd6b74c
    • Dart version 2.18.4
    • DevTools version 2.15.0

[✓] Android toolchain - develop for Android devices (Android SDK version 32.0.0)
    • Android SDK at 
    • Platform android-33, build-tools 32.0.0
    • Java binary at: /Library/Java/JavaVirtualMachines/temurin-8.jdk/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (Temurin)(build 1.8.0_302-b08)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 14.1)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Build 14B47b
    • CocoaPods version 1.11.2

[✓] Chrome - develop for the web
    • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome

[!] Android Studio (not installed)
    • Android Studio not found; download from https://developer.android.com/studio/index.html
      (or visit https://flutter.dev/docs/get-started/install/macos#android-setup for detailed instructions).

[✓] VS Code (version 1.73.1)
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension version 3.52.0

[✓] Connected device (2 available)
    • macOS (desktop) • macos  • darwin-x64     • macOS 13.0 22A380 darwin-x64
    • Chrome (web)    • chrome • web-javascript • Google Chrome 107.0.5304.110

[✓] HTTP Host Availability
    • All required HTTP hosts are available
```