How to change the opacity alpha transparency of an element in a canvas element after it has been drawn

Question

Using the HTML5  lt canvas gt  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

User · Accepted Answer

I am also looking for an answer to this question, (to clarify, I want to be able to draw an image with user defined opacity such as how you can draw shapes with opacity) if you draw with primitive shapes you can set fill and stroke color with alpha to define the transparency. As far as I have concluded right now, this does not seem to affect image drawing.

//works with shapes but not with images
ctx.fillStyle = "rgba(255, 255, 255, 0.5)";

I have concluded that setting the globalCompositeOperation works with images.

//works with images
ctx.globalCompositeOperation = "lighter";

I wonder if there is some kind third way of setting color so that we can tint images and make them transparent easily.

EDIT:

After further digging I have concluded that you can set the transparency of an image by setting the globalAlpha parameter BEFORE you draw the image:

//works with images
ctx.globalAlpha = 0.5

If you want to achieve a fading effect over time you need some kind of loop that changes the alpha value, this is fairly easy, one way to achieve it is the setTimeout function, look that up to create a loop from which you alter the alpha over time.

User · Answer

This suggestion is based on pixel manipulation in canvas 2d context  From MDN   You can directly manipulate pixel data in canvases at the byte level  To manipulate pixels we ll use two functions here - getImageData and putImageData  getImageData usage  var myImageData   context getImageData left  top  width  height    The putImageData syntax  context putImageData myImageData  x  y     Where context is your canvas 2d context  and x and y are the position on the canvas  So to get red green blue and alpha values  we ll do the following  var r   imageData data   x  imageData width 4      y 4     var g   imageData data   x  imageData width 4      y 4     1   var b   imageData data   x  imageData width 4      y 4     2   var a   imageData data   x  imageData width 4      y 4     3    Where x is the horizontal offset  y is the vertical offset  The code making image half-transparent  var canvas   document getElementById  myCanvas    var c   canvas getContext  2d    var img   new Image    img onload    function        c drawImage img  0  0      var ImageData   c getImageData 0 0 img width img height      for var i 0 i lt img height i          for var j 0 j lt img width j             ImageData data   i  img width 4      j 4    3     127   opacity   0 5  0-255     c putImageData ImageData 0 0    put image data back   img src    image jpg    You can make you own  quot shaders quot  - see full MDN article here

User · Answer

You can t  It s immediate mode graphics  But you can sort of simulate it by drawing a rectangle over it in the background color with an opacity    If the image is over something other than a constant color  then it gets quite a bit trickier  You should be able to use the pixel manipulation methods in this case  Just save the area before drawing the image  and then blend that back on top with an opacity afterwards

User · Answer

I think this answers the question best  it actually changes the alpha value of something that has been drawn already  Maybe this wasn t part of the api when this question was asked  Given 2d context c  function reduceAlpha x  y  w  h  dA        let screenData   c getImageData x  y  w  h       for let i   3  i  lt  screenData data length  i  4           screenData data i  -  dA    delta-Alpha           c putImageData screenData  x  y

User · Answer

Some simpler example code for using globalAlpha   ctx save    ctx globalAlpha   0 4  ctx drawImage img  x  y   ctx restore      If you need img to be loaded   var img   new Image    img onload   function         ctx save        ctx globalAlpha   0 4      ctx drawImage img  x  y       ctx restore      img src    http           Notes    Set the  src  last  to guarantee that your onload handler is called on all platforms  even if the image is already in the cache  Wrap changes to stuff like globalAlpha between a save and restore  in fact use them lots   to make sure you don t clobber settings from elsewhere  particularly when bits of drawing code are going to be called from events

User · Answer

If you use jCanvas library you can use opacity property when drawing  If you need fade effect on top of that  simply redraw with different values

User · Answer

You can  Transparent canvas can be quickly faded by using destination-out global composite operation  It s not 100  perfect  sometimes it leaves some traces but it could be tweaked  depending what s needed  i e  use  source-over  and fill it with white color with alpha at 0 13  then fade to prepare the canvas       Fill canvas using  destination-out  and alpha at 0 05 ctx globalCompositeOperation    destination-out   ctx fillStyle    rgba 255  255  255  0 05    ctx beginPath    ctx fillRect 0  0  width  height   ctx fill       Set the default mode  ctx globalCompositeOperation    source-over

User · Answer

Edit  The answer marked as  quot correct quot  is not correct  It s easy to do   Try this code  swapping out  quot ie jpg quot  with whatever picture you have handy   lt  DOCTYPE HTML gt   lt html gt       lt head gt           lt script gt              var canvas              var context              var ga   0 0              var timerId   0                           function init                                 canvas   document getElementById  quot myCanvas quot                    context   canvas getContext  quot 2d quot                    timerId   setInterval  quot fadeIn   quot   100                                          function fadeIn                                 context clearRect 0 0  canvas width canvas height                   context globalAlpha   ga                  var ie   new Image                    ie onload   function                                         context drawImage ie  0  0  100  100                                      ie src    quot ie jpg quot                                    ga   ga   0 1                  if  ga  gt  1 0                                        goingUp   false                      clearInterval timerId                                            lt  script gt       lt  head gt       lt body onload  quot init   quot  gt           lt canvas height  quot 200 quot  width  quot 300 quot  id  quot myCanvas quot  gt  lt  canvas gt       lt  body gt   lt  html gt   The key is the globalAlpha property  Tested with IE 9  FF 5  Safari 5  and Chrome 12 on Win7

[html] How to change the opacity (alpha, transparency) of an element in a canvas element after it has been drawn?

Examples related to html

Examples related to canvas

Examples related to transparency

Examples related to opacity

Examples related to alpha