134

How can I make a canvas transparent? I need to because I want to put two canvases on top of one another.

BlueTalon
  • 27
  • 9
Urmelinho
  • 1,637
  • 2
  • 12
  • 22

7 Answers7

210

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.

Lee Taylor
  • 6,091
  • 14
  • 26
  • 43
Omiod
  • 10,106
  • 9
  • 49
  • 57
  • 6
    Canvas has a black background on mobile so layering canvases doesn't work there. (At least on Chrome for Android) – nicholeous Jul 06 '15 at 23:25
  • 11
    So much for standards, as usual. – Triynko Aug 07 '15 at 17:49
  • 8
    I think these answers are missing the point. Similar to the above question, I want to have two layered canvases: the bottom one has a static image, but the top one will have animated sprites. This top layer needs to have a transparent background, but also has to be 'cleared' and redrawn with every animation frame. Yes, it starts transparent by default, but how do you reset it to transparent and the start of every new animation frame? – J Sprague Oct 17 '15 at 04:14
  • 3
    This is how to clear a canvas anytime : http://stackoverflow.com/questions/2142535/how-to-clear-the-canvas-for-redrawing – Omiod Oct 18 '15 at 09:35
  • Since you got soo many upvotes Can you at least answer the question too? How do you make a non transparent canvas transparent? – DDD May 23 '17 at 15:02
  • I ran into problems because I was using instead of . Only the latter works. – Qaz Feb 02 '21 at 07:13
53

I believe you are trying to do exactly what I just tried to do: I want two stacked canvases... the bottom one has a static image and the top one contains animated sprites. Because of the animation, you need to clear the background of the top layer to transparent at the start of rendering every new frame. I finally found the answer: it's not using globalAlpha, and it's not using a rgba() color. The simple, effective answer is:

context.clearRect(0,0,width,height);
J Sprague
  • 888
  • 10
  • 14
49

Iif you want a particular <canvas id="canvasID"> to be always transparent you just have to set

#canvasID{
    opacity:0.5;
}

Instead, if you want some particular elements inside the canvas area to be transparent, you have to set transparency when you draw, i.e.

context.fillStyle = "rgba(0, 0, 200, 0.5)";
stecb
  • 13,412
  • 2
  • 47
  • 66
4

Just set the background of the canvas to transparent.

#canvasID{
    background:transparent;
}
Community
  • 1
  • 1
Marcel Bomfim
  • 103
  • 1
  • 8
  • 1
    This answer does not work in all situations, context.clearRect(0, 0, width, height) is the solution that worked for me – Dmitriy Mar 14 '19 at 00:27
2

Paint your two canvases onto a third canvas.

I had this same problem and none of the solutions here solved my problem. I had one opaque canvas with another transparent canvas above it. The opaque canvas was completely invisible but the background of the page body was visible. The drawings from the transparent canvas on top were visible while the opaque canvas below it was not.

Chris
  • 2,636
  • 1
  • 25
  • 33
0

Can't comment the last answer but the fix is relatively easy. Just set the background color of your opaque canvas:

#canvas1 { background-color: black; } //opaque canvas
#canvas2 { ... } //transparent canvas

I'm not sure but it looks like that the background-color is inherited as transparent from the body.

1000Gbps
  • 969
  • 1
  • 21
  • 32
0

fillStyle might not be what you are looking for because it can't really clear the canvas; it will either paint it with a solid color or with a transparent color which doesn't paint anything.

The trick that did for me relies on an implementation detail about the <canvas></canvas>. They "reset" when resized (tested on Chrome and Firefox):

canvas.width = canvas.width

This phenomenon initially struck me as a very annoying behavior, but it also became the only way I know to hard reset the canvas.

Samuel
  • 911
  • 12
  • 24