[html5] HTML5 canvas suggestions

[Sigurd Lerstad]

Your mask proposal is fine, but I still believe that the drawTintedImage()
API would be very useful.

The main point of the drawTintedImage was to have a very simple API, that I
think implementors could implement relatively fast, it's simple, and only
adds one method to the API, no fuss, and it provides a bare minimum of
flexibility that a lot of people are asking for (myself included). It's not
as advanced as your mask proposal, but that's the main idea.

Even if one later adds other methods, like your mask proposal, or drawImage
with a colorMatrix, they can all be used to implement drawTintedImage
behind the scenes, if implementors so choose, but the beauty of
drawTintedImage is it's simplicity.

I think it's a good idea to add several methods that provide progressively
more power. Like:
1) drawImage (already exists)
2) drawTintedImage
3) drawColorTransformedImage (can be used to implement drawTintedImage)
4) drawMask...

and I also agree that eventually, one should be able to programatically
apply all SVG filters to canvas.



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
>
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.whatwg.org/pipermail/help-whatwg.org/attachments/20130509/4dfc1f6b/attachment-0003.htm>