[whatwg] CSS Filter Effects for Canvas 2D Context
rjett at level-studios.com
Tue Jan 24 11:56:11 PST 2012
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.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.
LEVEL | SJ
More information about the whatwg