[whatwg] CSS Filter Effects for Canvas 2D Context

[David Geary]

On Tue, Jan 24, 2012 at 5:22 PM, Chris Marrin <cmarrin at apple.com> wrote:

>
> On Jan 24, 2012, at 11:56 AM, Ronald Jett wrote:
>
> > 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.
> >...
> > 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.


That advantage fixes a problem that shouldn't exist: You shouldn't have to
choose one technology over another because one is hardware accelerated.
That's ridiculous.


> 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.
>

Sure, but you must create a superfluous canvas for each set of images that
you animate, and invoke an entirely different technology to apply the
filter. You must  make sure that those superfluous canvases have
transparent backgrounds, no borders, and have the correct Z order so they
appear over, and not under, the primary canvas for the application. And I'm
sure there are other gotchas to this hybrid approach that don't immediately
come to mind.

I'd much rather use the filtering underlying API and control the rendering
and animation myself.


> 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...
>

I disagree. I would much rather see filter functionality available to both
Canvas and CSS. That functionality is clearly in both Canvas' and CSS'
wheelhouses, and since they are both implemented by the browser vendor, why
not have that low-level functionality available to both Canvas and CSS? It
seems crazy to me to have that low-level code sitting in the browser and
then restrict it to CSS. Why would anyone want to do that?


David
corehtml5canvas.com


>
> -----
> ~Chris
> cmarrin at apple.com
>
>
>
>
>