HTML canvas globalAlpha Property
Last Updated :
12 Jun, 2023
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:
<!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 >
|
Output:
Browsers supported:
- Chrome
- Internet Explorer 9.0
- Safari
- Firefox
- Opera
Share your thoughts in the comments
Please Login to comment...