How to Change the Opacity (Alpha, Transparency) of an Element in a Canvas Element

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

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.

JavaScript Canvas - change the opacity of image

You have to either change globalAlpha or draw the image to an off-screen canvas that has globalAlpha set, then draw this canvas onto the main canvas.

Just set alpha, draw the image and reset alpha back to full opacity. Setting alpha does not change the content that is already drawn to the canvas - it only applies to the next thing drawn (which would be the image in this case).

And of course, you can always prep your image with an alpha-channel in case of PNG images.

/// only image will have alpha affected:
context.globalAlpha = 0.5;
context.drawImage(image, x, y);
context.globalAlpha = 1.0;

Partially transparent (opacity) HTML5 Canvas drawings

Simply use rgba(r, g, b, a) (where a is your alpha transparency from 0 (completely transparent) to 1 (completely opaque):

myContext.fillStyle = "rgba(0, 0, 0, 0.5)";

Examples:

• https://developer.mozilla.org/samples/canvas-tutorial/4_4_canvas_rgba.html
• https://developer.mozilla.org/en/drawing_graphics_with_canvas

draw image with opacity on to a canvas

Use globalAlpha but make sure that you set it before drawing the image:

ctx.globalAlpha = 0.4;

HTML5 - Change opacity of a draw Rectangle

Use globalAlpha. You'll also have to draw with fillRect. clearRect just erases pixels. It can't partially erase so you'll have to use fillRect or other drawing primitives.

from w3schools.com:

    ctx.globalAlpha = 0.2;
    ctx.fillRect(50,50,75,50);
    ctx.globalAlpha = 1.0;

Transparency groups in CanvasRenderingContext2D

No, that's currently not possible without using an intermediate canvas.

Unless all of your draw operations in question can be combined into a single path, thereby using a single call to stroke() and fill(). I assume that's not the case here, but people searching later may be looking for that information.

// two rectangles composed into a single draw operation:
ctx.rect(0, 0, 10, 10);
ctx.rect(5, 5, 10, 10);
ctx.fill();

// With transparency, the above produces a different result from:
ctx.rect(0, 0, 10, 10);
ctx.fill();
ctx.rect(5, 5, 10, 10);
ctx.fill();

canvas clearrect, with alpha

I just tried to figure this out too, and I've decided to count through the pixels, setting the alpha channel of each one manually. This is a bit more work, because I can't just cover the entire canvas with a rect, but it's working so far.

I'm doing this so that I can set a background image for the webpage and put my canvas animation over it, without having to draw the background in the canvas element.

var oldArray = context.getImageData(0,0,canvas.width,canvas.height);
//count through only the alpha pixels
for(var d=3;d<oldArray.data.length;d+=4){
    //dim it with some feedback, I'm using .9
    oldArray.data[d] = Math.floor(oldArray.data[d]*.9);
}
sw.context.putImageData(oldArray,0,0);

Adding transparency/alpha to canvas overwriting existing color

What worked for me now is creating a second canvas, painting my objects there and merging them into the original canvas with drawImage:

const c2 = createCanvas(WIDTH, HEIGHT);
const ctx2 = c2.getContext("2d");

ctx2.fillStyle = "yellow";

ctx2.beginPath();
ctx2.arc(WIDTH / 2, HEIGHT / 2, HEIGHT / 4, 0, 2 * Math.PI);
ctx2.fill();

ctx2.globalCompositeOperation = "destination-out";

ctx2.beginPath();
ctx2.arc(WIDTH / 2 + 30, HEIGHT / 2 - 15, HEIGHT / 4, 0, 2 * Math.PI);
ctx2.fill();

ctx.drawImage(c2, 0, 0); // merging the canvas, not its context!

How do I make a transparent canvas in html5?

Canvases are transparent by default.

Try setting a page background image, and then put a canvas over it. If nothing is drawn on the canvas, you can fully see the page background.

Think of a canvas as like painting on a glass plate.

To clear a canvas after having drawn on it, just use clearRect:

const context = canvas.getContext('2d');
context.clearRect(0, 0, canvas.width, canvas.height);

---

Related Topics