I am targeting google chrome. Is it possible to draw transparent images on a canvas? By transparent I mean the drawing the entire image at something like 50% opacity.
-
2Are you wanting the canvas to be transparent so that you can place it over other elements?Justin– Justin2010-05-26 21:28:09 +00:00Commented May 26, 2010 at 21:28
-
1No, it's not possible. See this answer: stackoverflow.com/questions/2359537/…Intelekshual– Intelekshual2010-05-26 21:42:31 +00:00Commented May 26, 2010 at 21:42
-
Justin, no I want to draw a semi transparent image on top of other canvas element. I have no interest in making the entire canvas transparent. Intelekshual, setting context.globalAlpha effects subsequent context.drawImages atleast in Chrome.Mr Bell– Mr Bell2010-05-26 22:34:37 +00:00Commented May 26, 2010 at 22:34
Add a comment
|
3 Answers
You can do this using the globalAlpha property, like this:
<!DOCTYPE HTML>
<html>
<body>
<canvas height="100" width="100" id="myCanvas"></canvas>
<script>
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
context.globalAlpha = 0.5;
var myImage = new Image();
myImage.src = "someImage.jpg";
myImage.onload = function()
{
context.drawImage(myImage, 0, 0, 100, 100);
};
</script>
</body>
</html>
And yes, it does work with images. Verified with IE 9, FF 5, Safari 5, and Chrome 12 on Win 7.
2 Comments
Derek 朕會功夫
globalAlpha will not work for images drawn with drawImage in Firefox 30+: bugzilla.mozilla.org/show_bug.cgi?id=1028288
Kaiido
@Derek, this bug only concerns svg images.
The canvas element has a global alpha attribute that lets you apply partial transparency to anything you draw.
3 Comments
Eric Mickelsen
@Mr. Bell: +1 to Chrome for that.
Meekohi
Link is broken. See dev.w3.org/html5/2dcontext/#dom-context-2d-globalalpha
rebane2001
like this:
ctx.globalAlpha = 0.5It's possible if you iterate thru the canvas' image-data and set the alpha value manually, then export the transparent image with the canvas.toDataURL method and insert it into another canvas.
1 Comment
Kaiido
You don't have to call toDataURL if you want to draw a canvas on an other,
drawImage accepts canvas as imageSource.