W3C home > Mailing lists > Public > whatwg@whatwg.org > January 2012

[whatwg] CSS Filter Effects for Canvas 2D Context

From: Ronald Jett <rjett@level-studios.com>
Date: Tue, 24 Jan 2012 11:56:11 -0800
Message-ID: <B7918F2A-FC93-4614-9D34-D6FE774410B3@level-studios.com>

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.


- Ronald


Ronald Jett
Interactive Developer
Desk: 408.275.7117
Cell: 408.332.1986
Received on Tuesday, 24 January 2012 11:56:11 UTC

This archive was generated by hypermail 2.3.1 : Monday, 13 April 2015 23:09:10 UTC