<div dir="ltr"><br><div class="gmail_quote"><div dir="ltr">Rik,<div><br></div><div>On second thought... I don't see how your mask proposal would accomplish a drawTintedImage()</div><div>drawTintedImage *multiples* each pixel in the image with an rgba value before putting it on the canvas. Some Examples:</div>

<div><br></div><div>1,1,1,1  (same as drawImage)</div><div>1,1,1,0.5 (50% opacity)</div><div>1,0,0,1 (only red channel, g and b are black)</div><div><br></div><div><br></div><div>
--</div><div>Sigurd Lerstad</div><div><br></div></div><div class="HOEnZb"><div class="h5"><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>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>
<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>
</div></div></div><br></div>