Teach with us

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 12:43:23

0 Views

Tutorials Point

Previous Page Next Page  
Advertisements