How do I make a transparent canvas in HTML5?


The globalAlpha property returns the transparency value of drawing. The value 1.0 of this property specifies no transparency and the value 0.0 of this property specifies full transparency. Hence, by setting the globalAlpha property to 0.0, we can get a transparent canvas.

Example

You can try to run the following code to make a transparent canvas −

<!DOCTYPE html>
<html>
   <body>
      <canvas id = "idCanvas" width = "400" height = "200" style = "border:2px solid #000000;">
         Your browser does not support the HTML5 canvas tag.</canvas>
      <script>
         var c = document.getElementById("idCanvas");
         var ctx = c.getContext("2d");
         ctx.fillStyle = "green";
         ctx.fillRect(20, 20, 75, 50);
         ctx.globalAlpha = 0.0;
         ctx.fillStyle = "yellow";
         ctx.fillRect(50, 50, 75, 50);
         ctx.fillStyle = "red";
         ctx.fillRect(80, 80, 75, 50);
      </script>
   </body>
</html>

Updated on: 03-Mar-2020

3K+ Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements