<div dir="ltr">Your mask proposal is fine, but I still believe that the drawTintedImage() API would be very useful.<div><br></div><div>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.</div>
<div><br></div><div>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.<br>
</div><div><br></div><div style>I think it's a good idea to add several methods that provide progressively more power. Like:</div><div style>1) drawImage (already exists)</div><div style>2) drawTintedImage</div><div style>
3) drawColorTransformedImage (can be used to implement drawTintedImage)</div><div style>4) drawMask...</div><div style><br></div><div style>and I also agree that eventually, one should be able to programatically apply all SVG filters to canvas.</div>
<div><br></div></div><div class="gmail_extra"><br><br><div class="gmail_quote">2013/5/9 Rik Cabanier <span dir="ltr"><<a href="mailto:cabanier@gmail.com" target="_blank">cabanier@gmail.com</a>></span><br><blockquote class="gmail_quote" style="margin:0 0 0 .8ex;border-left:1px #ccc solid;padding-left:1ex">
<br><br><div class="gmail_quote"><div class="im">On Wed, May 8, 2013 at 4:02 PM, Sigurd Lerstad <span dir="ltr"><<a href="mailto:sigurd.lerstad@gmail.com" target="_blank">sigurd.lerstad@gmail.com</a>></span> wrote:<br>
<blockquote class="gmail_quote" style="margin:0 0 0 .8ex;border-left:1px #ccc solid;padding-left:1ex">

<div lang="EN-US" link="blue" vlink="purple"><div><p class="MsoNormal">A few canvas API suggestions:<u></u><u></u></p><p class="MsoNormal"><u></u> <u></u></p><p class="MsoNormal">1)<u></u><u></u></p><p class="MsoNormal">

drawTintedImage(image, tintR, tintG, tintB, tintA, ...)<u></u><u></u></p>
<p class="MsoNormal">the rest of the arguments would be the same as for drawImage<u></u><u></u></p><p class="MsoNormal"><u></u> <u></u></p><p class="MsoNormal">What this method does is the same as drawImage, but it multiplies each color component with the passed rgba values.</p>

</div></div></blockquote><div><br></div></div><div>I think my proposal for 'maskImage' [1] allows you to do this too.</div><div>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.</div>
<div class="im">
<div> </div><blockquote class="gmail_quote" style="margin:0 0 0 .8ex;border-left:1px #ccc solid;padding-left:1ex"><div lang="EN-US" link="blue" vlink="purple"><p class="MsoNormal"><u></u><u></u></p>
<p class="MsoNormal"><u></u> <u></u></p><p class="MsoNormal">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.<u></u><u></u></p>


<p class="MsoNormal"><u></u> <u></u></p><p class="MsoNormal">2)<u></u><u></u></p><p class="MsoNormal">drawColorTransformedImage(image, colorTransform, ….)<u></u><u></u></p><p class="MsoNormal"><u></u> <u></u></p><p class="MsoNormal">


Basically same as above, but instead passes a complete 4x5 colorTransform (either an array or some kind of ColorMatrix object ?)</p></div></blockquote><div><br></div></div><div>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.</div>

<div>So:</div><div>    ctx.save();</div><div>    ctx.filters = "sepia(50%);</div><div>    ctx.drawImage(...);</div><div>    ctx.restore();</div><div> </div><div><br></div><div>1: <a href="http://lists.w3.org/Archives/Public/public-whatwg-archive/2013Jan/0263.html" target="_blank">http://lists.w3.org/Archives/Public/public-whatwg-archive/2013Jan/0263.html</a> </div>

<div>2: <a href="http://www.w3.org/TR/filter-effects/#ShorthandEquivalents" target="_blank">http://www.w3.org/TR/filter-effects/#ShorthandEquivalents</a></div></div>
</blockquote></div><br></div>