HTML Reference Manual

HTML tag大全

HTML canvas globalAlpha attribute

globalAlpha is a Canvas 2The D API is used to describe the attribute that sets the opacity of graphics and images before drawing on the canvas. The value range is from 0.0 (completely transparent) to1.0 (completely transparent).

HTML canvas Reference Manual

Online Example

First, draw a red rectangle, then set the opacity (globalAlpha) to 0.5Then draw a blue and green rectangle:

Example

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8>
<title>HTML canvas globalAlpha attribute usage-Basic Tutorial(w3(codebox.com)</<title>
</<head>
<body>
<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3>
Your browser does not support HTML5　canvas tag.
</canvas>
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="red";
ctx.fillRect(20,20,75,50);
//Convert opacity
ctx.globalAlpha=0.2;
ctx.fillStyle="blue";　
ctx.fillRect(50,50,75,50);　
ctx.fillStyle="green";　
ctx.fillRect(80,80,75,50);
</script>
</body>
</html>

Test it out ‹/›

Browser Compatibility

IEFirefoxOperaChromeSafari

Internet Explorer 9Firefox, Opera, Chrome, and Safari support the globalAlpha attribute.

Note:Internet Explorer 8 and earlier versions do not support the <canvas> element.

Definition and Usage

The globalAlpha attribute sets or returns the current alpha or transparency value of the graphics.

The globalAlpha attribute value must be between 0.0 (fully transparent) and1a number between .0 (no opacity) and

Default Value:	1.0
JavaScript Syntax:	context.globalAlpha=number;

Attribute Value

Value	Description
number	Transparency value. It must be between 0.0 (fully transparent) and 1between .0 (opaque).

　HTML canvas Reference Manual

HTML: <template> tag