[whatwg] CSS Filter Effects for Canvas 2D Context

David Geary david.mark.geary at gmail.com
Thu Aug 16 08:52:03 PDT 2012


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


More information about the whatwg mailing list