title: Unable to draw image on Flutter canvas
body: <p>I am currently trying to draw an image on a flutter canvas and then draw rectangles over the image to cover specific data. I am running into an issue where the the rectangles are drawing fine but the image is not being drawn behind. It appears as if it is not being drawn at all.</p>
  
  <p>I am loading the image into a Dart UI Image object from bytes. Once the image is loaded I create a PictureRecorder and pass it into a Canvas object. I then attempt to draw the image object first, followed by the rectangles over top. The complete code is below:</p>
  
  <pre><code>import 'dart:async';
  import 'dart:typed_data';
  
  import 'dart:ui' as ui;
  
  import 'package:common/ocr/scraped_card_field.dart';
  import 'package:flutter/material.dart';
  import 'package:flutter/services.dart';
  
  class ObfuscatedCardRenderer {
    ui.Image _backgroundImage;
  
    ///
    ///
    ///
    Future&lt;ByteData&gt; renderImage(
        Uint8List imageBytes, List&lt;ScrapedCardField&gt; fields) async {
      await _loadImageBackground(imageBytes);
      var obfuscatedImage = await _obfuscateImage(fields);
  
      var byteD =
          await obfuscatedImage.toByteData(format: ui.ImageByteFormat.png);
  
      return byteD;
    }
  
    ///
    ///
    ///
    Future&lt;ui.Image&gt; _obfuscateImage(List&lt;ScrapedCardField&gt; fields) async {
      ui.PictureRecorder recorder = ui.PictureRecorder();
      ui.Canvas c = ui.Canvas(recorder);
  
      var paint = ui.Paint();
  
      c.drawImage(_backgroundImage, ui.Offset(0.0, 0.0), new Paint());
      for (ScrapedCardField field in fields) {
        paint.color = Colors.white;
        c.drawRect(field.boundingBox, paint);
      }
  
      var picture = recorder.endRecording();
      return picture.toImage(_backgroundImage.width, _backgroundImage.height);
    }
  
    ///
    ///
    ///
    Future&lt;void&gt; _loadImageBackground(Uint8List imageBytes) async {
      if (imageBytes != null) {
        _backgroundImage = await _getImageFromBytes(imageBytes);
      } else {
        return null;
      }
    }
  
    ///
    ///
    ///
    Future&lt;ui.Image&gt; _getImageFromBytes(Uint8List imageBytes) async {
      var completer = Completer&lt;ui.Image&gt;();
      ui.decodeImageFromList(imageBytes, (image) {
        completer.complete(image);
      });
  
      return completer.future;
    }
  }
  
  </code></pre>
  
  <p>Here is the result: </p>
  
  <p><a href="https://i.stack.imgur.com/yfb7u.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/yfb7u.png" alt="enter image description here"></a></p>
  
  <p>As you can see the rectangles are drawn perfectly fine, however, the image in the background is not visible. Is there something else I should be doing to draw the image, or is there another way to do this?</p>
  
  <p>Thanks!</p>