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;
  }