- From: Rik Cabanier <cabanier@gmail.com>
- Date: Thu, 9 May 2013 13:40:54 -0700
- To: Sigurd Lerstad <sigurd.lerstad@gmail.com>
- Cc: whatwg@whatwg.org
On Thu, May 9, 2013 at 1:05 PM, Sigurd Lerstad <sigurd.lerstad@gmail.com>wrote: > I don't completely understand how this whatwg process works, I know that > multiply, screen etc. has been tried implemented in some "nightly > versions?" of chrome... but they don't work in my version of chrome. I > would very much like to know when I can expect multiply,screen,overlay > etc.. blend modes to be implemented in the standard versions of chrome and > firefox. I don't see them as part of the current whatwg spec either. > They are active on release Firefox and nightly builds of Safari. They also just landed on Blink/Chrome as experimental features. > > Anyway.. you are probably right about another way to accomplish > drawTintedImage, although I would argue that having an API for drawing > directly to the screen without going through an intermediate canvas would > definitely be worth it, both in terms of memory and speed, I'm thinking of > a situation where you draw hundreds of sprites to the screen. If for every > sprite one has to draw to an intermediate canvas, I imagine that it would > be more difficult to batch and optimize for GPU (Although I don't know the > inner workings of how the browsers optimize).. but if there are a lot of > intervening javascript code using offscreen canvases etc. it must be more > difficult to batch #N number of draw calls into a single GPU operation.. > but as I said, I don't know the inner workings. > Filters would probably be the just as efficient as a specific API. A temporary canvas is probably fairly efficient too especially if you can reuse it. > > 2013/5/9 Rik Cabanier <cabanier@gmail.com> > >> ah, I misunderstood your proposal. I thought your first proposal was >> asking for a 'fake duotone' [1] >> I'm unsure if these feature are important enough that they need their own >> API. >> >> fyi 'drawTintedImage' could be emulated by doing a 'multiply' blend mode >> between the image and the rgb color in an offscreen canvas and then doing >> a globalalpha + drawimage with the result. >> >> 1: http://printwiki.org/Fake_Duotone >> >> >> On Thu, May 9, 2013 at 7:21 AM, Sigurd Lerstad <sigurd.lerstad@gmail.com>wrote: >> >>> Rik, >>> >>> On second thought... I don't see how your mask proposal would accomplish >>> a drawTintedImage() >>> drawTintedImage *multiples* each pixel in the image with an rgba value >>> before putting it on the canvas. Some Examples: >>> >>> 1,1,1,1 (same as drawImage) >>> 1,1,1,0.5 (50% opacity) >>> 1,0,0,1 (only red channel, g and b are black) >>> >>> >>> -- >>> Sigurd Lerstad >>> >>> >>> >>> 2013/5/9 Rik Cabanier <cabanier@gmail.com> >>> >>>> >>>> >>>> On Wed, May 8, 2013 at 4:02 PM, Sigurd Lerstad < >>>> sigurd.lerstad@gmail.com> wrote: >>>> >>>>> A few canvas API suggestions:**** >>>>> >>>>> ** ** >>>>> >>>>> 1)**** >>>>> >>>>> drawTintedImage(image, tintR, tintG, tintB, tintA, ...)**** >>>>> >>>>> the rest of the arguments would be the same as for drawImage**** >>>>> >>>>> ** ** >>>>> >>>>> What this method does is the same as drawImage, but it multiplies each >>>>> color component with the passed rgba values. >>>>> >>>> >>>> I think my proposal for 'maskImage' [1] allows you to do this too. >>>> You'd set an image and tell canvas to use either the alpha or luma >>>> values. You'd then draw a rectangle with the color you want as a tint. >>>> >>>> >>>>> **** >>>>> >>>>> ** ** >>>>> >>>>> A search on google reveals that a lot of people want this feature, but >>>>> instead must resort to other slower solutions, like >>>>> getImageData/putImageData or drawing three separate images with compositing >>>>> of “lighter”. I myself also miss this feature.**** >>>>> >>>>> ** ** >>>>> >>>>> 2)**** >>>>> >>>>> drawColorTransformedImage(image, colorTransform, ….)**** >>>>> >>>>> ** ** >>>>> >>>>> Basically same as above, but instead passes a complete 4x5 >>>>> colorTransform (either an array or some kind of ColorMatrix object ?) >>>>> >>>> >>>> I've seen proposals that allows you to set a CSS filter shorthand [2] >>>> in the canvas state. In theory you should be able to put any SVG in there >>>> but that *might* be slower. >>>> So: >>>> ctx.save(); >>>> ctx.filters = "sepia(50%); >>>> ctx.drawImage(...); >>>> ctx.restore(); >>>> >>>> >>>> 1: >>>> http://lists.w3.org/Archives/Public/public-whatwg-archive/2013Jan/0263.html >>>> >>>> 2: http://www.w3.org/TR/filter-effects/#ShorthandEquivalents >>>> >>> >>> >> >
Received on Thursday, 9 May 2013 20:41:21 UTC