[whatwg] CSS Filter Effects for Canvas 2D Context

[Chris Marrin]

On Jan 24, 2012, at 11:56 AM, Ronald Jett wrote:

> Hello,
> 
> I think that bringing the new CSS filters (http://html5-demos.appspot.com/static/css/filters/index.html) to canvas might be a good idea. Some of the new filters, specifically blur, would definitely speed up some applications. I saw that there was a previous discussion on this list about bringing SVG filters to canvas, but it was a few years back and it doesn't seem like the discussion yielded much.
> 
> It would be great if you could turn the filters on and off while drawing. Something like:
> 
> ctx.blur(20); // turns on a 20px blur
> ctx.drawRect(0, 0, 50, 50); // this will be blurred
> ctx.blur(0); // turns off blur
> ctx.drawRect(100, 100, 50, 50); // this will not be blurred
> 
> You could even do multiples:
> 
> ctx.blur(2);
> ctx.sepia(1);
> ctx.drawImage(img, 0, 0);
> ctx.endFilters(); // turn all filters off
> 
> Another benefit of having these effects in canvas is that we could utilize toDataURL to save out an image that a user/application has filtered.
> 
> Thoughts?

You can apply CSS Filters to a Canvas element. Maybe it would be better to put the items you want filtered into a separate canvas element and use CSS Filters on that? The big advantage of doing it that way is that the CSS filters can be animated and hardware accelerated. Adding filter functions to canvas would require you to re-render the items for every filter change and you'd have to animate it all yourself.

Generally, I think that often a hybrid approach to Canvas, where you draw into multiple Canvas elements and use CSS transforms, animations (and now filters) for positioning and effects can give you the best of both worlds...

-----
~Chris
cmarrin at apple.com