clearRect（）撤消画布的透明度

Question

I have two canvases overlaid on top of each other like so:

 <canvas id="myCanvas" style="z-index: 1; position:absolute; left:0px; top:0px; " width="720" height="480"></canvas> <canvas id="trailCanvas" style="z-index: 0; position:absolute; left:0px; top:0px; " width="720" height="480"></canvas> 

But the problem is that when I call clearRect() on the top most canvas, like so:

  ctx.clearRect(0, 0, canvas.width, canvas.height); 

then it makes my topmost canvas look grey not transparent anymore! Isn't clearRect() supposed to make the whole canvas clear and transparent again? What's going on? Would really appreciate any help!

Edit: Realized my mistake was in the CSS:

  <style> * { padding: 0; margin: 0; } canvas { background: #eee; display: block; margin: 0 auto; } </style> 

which makes the canvas background grey instead of transparent.

Answer 1

As illustrated by this fiddle , clearRect successfully resets the alpha.

Chances are your problem has other sources, one of the most common being adding a background-color to a canvas in the CSS. To check for this, inspect the canvas with your devtools of choice, and see what the background properties are