title: Capturing a Canvas as an Image in Flutter Web
body: <p>I am trying to capture the content of a Canvas as an Image using PictureRecorder in Flutter Web, but have trouble in doing so</p>
  
  <p>While experimenting I drew a simple circle and tried recording it, but I  keep getting 'null' for the Picture recorded</p>
  
  <pre class="lang-dart prettyprint-override"><code>import 'package:flutter_web/material.dart';
  import 'package:flutter_web_ui/ui.dart' as ui;
  
  import 'dart:typed_data';
  
  void main() =&gt; runApp(App());
  
  class App extends StatelessWidget {
    void generateImage() async {
      final ui.Paint paint = ui.Paint()
        ..style = ui.PaintingStyle.stroke
        ..strokeWidth = 1.0;
      final ui.PictureRecorder recorder = ui.PictureRecorder();
      final ui.Canvas pictureCanvas = ui.Canvas(recorder);
      pictureCanvas.drawCircle(Offset.zero, 20.0, paint);
      final ui.Picture picture = recorder.endRecording();
      ui.Image referenceImage = picture.toImage(50, 50);
      ByteData img =
          await referenceImage.toByteData(format: ui.ImageByteFormat.png);
    }
  
    @override
    Widget build(BuildContext context) {
      return MaterialApp(
        home: Scaffold(
          body: Column(
            children: &lt;Widget&gt;[
              Padding(
                padding: const EdgeInsets.all(12.0),
                child: RaisedButton(
                  child: Text('Generate image'),
                  onPressed: generateImage,
                ),
              ),
            ],
          ),
        ),
      );
    }
  }
  </code></pre>
  
  <p>This is the error I get in chrome console,</p>
  
  <pre><code>main.dart:24 Uncaught (in promise) TypeError: Cannot read property 'toByteData' of null
      at generateImage (main.dart:24)
      at generateImage.next (&lt;anonymous&gt;)
      at runBody (dart_sdk.js:22330)
      at Object.async.async (dart_sdk.js:22358)
      at main.App.new.generateImage (main.dart:15)
      at src__material__ink_well.InkWell.new.&lt;anonymous&gt; (main.dart:38)
      at _InkResponseState.new.[_handleTap] (ink_well.dart:511)
      at ink_well.dart:565
      at src__gestures__tap.TapGestureRecognizer.new.invokeCallback (recognizer.dart:169)
      at src__gestures__tap.TapGestureRecognizer.new.[_checkUp] (tap.dart:251)
      at src__gestures__tap.TapGestureRecognizer.new.handlePrimaryPointer (tap.dart:176)
      at src__gestures__tap.TapGestureRecognizer.new.handleEvent (recognizer.dart:439)
      at src__gestures__pointer_router.PointerRouter.new.[_dispatch] (pointer_router.dart:73)
      at src__gestures__pointer_router.PointerRouter.new.route (pointer_router.dart:100)
      at src__widgets__binding.WidgetsFlutterBinding.new.handleEvent (binding.dart:223)
      at src__widgets__binding.WidgetsFlutterBinding.new.dispatchEvent (binding.dart:201)
      at src__widgets__binding.WidgetsFlutterBinding.new.[_handlePointerEvent] (binding.dart:156)
      at src__widgets__binding.WidgetsFlutterBinding.new.[_flushPointerEventQueue] (binding.dart:103)
      at src__widgets__binding.WidgetsFlutterBinding.new.[_handlePointerDataPacket] (binding.dart:87)
      at src__engine.PointerBinding.new.[_onPointerData] (pointer_binding.dart:80)
      at pointer_binding.dart:194
      at HTMLElement.&lt;anonymous&gt; (pointer_binding.dart:135)
  </code></pre>