[whatwg] CSS Filter Effects for Canvas 2D Context

[David Geary]

It looks like there is general agreement that CSS filters should be added
to Canvas. Now how do we make it happen?


david

On Sun, Jul 29, 2012 at 6:10 AM, Ashley Gullen <ashley at scirra.com> wrote:

> Re: beginGroup()/endGroup(): I assume browsers would implement it as an
> offscreen canvas anyway, so it would be better to write a JS library to
> take care of it for you rather than requiring a browser feature for that.
>
> You would not need to rotate or scale the off-screen canvas.  You'd make
> it the size of the main canvas, draw everything with all the
> rotation/scaling you want, then just draw it over the main canvas at (0, 0)
> with 100% scale.  This will not affect antialiasing or artwork compared to
> just drawing it directly to the main canvas.  Fancier implementations can
> work out the changed bounding box and only draw that with the effect for
> efficiency.
>
> Re: CORS - good point.  Perhaps we should disallow custom shaders until
> this is figured out better (presumably it would have to be done the same
> way as WebGL).  We can still add the stock CSS filter effects like blur,
> grayscale, contrast etc. without any CORS concern, though.
>
> Re: bounding boxes - I'm not sure why this needs to be included?  CSS
> filters are smart enough to work out adjusted bounding boxes for HTML
> images and divs, so can't the drawImage() call also work out the adjusted
> bounding box necessary?  If the bounding box really must be separately
> provided for some reason, then perhaps there could be a drawImage()
> overload that also accepts a CSS filter string (e.g. "blur(10px)") and a
> bounding box parameter?
>
> Ashley
>
>
> On 29 July 2012 00:27, Rik Cabanier <cabanier at gmail.com> wrote:
>
>>
>>
>> On Sat, Jul 28, 2012 at 1:58 PM, Ashley Gullen <ashley at scirra.com> wrote:
>>
>>> On another note, wouldn't it be nice if you could add a grouping
>>>> operator such as this:
>>>>
>>>> gamecanvascontext.filter = '...';
>>>> gamecanvascontext.beginGroup();
>>>> ... // lots of drawing operators
>>>> gamecanvascontext.endGroup();
>>>>
>>>>  and have everything in that group at endGroup time?
>>>>
>>>
>>>  Do you mean applying an effect to multiple draw operations?
>>>
>>
>> True, but you would have to know the size of the offscreen canvas which
>> is sometimes hard.
>> I'm unsure what happens if you scale or rotate that offscreen canvas.
>> Will the artwork and text antialias correctly? How does the up/downsampling
>> happen?
>>
>>
>>> Usually that is achieved with rendering to an offscreen canvas, then
>>> rendering that with the effect.
>>>
>>
>> True, but you would have to know the size of the offscreen canvas which
>> is sometimes hard.
>> I'm unsure what happens if you scale or rotate that offscreen canvas.
>> Will the artwork and text antialias correctly? How does the up/downsampling
>> happen?
>>
>
>