[whatwg] [html5] HTML5 canvas suggestions

[Rik Cabanier]

On Thu, May 9, 2013 at 1:05 PM, Sigurd Lerstad <sigurd.lerstad at 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 at 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 at 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 at gmail.com>
>>>
>>>>
>>>>
>>>> On Wed, May 8, 2013 at 4:02 PM, Sigurd Lerstad <
>>>> sigurd.lerstad at 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
>>>>
>>>
>>>
>>
>