Search code examples
htmlcanvas

How do I make a transparent canvas in html5?

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

Solution

  • 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);