title: How to add an image as a background with customPaint?
body: <p>I have an app for painting using custom paint, and I wanted to add an image in the background so it can be painted over it but unfortunately I can't seem to figure out how to do that,I tried using a stack but every time I do the custom paint will only paint on the container but never on the image for some reason
  I would really appreciate any help on this matter<br />
  Here's the code :</p>
  <pre><code>import 'dart:ui';
  import 'package:flutter/material.dart';
  import 'package:flutter_colorpicker/flutter_colorpicker.dart';
  
  void main() =&gt; runApp(MyApp());
  
  class MyApp extends StatelessWidget {
    @override
    Widget build(BuildContext context) {
      return MaterialApp(
        title: 'Flutter Demo',
        debugShowCheckedModeBanner: false,
        theme: ThemeData(
          primarySwatch: Colors.blue,
        ),
        home: MyHomePage(),
      );
    }
  }
  
  class DrawingArea {
    Offset point;
    Paint areaPaint;
  
    DrawingArea({this.point, this.areaPaint});
  }
  
  class MyHomePage extends StatefulWidget {
    @override
    _MyHomePageState createState() =&gt; _MyHomePageState();
  }
  
  class _MyHomePageState extends State&lt;MyHomePage&gt; {
    List&lt;DrawingArea&gt; points = [];
    Color selectedColor;
    double strokeWidth;
  
    @override
    void initState() {
      super.initState();
      selectedColor = Colors.black;
      strokeWidth = 2.0;
    }
  
    @override
    Widget build(BuildContext context) {
      final double width = MediaQuery.of(context).size.width;
      final double height = MediaQuery.of(context).size.height;
  
      void selectColor() {
        showDialog(
          context: context,
          child: AlertDialog(
            title: const Text('Color Chooser'),
            content: SingleChildScrollView(
              child: BlockPicker(
                pickerColor: selectedColor,
                onColorChanged: (color) {
                  this.setState(() {
                    selectedColor = color;
                  });
                },
              ),
            ),
            actions: &lt;Widget&gt;[
              FlatButton(
                  onPressed: () {
                    Navigator.of(context).pop();
                  },
                  child: Text(&quot;Close&quot;))
            ],
          ),
        );
      }
  
      return Scaffold(
        body: Stack(
          children: &lt;Widget&gt;[
            Container(
              decoration: BoxDecoration(
                  gradient: LinearGradient(
                      begin: Alignment.topCenter,
                      end: Alignment.bottomCenter,
                      colors: [
                    Color.fromRGBO(138, 35, 135, 1.0),
                    Color.fromRGBO(233, 64, 87, 1.0),
                    Color.fromRGBO(242, 113, 33, 1.0),
                  ])),
            ),
            Center(
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.center,
                mainAxisAlignment: MainAxisAlignment.center,
                children: &lt;Widget&gt;[
                  Padding(
                    padding: const EdgeInsets.all(8.0),
                    child: Container(
                      width: width * 0.80,
                      height: height * 0.80,
                      decoration: BoxDecoration(
                          borderRadius: BorderRadius.all(Radius.circular(20.0)),
                          boxShadow: [
                            BoxShadow(
                              color: Colors.black.withOpacity(0.4),
                              blurRadius: 5.0,
                              spreadRadius: 1.0,
                            )
                          ]),
                      child: GestureDetector(
                        onPanDown: (details) {
                          this.setState(() {
                            points.add(DrawingArea(
                                point: details.localPosition,
                                areaPaint: Paint()
                                  ..strokeCap = StrokeCap.round
                                  ..isAntiAlias = true
                                  ..color = selectedColor
                                  ..strokeWidth = strokeWidth));
                          });
                        },
                        onPanUpdate: (details) {
                          this.setState(() {
                            points.add(DrawingArea(
                                point: details.localPosition,
                                areaPaint: Paint()
                                  ..strokeCap = StrokeCap.round
                                  ..isAntiAlias = true
                                  ..color = selectedColor
                                  ..strokeWidth = strokeWidth));
                          });
                        },
                        onPanEnd: (details) {
                          this.setState(() {
                            points.add(null);
                          });
                        },
                        child: SizedBox.expand(
                          child: ClipRRect(
                            borderRadius: BorderRadius.all(Radius.circular(20.0)),
                            child: CustomPaint(
                              painter: MyCustomPainter(points: points),
                            ),
                          ),
                        ),
                      ),
                    ),
                  ),
                  Container(
                    width: width * 0.80,
                    decoration: BoxDecoration(
                        color: Colors.white, borderRadius: BorderRadius.all(Radius.circular(20.0))),
                    child: Row(
                      children: &lt;Widget&gt;[
                        IconButton(
                            icon: Icon(
                              Icons.color_lens,
                              color: selectedColor,
                            ),
                            onPressed: () {
                              selectColor();
                            }),
  
                        Expanded(
                          child: Slider(
                            min: 1.0,
                            max: 5.0,
                            label: &quot;Stroke $strokeWidth&quot;,
                            activeColor: selectedColor,
                            value: strokeWidth,
                            onChanged: (double value) {
                              this.setState(() {
                                strokeWidth = value;
                              });
                            },
                          ),
                        ),
  
                        IconButton(
                            icon: Icon(
                              Icons.layers_clear,
                              color: Colors.black,
                            ),
                            onPressed: () {
                              this.setState((){
                                points.clear();
                              });
                            }),
                      ],
                    ),
                  )
                ],
              ),
            ),
          ],
        ),
      );
    }
  }
  
  class MyCustomPainter extends CustomPainter {
    List&lt;DrawingArea&gt; points;
  
    MyCustomPainter({@required this.points});
  
    @override
    void paint(Canvas canvas, Size size) {
      Paint background = Paint()..color = Colors.white;
      Rect rect = Rect.fromLTWH(0, 0, size.width, size.height);
      canvas.drawRect(rect, background);
      canvas.clipRect(rect);
  
      for (int x = 0; x &lt; points.length - 1; x++) {
        if (points[x] != null &amp;&amp; points[x + 1] != null) {
          canvas.drawLine(points[x].point, points[x + 1].point, points[x].areaPaint);
        } else if (points[x] != null &amp;&amp; points[x + 1] == null) {
          canvas.drawPoints(PointMode.points, [points[x].point], points[x].areaPaint);
        }
      }
    }
  
    @override
    bool shouldRepaint(MyCustomPainter oldDelegate) {
      return oldDelegate.points != points;
    }
  }
  </code></pre>