Repository: flutter
Issue: [web] Shader doesn't work using HTML renderer
Labels: engine,a: fidelity,platform-web,e: web_html,has reproducible steps,P2,found in release: 2.2,found in release: 2.3,team-web,triaged-web

I have tried using a shader with gradient and image shader in my application while rendering using canvas kit web rendered shader gets applied as expected, but while using html rendered in facing incorrect fill of gradient and ImageShader not implemented for web platform.

I have attached the code snippets for gradient and image shader below:

<details>
<summary>Code snippet gradient</summary>

```dart
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'dart:ui' as ui;

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(home: MyHomePage());
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Shader'),
      ),
      body: Center(
        child: Container(
          width: 400,
          height: 400,
          child: CustomPaint(
            painter: OpenPainter(),
          ),
        ),
      ),
    );
  }
}

class OpenPainter extends CustomPainter {
  List<Color> colors = const <Color>[
    Colors.red,
    Colors.blue,
    Colors.green,
    Colors.yellow,
  ];
  List<double> stops = <double>[0.25, 0.5, 0.75, 1];
  @override
  void paint(Canvas canvas, Size size) {
    var paint1 = Paint()
      ..color = Color(0xff63aa65)
      ..shader = ui.Gradient.sweep(
        Offset(200, 200),
        colors,
        stops,
      )
      ..style = PaintingStyle.fill;
    //a circle
    canvas.drawCircle(Offset(200, 200), 100, paint1);
  }

  @override
  bool shouldRepaint(CustomPainter oldDelegate) => true;
}

```

</details>

 <details>
<summary>Code snippet Image Shader</summary>

```dart
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'dart:ui' as ui;
import 'dart:async';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(home: MyHomePage());
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  ui.Image? image4;
  // ignore: avoid_void_async
  void getImage() async {
    final Completer<ImageInfo> completer3 = Completer<ImageInfo>();
    const ImageProvider imageProvider3 = AssetImage('images/apple.png');
    imageProvider3
        .resolve(const ImageConfiguration())
        .addListener(ImageStreamListener((ImageInfo info, bool _) async {
      completer3.complete(info);
      final ImageInfo imageInfo4 = await completer3.future;
      image4 = imageInfo4.image;
      if (mounted) {
        setState(() {});
      }
    }));
  }

  @override
  Widget build(BuildContext context) {
    getImage();
    Widget? renderWidget;
    if (image4 != null) {
      renderWidget = Scaffold(
        appBar: AppBar(
          title: Text('Flutter image Shader'),
        ),
        body: Center(
          child: Container(
            width: 400,
            height: 400,
            child: CustomPaint(
              painter: OpenPainter(image4),
            ),
          ),
        ),
      );
    } else {
      renderWidget = Scaffold(
        appBar: AppBar(
          title: Text('Flutter image Shader'),
        ),
        body: Center(
          child: Container(
            width: 400,
            height: 400,
            child: Text('loading'),
          ),
        ),
      );
    }
    return renderWidget;
  }
}

class OpenPainter extends CustomPainter {
  OpenPainter(this.img1);
  var img1;
  @override
  void paint(Canvas canvas, Size size) {
    var paint1 = Paint()
      ..color = Color(0xff63aa65)
      ..shader = ui.ImageShader(
        img1!,
        TileMode.repeated,
        TileMode.repeated,
        Matrix4.identity().scaled(0.5).storage,
      )
      ..style = PaintingStyle.fill;
    //a circle
    canvas.drawCircle(Offset(200, 200), 100, paint1);
  }

  @override
  bool shouldRepaint(CustomPainter oldDelegate) => true;
}

```

 </details>

I have used the following commands to build the web applications:

- flutter run -d chrome --web-renderer canvaskit

- flutter run -d chrome --web-renderer html

Here are the outputs of the web renderers:

![webgradient](https://user-images.githubusercontent.com/72138351/122769081-dccee600-d2c1-11eb-821a-fdcfdb07e6cd.jpg)