html tutorial - globalAlpha Property in HTML5 Canvas - html5 - html code - html form

Learn html - html tutorial - Globalalpha property in html5 canvas - html examples - html programs

The globalAlpha property sets the current alpha or transparency value of the drawing.
The globalAlpha property value should be a number between 0.0 (fully transparent) and 1.0 (no transparency).

Syntax for globalAlpha Property in HTML5 Canvas:

context.globalAlpha="number";

Property values for globalAlpha Property in HTML5 Canvas:

Values	Description
number	Specifies the transparency value and must be a number between 0.0 (fully transparent) and 1.0 (no transparency)

Sample Coding for globalAlpha Property in HTML5 Canvas:

Tryit<!DOCTYPE html>
<html>
    <head>
        <title>Wikitechy HTML Canvas globalAlpha Property</title>
    </head>
    <body>
        <h1>Wikitechy HTML Canvas globalAlpha Property</h1>
        <canvas id="wikitechyCanvas" width="300" height="180"  
           style="border:2px solid green;">
        </canvas>
        <script>
            var ga = document.getElementById("wikitechyCanvas");
            var gax= ga.getContext("2d");
            gax.fillStyle = "blue";
            gax.fillRect(40, 40, 85, 60); 

            gax.globalAlpha = 0.1;
            gax.fillStyle = "black";
            gax.fillRect(80, 80, 85, 60);
            gax.fillStyle = "red";
            gax.fillRect(100, 100, 85, 60);
        </script>
    </body>
</html>

Code Explanation for globalAlpha Property in HTML5 Canvas:

globalAlpha Property in HTML5 canvas Code Explanation

“Wikitechy canvas” is used to declare the id value of the canvas tag.
The getElementById() method is used to get the canvas element with the specific id (“wikitechyCanvas”).
gax.getContext() returns an object that provides method and properties for drawing on the canvas.
gax.fillstyle() method is used to set the color to fill the drawing.
gax.fillRect() method is used to draws a "filled" rectangle (30, 30, 85, 60);
gax.globalAlpha=0.1 returns the transparency value of the drawing.

Output for globalAlpha Property in HTML5 Canvas:

globalAlpha Property in HTML5 canvas Output

The canvas rectangle with green color border.
Define a blue-color for the rectangle.
First, draw a blue rectangle. Then set the transparency (globalAlpha) to 0.1 and draw a black and red rectangle.