No painting over Background

[iKK001]

Hi,
in your demo link (as well as code): when I add a background, then drawing over it is not possible. Also, the background is not exportet into png or jpeg. Seems something unfinished witch Background-implementation.

Maybe somebody has solved that already ?

[iKK001]

As mentioned, when you add a background-image, then the behaviour of the library is unfortunately wrong. (i.e. any drawing does not show over the background-image but is drawn "underneath" it !)

For black-color tools there is a solution:

Inside the file drawing_canvas.dart, please find the paint-method and adapt its blendMode to "multiply" as such:

@override
  void paint(Canvas canvas, Size size) {
    if (backgroundImageListenable != null) {
      final backgroundImage = backgroundImageListenable!.value;

      if (backgroundImage != null) {
        canvas.drawImageRect(
          backgroundImage,
          Rect.fromLTWH(
            0,
            0,
            backgroundImage.width.toDouble(),
            backgroundImage.height.toDouble(),
          ),
          Rect.fromLTWH(0, 0, size.width, size.height),
          Paint()..blendMode = BlendMode.multiply,
        );
      }
    }

After that, you can at least draw with the black-color and the drawings are visible over the background image !!!

And for the second problem with this library - i.e. missing background-image when image-export (.png or .jpeg), I have a solution as follows:

Inside the file canvas_side_bar.dart, please replace the existing getBytes-method by this code :

Future<Uint8List?> getBytes() async {
    try {
      RenderRepaintBoundary boundary = widget.canvasGlobalKey.currentContext
          ?.findRenderObject() as RenderRepaintBoundary;

      // Capture the widget as an image
      ui.Image image = await boundary.toImage();

      if (widget.backgroundImage.value != null) {
        // Load the background image from the widget's value
        ui.Image backgroundImage = widget.backgroundImage.value!;

        // Create a new image recorder and canvas to draw both images
        final recorder = ui.PictureRecorder();
        final canvas = Canvas(
          recorder,
          Rect.fromPoints(
            const Offset(0, 0),
            Offset(image.width.toDouble(), image.height.toDouble()),
          ),
        );

        // Calculate the destination rectangle for BoxFit.fill (stretch the background to fill the canvas)
        Rect destRect = Rect.fromLTWH(
            0, 0, image.width.toDouble(), image.height.toDouble());

        // Draw the background image using BoxFit.fill
        canvas.drawImageRect(
          backgroundImage, // source image
          Rect.fromLTWH(0, 0, backgroundImage.width.toDouble(),
              backgroundImage.height.toDouble()), // source rectangle
          destRect, // destination rectangle (this is the canvas area)
          Paint(),
        );

        // Draw the transparent image over the background
        canvas.drawImage(image, const Offset(0, 0), Paint());

        // End recording and create the final image
        final picture = recorder.endRecording();
        final finalImage = await picture.toImage(image.width, image.height);

        // Convert the final image to bytes (PNG format)
        ByteData? byteData =
            await finalImage.toByteData(format: ui.ImageByteFormat.png);
        Uint8List? pngBytes = byteData?.buffer.asUint8List();

        return pngBytes;
      }
    } catch (e) {
      return null; // Return null if any error occurs
    }

    return null;
  }

[saklanmaz]

The solution to the problem of not being able to draw on the background is to load the image after the drawings. The relevant part in the paint function in drawing_canvas is the first part drawn. You should move this part after all the drawings are drawn.

    if (backgroundImageListenable != null) {
      final backgroundImage = backgroundImageListenable!.value;

      if (backgroundImage != null) {
        final imageWidth = backgroundImage.width.toDouble();
        final imageHeight = backgroundImage.height.toDouble();

        final offsetX = (size.width - imageWidth) / 2;
        final offsetY = (size.height - imageHeight) / 2;

        canvas.drawImageRect(
          backgroundImage,
          Rect.fromLTWH(0, 0, imageWidth, imageHeight),
          Rect.fromLTWH(offsetX, offsetY, imageWidth, imageHeight),
          Paint(),
        );
      }
    }

Edit: This was a wrong approach, sorry. This does not solve the problem of drawing on the image. Instead, it seems to be erased during the deletion process. This is the solution to the problem.