How to change the opacity (alpha, transparency) of an element in a canvas element after it has been
Posted
by Joe Lencioni
on Stack Overflow
See other posts from Stack Overflow
or by Joe Lencioni
Published on 2010-03-01T22:22:24Z
Indexed on
2010/03/16
18:51 UTC
Read the original article
Hit count: 157
Using the HTML5 <canvas> element, I would like to load an image file (PNG, JPEG, etc.), draw it to the canvas completely transparently, and then fade it in. I have figured out how to load the image and draw it to the canvas, but I don't know how to change its opacity once it as been drawn.
Here's the code I have so far:
var canvas = document.getElementById('myCanvas');
if (canvas.getContext)
{
var c = canvas.getContext('2d');
c.globalAlpha = 0;
var img = new Image();
img.onload = function() {
c.drawImage(img, 0, 0);
}
img.src = 'image.jpg';
}
Will somebody please point me in the right direction like a property to set or a function to call that will change the opacity? Thanks!
© Stack Overflow or respective owner