How to change the opacity (alpha, transparency) of an element in a canvas element?

html canvas transparency opacity alpha

358,806

Solution 1

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.

Solution 2

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.

Solution 3

Edit: ~~The answer marked as "correct" is not correct.~~

It's easy to do. Try this code, swapping out "ie.jpg" with whatever picture you have handy:

<!DOCTYPE HTML>
<html>
    <head>
        <script>
            var canvas;
            var context;
            var ga = 0.0;
            var timerId = 0;
            
            function init()
            {
                canvas = document.getElementById("myCanvas");
                context = canvas.getContext("2d");
                timerId = setInterval("fadeIn()", 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 = "ie.jpg";
                
                ga = ga + 0.1;
                if (ga > 1.0)
                {
                    goingUp = false;
                    clearInterval(timerId);
                }
            }
        </script>
    </head>
    <body onload="init()">
        <canvas height="200" width="300" id="myCanvas"></canvas>
    </body>
</html>

The key is the globalAlpha property.

Tested with IE 9, FF 5, Safari 5, and Chrome 12 on Win7.

Solution 4

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<img.height;i++)
      for(var j=0;j<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 "shaders" - see full MDN article here

Solution 5

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';

View more solutions

358,806

Joe Lencioni

Aspiring minimalist.

Updated on December 25, 2021

Comments

Joe Lencioni over 2 years
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.

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?
Jech over 13 years

globalAlpha works perfectly. Is part of the standard: whatwg.org/specs/web-apps/current-work/multipage/…
Ryan Badour about 13 years

This is not the right answer see below
MPG about 13 years

You're correct, although you can't change the opacity of one of the elements you have drawn into the canvas, you can change the opacity of the entire canvas. In some cases that might be sufficient.
Steve Blackwell about 13 years

To be precise, it's not the canvas element that has the globalAlpha property, but the context that you get from the canvas.
Ian over 12 years

MPG - your comment (May 11) is also wrong. You can change the opacity of the canvas, but that's not what the OP wanted, nor what is being suggested in the answers above.
Filip Studený over 11 years

Ian's comment below about ctx.save() and ctx.restore() prevents the globalAlpha from affecting the rest of the canvas.
Chuck Kollars over 10 years

Seems to me rather than controlling the opacity of what's drawn on the canvas, it would be simpler and still serve the purpose to just control the opacity of the whole canvas itself after the image is drawn (just once). Use usual CSS/style methods to do this (canvaselement.style.opacity='0.3'; etc.) Later with CSS3 you can even dispense with the loop altogether and just let the browser handle the fading instead (something like- transition: NNNms opaciity ease-in-out), or even "animate" the fading.
Grumpy over 9 years

globalAlpha will blur all images or drawings on a canvas, that is not what you want.
Ian over 9 years

@Grumpy - no, globalAlpha doesn't blur anything. It will set the alpha for all subsequent drawing (it doesn't change anything already drawn), which is why in the example code I wrap it in save and restore, to limit what it applies to.
Oliver Dixon over 9 years

Changing global alpha screws up custom fonts btw. (Whyyyyyy)
WebWanderer over 9 years

Unfortunately, canvas2d.fillStyle = "rgba(255, 255, 255, 0.5)"; does not work. The value must be in hex.
Admin over 7 years

Did you or the docs do all of these conclusions that you concluded with? :D
Kenny Amaro over 7 years

thanks for global alpha edit, It was helpfully for me
Sean about 7 years

not sure that ctx.restore() will restore globalAlpha you might also need to do this at the end (at least I had to in earlier versions of Chrome) ctx.globalAlpha = 1;
Ian about 7 years

@Sean - If you're not sure, you should check. It must have been a very old Chrome, it works on all platforms now: jsfiddle.net/y0z9h9m7
cancerbero almost 5 years

wow that's an unfortunately value, with the rest of the channels being expressed as integers... thanks
BReddy about 4 years

How is this answer different from Soul_man's answer given with more detail 7 years before?
user1596274 over 3 years

It's the same solution, but I have to say this is so much cleaner and easier to read, so I'm glad it was added. Personally, I'd add "c" as an argument to the function too, so that you can use it with layered canvases or multiple canvasses in a document.