title: Flutter web - Got blank background when convert canvas to image file (only in Chrome)
body: <p>In flutter I created a simple drawing app which support android, iOS and web. It will load image from url as the background, and users will be able to draw lines and add texts on it. The problem is on the web, specifically in chrome-based browser, the background is missing, although it works like a charm in Safari &amp; Firefox.</p>
  <p>first, I have image url from network, I convert it into <code>dart:ui</code> Image</p>
  <pre><code>Future&lt;ui.Image?&gt; loadUiNetworkImage(String? url) async {
    if (url == null) return null;
    final http.Response response = await http.get(Uri.parse(url));
    final list = response.bodyBytes;
    final completer = Completer&lt;ui.Image&gt;();
    ui.decodeImageFromList(list, completer.complete);
    return completer.future;
  }
  
  final background = await loadUiNetworkImage(backgroundUrl);
  </code></pre>
  <p>then in my CustomPainter widget I put the image as the background using <code>paintImage</code> function:</p>
  <pre><code>@override
  void paint(Canvas canvas, Size size) {
  
    _addBackground(ui.Image background, {double scale = 1.0}) {
      final width = background.width * scale;
      final height = background.height * scale;
  
      final left = (size.width - width) / 2.0;
      final top = (size.height - height) / 2.0;
  
      paintImage(
        canvas: canvas, 
        rect: Rect.fromLTWH(left, top, width, height),
        image: background,
        fit: BoxFit.scaleDown,
        repeat: ImageRepeat.noRepeat,
        scale: 1.0,
        alignment: Alignment.center,
        flipHorizontally: false,
        filterQuality: FilterQuality.high
      );
    }
  
    if (background != null) {
      final scale = min(size.width / background!.width, size.height / background!.height);
      _addBackground(background!, scale: scale);
      canvas.saveLayer(null, Paint());
    }
  
    // also some drawings i.e. `drawLine` &amp; `TextPainter`
  }
  </code></pre>
  <p>this is my CustomPainter resides in widget tree:</p>
  <pre><code>RepaintBoundary(
    key: _globalKey,
    child: Container(
      width: MediaQuery.of(context).size.width,
      height: MediaQuery.of(context).size.height,
      color: Colors.white,
      child: StreamBuilder&lt;List&lt;dynamic&gt;&gt;(
        stream: linesStreamController.stream,
        builder: (context, snapshot) {
          return CustomPaint(
            painter: Sketcher(
              background: _background,
              prevDrawing: _prevDrawing,
              lines: _lines,
            ),
          );
        },
      ),
    ),
  );
  </code></pre>
  <p>then I save the drawing or whole canvas as an image file using this function:</p>
  <pre><code>_save() async {
    try {
      final boundary = _globalKey.currentContext!.findRenderObject() as RenderRepaintBoundary;
      final image = await boundary.toImage();
      final byteData = await image.toByteData(format: ui.ImageByteFormat.png);
      if (byteData == null) return h.showToast(&quot;Failed to process image, please try again!&quot;);
      final pngBytes = byteData.buffer.asUint8List(byteData.offsetInBytes, byteData.lengthInBytes);
      final fileName = &quot;${DateTime.now().millisecondsSinceEpoch}&quot;;
      if (kIsWeb) {
        Navigator.pop(context, [pngBytes]); // this is the bytes to be uploaded to server
      } else {
        final fileDir = (await getTemporaryDirectory()).path;
        final File imgFile;
        imgFile = File('$fileDir/$fileName.png');
        imgFile.writeAsBytes(pngBytes);
        Navigator.pop(context, [imgFile.path]);
      }
    } catch (e) {
      print(e);
    }
  }
  </code></pre>
  <p>I ran it using canvaskit renderer:</p>
  <p><code>flutter run -d chrome --web-renderer canvaskit</code></p>
  <p>I suspect this is a bug in the blink (chrome) canvas or rendering engine.
  How to get around this problem?</p>
  <p>Screenshots:</p>
  <p><a href="https://i.stack.imgur.com/Xvw3k.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Xvw3k.png" alt="enter image description here" /></a>
  <a href="https://i.stack.imgur.com/pe2G9.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/pe2G9.png" alt="enter image description here" /></a>
  <a href="https://i.stack.imgur.com/34GKl.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/34GKl.png" alt="enter image description here" /></a></p>