HTML canvas globalAlpha Property |

-- Learning is not just about technology, but also about dreams!

JavaScript Reference

Overview

JavaScript Objects

Browser Objects

DOM Objects

HTML Objects

HTML DOM Button Object

<col>

Explore Further

Programming Languages
Programming
Software
Web Services
Web Design and Development
Scripting
Web Service
Scripting Language
Computer Science
Development Tools

HTML canvas globalAlpha Property

Canvas Object Reference Canvas Object

Example

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

Your browser does not support the HTML5 canvas tag.

JavaScript:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="red";
ctx.fillRect(20,20,75,50);
// Turn transparency on
ctx.globalAlpha=0.2;
ctx.fillStyle="blue"; 
ctx.fillRect(50,50,75,50); 
ctx.fillStyle="green"; 
ctx.fillRect(80,80,75,50);

Try it yourself »

Browser Support

Internet Explorer Firefox Opera Google Chrome Safari

The globalAlpha property is supported in Internet Explorer 9, Firefox, Opera, Chrome, and Safari.

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

Definition and Usage

The globalAlpha property sets or returns the current transparency value (alpha or transparency) for drawing.

The globalAlpha property value must be a number between 0.0 (fully transparent) and 1.0 (fully opaque).

Default value:	1.0
JavaScript syntax:	context.globalAlpha=number;

Property Values

Value	Description
number	The transparency value. Must be between 0.0 (fully transparent) and 1.0 (fully opaque).