How to set a background image to a customPaint in flutter

Question

i have a customPaint drawed by this tool here. i just want to set an image as a background for this customPaint that take the same shape as the customPaint but the image fit the whole screen not the size of the paint itself.

i followed the way mentioned in this answer https://stackoverflow.com/a/62516302/12554015

my code

1. the customPainter class:

   canvas.drawImage(myBackground!, Offset.zero, Paint())
   
   class BackgroundCustomPainter extends CustomPainter {
   final ui.Image? myBackground;
   const BackgroundCustomPainter(this.myBackground);
    @override
    void paint(Canvas canvas, Size size) {
    Path path_0 = Path();
    path_0.moveTo(size.width * 0.01063777, size.height * 0.01464467);
    path_0.cubicTo(0, size.height * 0.02928933, 0, size.height * 0.05285967, 0,
    size.height * 0.1000000);
    path_0.lineTo(0, size.height * 0.9000000);
    path_0.cubicTo(0, size.height * 0.9471400, 0, size.height * 0.9707100,
    size.width * 0.01063777, size.height * 0.9853567);
    path_0.cubicTo(
    size.width * 0.02127554,
    size.height,
    size.width * 0.03839685,
    size.height,
    size.width * 0.07263923,
    size.height);
    path_0.lineTo(size.width * 0.3588063, size.height);
    path_0.cubicTo(size.width * 0.3683777, size.height, size.width * 0.3731622,
    size.height, size.width * 0.3753438, size.height * 0.9962100);
    path_0.cubicTo(
    size.width * 0.3775254,
    size.height * 0.9924200,
    size.width * 0.3763269,
    size.height * 0.9854000,
    size.width * 0.3739274,
    size.height * 0.9713600);
    path_0.cubicTo(
    size.width * 0.3716610,
    size.height * 0.9580800,
    size.width * 0.3704600,
    size.height * 0.9442333,
    size.width * 0.3704600,
    size.height * 0.9300000);
    path_0.cubicTo(
    size.width * 0.3704600,
    size.height * 0.8305900,
    size.width * 0.4290000,
    size.height * 0.7500000,
    size.width * 0.5012107,
    size.height * 0.7500000);
    path_0.cubicTo(
    size.width * 0.5734213,
    size.height * 0.7500000,
    size.width * 0.6319613,
    size.height * 0.8305900,
    size.width * 0.6319613,
    size.height * 0.9300000);
    path_0.cubicTo(
    size.width * 0.6319613,
    size.height * 0.9442333,
    size.width * 0.6307603,
    size.height * 0.9580800,
    size.width * 0.6284939,
    size.height * 0.9713600);
    path_0.cubicTo(
    size.width * 0.6260944,
    size.height * 0.9854000,
    size.width * 0.6248959,
    size.height * 0.9924200,
    size.width * 0.6270775,
    size.height * 0.9962100);
    path_0.cubicTo(size.width * 0.6292591, size.height, size.width * 0.6340436,
    size.height, size.width * 0.6436150, size.height);
    path_0.lineTo(size.width * 0.9273608, size.height);
    path_0.cubicTo(size.width * 0.9616029, size.height, size.width * 0.9787240,
    size.height, size.width * 0.9893632, size.height * 0.9853567);
    path_0.cubicTo(size.width, size.height * 0.9707100, size.width,
    size.height * 0.9471400, size.width, size.height * 0.9000000);
    path_0.lineTo(size.width, size.height * 0.1000000);
    path_0.cubicTo(
    size.width,
    size.height * 0.05285967,
    size.width,
    size.height * 0.02928933,
    size.width * 0.9893632,
    size.height * 0.01464467);
    path_0.cubicTo(size.width * 0.9787240, 0, size.width * 0.9616029, 0,
    size.width * 0.9273608, 0);
    path_0.lineTo(size.width * 0.07263923, 0);
    path_0.cubicTo(size.width * 0.03839685, 0, size.width * 0.02127554, 0,
    size.width * 0.01063777, size.height * 0.01464467);
    path_0.close();
   
    Paint paint0Fill = Paint()..style = PaintingStyle.fill;
    paint0Fill.color = Colors.grey.withOpacity(0.61);
    canvas.drawPath(path_0, paint0Fill);
    myBackground != null
    ? canvas.drawImage(myBackground!, Offset.zero, Paint())
    : null;
    }
   
    @override
    bool shouldRepaint(covariant CustomPainter oldDelegate) {
    return true;
    }
    }
   

2. a button to pick an image file:

     GestureDetector(
       onTap: () async {
         FilePickerResult? result = await FilePicker.platform
           .pickFiles(type: FileType.image);
           if (result != null) {
             imageFile = File(result.files.single.path!);
             myBackground = await decodeImageFromList(
             imageFile!.readAsBytesSync());
             setState(() {});
           } else {
             // User canceled the picker
           }
      },
     child: SvgPicture.asset(AppIcons.camera),
     ),

3. how i passed the image for the painter class

   File? imageFile; ui.Image? myBackground;
   

 CustomPaint(
      size:
          Size(MediaQuery.of(context).size.width - 16, 300),
      painter:
          BackgroundCustomPainter(myBackground),
  ),

the shape that the picture picked by user will take note: my code now shows the image on its full width and height