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

Re: [whatwg] CSS Filter Effects for Canvas 2D Context

From: David Geary <david.mark.geary@gmail.com>
Date: Thu, 16 Aug 2012 09:52:03 -0600
Message-ID: <CA+44znh+QcqGHhVNrkjsfBzua5OVPJB8q6E4Cu0Bf1PGjx-DKg@mail.gmail.com>
To: Ashley Gullen <ashley@scirra.com>
Cc: "whatwg@whatwg.org" <whatwg@whatwg.org>, "Tab Atkins Jr." <jackalmage@gmail.com>, Rik Cabanier <cabanier@gmail.com>, Chris Marrin <cmarrin@apple.com>, Ronald Jett <rjett@level-studios.com>
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@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@gmail.com> wrote:
>
>>
>>
>> On Sat, Jul 28, 2012 at 1:58 PM, Ashley Gullen <ashley@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?
>>
>
>
Received on Thursday, 16 August 2012 15:52:31 UTC

This archive was generated by hypermail 2.4.0 : Wednesday, 22 January 2020 16:59:44 UTC