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:

- “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:

- 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.
Browser Support for globalAlpha Property in HTML5 Canvas:
![]() |
![]() |
![]() |
![]() |
![]() |
---|---|---|---|---|
Yes | 9.0 | Yes | Yes | Yes |