[whatwg] CSS Filter Effects for Canvas 2D Context

Of course if we go back enough years, there was a recommendation that
foreign object be implemented across browsers so that any HTML content could
be filtered with the power of SVG (including the relatively lightweight
canvas). I think people worried that HTML would become obsolete then.

Cheers
David

-----Original Message-----
From: whatwg-bounces@lists.whatwg.org
[mailto:whatwg-bounces at lists.whatwg.org] On Behalf Of Chris Marrin
Sent: Tuesday, January 24, 2012 7:23 PM
To: Ronald Jett
Cc: whatwg at whatwg.org
Subject: Re: [whatwg] CSS Filter Effects for Canvas 2D Context


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

Received on Tuesday, 24 January 2012 17:28:04 UTC