[whatwg] CSS Filter Effects for Canvas 2D Context

<B7918F2A-FC93-4614-9D34-D6FE774410B3@level-studios.com>

Current votes: None.

Hello,

I think that bringing the new CSS filters (http://html5-demos.appspot.com/s=
tatic/css/filters/index.html) to canvas might be a good idea. Some of the n=
ew 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 th=
e discussion yielded much.

It would be great if you could turn the filters on and off while drawing. S=
omething 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