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

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

From: Ashley Gullen <ashley@scirra.com>
Date: Sun, 29 Jul 2012 13:10:53 +0100
Message-ID: <CAABs73jsX5yf4GT=ANVOD77qwcMnFzU1YbKjm5LBLNXfP5tzcQ@mail.gmail.com>
To: Rik Cabanier <cabanier@gmail.com>
Cc: "whatwg@whatwg.org" <whatwg@whatwg.org>, David Geary <david.mark.geary@gmail.com>, "Tab Atkins Jr." <jackalmage@gmail.com>, Chris Marrin <cmarrin@apple.com>, Ronald Jett <rjett@level-studios.com>
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 Sunday, 29 July 2012 12:11:25 GMT

This archive was generated by hypermail 2.2.0+W3C-0.50 : Wednesday, 30 January 2013 18:48:09 GMT