HTML5 Game - Canvas Transparent

  1. HOME
  2. HTML5 Game
  3. Canvas
  4. Transparent

Drawing transparent shapes

The following code show how to set shape transparencies using the global alpha composite.

Demo

ResultView the demo in separate window 

<html>
    <head>
        <script>
            window.onload = function(){
                let canvas = document.getElementById("myCanvas");
                let context = canvas.getContext("2d");
                //from   w w  w  . ja v a2s  .co m
               // draw rectangle 
             context.beginPath(); 
             context.rect(240, 30, 130, 130); 
             context.fillStyle = "blue"; 
             context.fill(); 


             // draw circle 
             context.globalAlpha = 0.5; // set global alpha 
             context.beginPath(); 
             context.arc(359, 150, 70, 0, 2 * Math.PI, false); 
             context.fillStyle = "red"; 
             context.fill(); 
    };   


        </script>
    </head>
    <body>
        <canvas id="myCanvas" width="600" height="250" style="border:1px solid black;">
        </canvas>
    </body>
</html>

Note

To set the opacity of a shape, use the globalAlpha property: 

context.globalAlpha=[value]

The globalAlpha property accepts real number between 0 and 1.

The globalAlpha property 1 makes shapes fully opaque.

The globalAlpha property 0 makes shapes fully transparent.

Related Topics