globalAlpha

Summary

An alpha value that is applied to shapes and images before they are composited onto the canvas.

Property of apis/canvas/CanvasRenderingContext2D apis/canvas/CanvasRenderingContext2D

Syntax

var result = CanvasRenderingContext2D.globalAlpha;
CanvasRenderingContext2D.globalAlpha = value;

Return Value

Returns an object of type NumberNumber

Default is 1.0.

Examples

The following example draws a semi-transparent white circle on a green background

function draw() {
  var ctx = document.getElementById('canvas').getContext('2d');
  // draw background
  ctx.fillStyle = '#FD0';
  ctx.fillRect(0,0,150,150)

  //set transparency value
  ctx.globalAlpha = 0.2;

  //Draw a semi transparent circle
  ctx.beginPath();
  ctx.arc(75,75,50,0,Math.PI*2,true);
  ctx.fill();
}

Notes

If you set the globalAlpha property to a value outside the range (including infinity or not a number (NaN)), the previous value is preserved.

Related specifications

W3C HTML Canvas 2D Specification: W3C Candidate Recommendation

Attributions

This article contains content originally from external sources, including ones licensed under the CC-BY-SA license.
Portions of this content copyright 2012 Mozilla Contributors. This article contains work licensed under the Creative Commons Attribution-Sharealike License v2.5 or later. The original work is available at Mozilla Developer Network: Article
Microsoft Developer Network: Windows Internet Explorer API reference Article