[html5] HTML5 canvas suggestions

Rik Cabanier cabanier at gmail.com
Wed May 8 20:11:20 PDT 2013


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/20130508/87397ff0/attachment-0003.htm>


More information about the Help mailing list