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 <[email protected]> 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 <[email protected]> wrote: > >> >> >> On Sat, Jul 28, 2012 at 1:58 PM, Ashley Gullen <[email protected]> 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? >> > >
