[whatwg] CSS Filter Effects for Canvas 2D Context

[Rik Cabanier]

File a bug on it:
https://www.w3.org/Bugs/Public/enter_bug.cgi?product=HTML%20WG
Describe what you want to see. Ie a new filter property that take the same
argument as a CSS filter (
https://dvcs.w3.org/hg/FXTF/raw-file/tip/filters/index.html#FilterFunction )

On Thu, Aug 16, 2012 at 8:52 AM, David Geary <david.mark.geary at gmail.com>wrote:

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