Related Articles

Related Articles

HTML | canvas globalAlpha Property
  • Last Updated : 30 Sep, 2019

The globalAlpha property is used to set or return the current alpha or transparency value of the drawing. The value must be a number between 0.0 to 1.0.
Here, 0.0 denotes fully transparent and 1.0 denotes no transparency. By default it is 1.0.

Syntax:

context.globalAlpha=number

Property values:

  • number: It is the value between 0.0 to 1.0.

Example:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<body>
    <h3 style="color:green">GeeksforGeeks</h3>
    <h3>HTML canvas globalalpha property</h3>
    <canvas id="myCanvas"
            width="200"
            height="200" 
            style="border:2px solid ;">
  </canvas>
  
    <script>
        var can = document.getElementById("myCanvas");
        var gfg = can.getContext("2d");
        gfg.fillStyle = "green";
        gfg.fillRect(50, 50, 95, 50);
  
        //Turn transparency on
        gfg.globalAlpha = 0.5;
        gfg.fillStyle = "green";
        gfg.fillRect(50, 100, 95, 50);
    </script>
  
</body>
  
</html>

chevron_right


Output:

Browsers supported:

  • Chrome
  • Internet Explorer 9.0
  • Safari
  • Firefox
  • Opera

full-stack-img

My Personal Notes arrow_drop_up
Recommended Articles
Page :