[whatwg] CSS Filter Effects for Canvas 2D Context

[Ronald Jett]

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?

- Ronald


..............................................

Ronald Jett
Interactive Developer
LEVEL | SJ
Desk: 408.275.7117
Cell: 408.332.1986
http://level-studios.com