How can I apply matrix filter to canvas?

Question

I am developing an image editor using the Flutter framework and Dart and I can't apply matrix filter to canvas.

I'm trying to apply a matrix filter to the canvas using a "Paint" class and "canvas.drawPaint(paint)" function, but I get black canvas.

Original image

Expected (Variant 2 in code)

I get

class EditorPainter extends CustomPainter {

  final ui.Image image;
  final double zoom;
  final Offset offset;

  EditorPainter({
    @required this.image,
    @required this.zoom,
    @required this.offset,
    this.elements
  });

  @override
  void paint(Canvas canvas, Size size) {
    Size imageSize = Size(image.width.toDouble(), image.height.toDouble());
    Size targetSize = imageSize * zoom;

    // Variant 1 - not working (draws black canvas)

    paintImage(
      canvas: canvas,
      rect: offset & targetSize,
      image: image,
      fit: BoxFit.fill
    );


    // Paint with "sepia" filter
    final Paint paint = Paint()
      ..colorFilter = ColorFilter.matrix([
        0.393, 0.768, 0.189, 0.0, 0.0,
        0.349, 0.686, 0.168, 0.0, 0.0,
        0.272, 0.534, 0.131, 0.0, 0.0,
        0.0, 0.0, 0.0, 1.0, 0.0,
      ]);

    canvas.drawPaint(paint);

    // Variant 2 - working 
    // Image with "sepia" filter
    paintImage(
      canvas: canvas,
      rect: offset & targetSize,
      image: image,
      fit: BoxFit.fill,
      colorFilter: ColorFilter.matrix([
        0.393, 0.768, 0.189, 0.0, 0.0,
        0.349, 0.686, 0.168, 0.0, 0.0,
        0.272, 0.534, 0.131, 0.0, 0.0,
        0.0, 0.0, 0.0, 1.0, 0.0,
      ])
    );
  }
}

I expect to get a canvas with a filtered image, but I get a black canvas. I tried to assign BlendMode to the Paint, but it did not help.

Solution

drawPaint fills the canvas with the given Paint. In your case it fills it using a black color.

You should modify your first example:

final matrix = ColorFilter.matrix([
  0.393, 0.768, 0.189, 0.0, 0.0,
  0.349, 0.686, 0.168, 0.0, 0.0,
  0.272, 0.534, 0.131, 0.0, 0.0,
  0.0, 0.0, 0.0, 1.0, 0.0,
]);

context.pushColorFilter(offset,matrix, (context, offset) {
  paintImage(
    canvas: canvas,
    rect: offset & targetSize,
    image: image,
    fit: BoxFit.fill
  );
});

These will create a new layer and apply color filter to it.

Comments

[ibrahim]

did you figure this out?