Usando o <canvas>
elemento HTML5 , eu gostaria de carregar um arquivo de imagem (PNG, JPEG, etc.), desenhá-lo na tela de forma completamente transparente e depois desbotá-lo. Eu descobri como carregar a imagem e desenhá-la no tela, mas não sei como alterar sua opacidade depois de desenhada.
Aqui está o código que tenho até agora:
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';
}
Alguém por favor me apontará na direção certa como uma propriedade para definir ou uma função para chamar que mudará a opacidade?