[whatwg] [html5] HTML5 canvas suggestions

[Rik Cabanier]

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