Use standard Canvas ctx.filter API (blur/grayscale/saturate/contrast)

[paramaggarwal]

HTML5 Canvas recently introduced support for filters like ctx.filter = "blur(5px)"; in the browser, for example to blur, saturate, grayscale and modify contrast.

Issue or Feature

API support for HTML5 Canvas ctx.filter from from MDN web docs

Steps to Reproduce

var Canvas = require('canvas');
var canvas = Canvas.createCanvas(200, 200);
var ctx = canvas.getContext('2d');
ctx.filter = "blur(5px)";
ctx.drawImage(img,0,0);

Your Environment

• node-canvas: 2.0.0 alpha
• node: v9.3.0
• macOS: High Sierra

[asturur]

This api is actually much new also for browsers ( chrome 49+ )

[paramaggarwal]

Ah, right. Closing issue for now.

[asturur]

I did not mean to make you close it. Just can be expected that is not implemented in node-canvas since it became a standard non experimental api not long ago.

[paramaggarwal]

No, no - I previously thought that this is a bug, but actually it is a feature request. Hence closed it. 😄

[zbjornson]

Feature requests are valid issues :-)

[ghost]

Same problem. I make a canvas with nodejs and use ctx.filter = 'blur(4px)'; to blur canvas then I convert it to png.

It doesn't work !!
My code:
const canvas = createCanvas(900, 900) const ctx = canvas.getContext('2d') ctx.filter = 'blur(400px)'; ctx.font = '48px serif'; ctx.fillText('Hello world', 50, 100); fs.writeFileSync('layer-1.png', canvas.toBuffer());

[asturur]

i would like to work on this, i wonder if we have the exact specs of the filters. Would be ok to implement those with normal loops over the pixels?

[zbjornson]

Reopening because we still don't have this feature.

@asturur I think the full list is here: https://drafts.fxtf.org/filter-effects/#supported-filter-functions.

Would be ok to implement those with normal loops over the pixels?

It's better to use Cairo APIs if possible because Cairo and pixman use SIMD extensions. However, the Cairo cookbook recipe for Gaussian blur (https://www.cairographics.org/cookbook/blur.c/) is indeed a loop. (Skia on the other hand has quite a few filters built in, were we to switch to that.)

[paramaggarwal]

Oh ok, I was going through all my open issues across GitHub and closing old ones. Thanks for reopening.

[asturur]

I have a dumb question, since so long and i never made it just because i was worried it was too dumb.

To get a great node-canvas compatibility, what does stop someone to take the full firefox canvas implementation from the source code and make it for node?

Wouldn't it an accurate node-canvas at that point?

[mifi]

Hm, I found this: https://github.com/Automattic/node-canvas/blob/master/src/CanvasRenderingContext2d.cc#L615
Looks like an implementation of the filters 😮

[PainOchoco]

In the meantime I will use skia-canvas which supports filters, it's a great alternative.

[paramaggarwal]

To support filters we will need to migrate to Skia graphics engine from the Cairo engine. Such a rewrite would effectively be like starting an entirely new project and should not be in the scope of this project (which should continue to be a great canvas API wrapper on top of Cairo engine) - hence closing this.

See discussion here: #1652 (comment)

[Pomax]

Another option is to implement filters "the old way" (i.e. write the filters in JS and composite to a new, same-sized pixel matrix, then replace the original with the updated one) and tell folks that while things will technically work, it will be slow. For most applications that would probably be an acceptable tradeoff: I'd much rather wait a little longer for image generation to finish if it means the result looks (near) identical between node-canvas and the browser =)