globalAlpha property

Gets or sets the current alpha or transparency value that is applied to global composite rendering operations.

HTML Canvas 2D Context, Section 4Internet Explorer 9




p = object.globalAlpha


Property values

Type: number

Level of transparency. For example: ctx.globalAlpha = 0.7;

0.0 (fully transparent) to 1.0 (no transparency)

The alpha value.

1.0 (Default)

Standards information


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


<!DOCTYPE html>
    <title>Global Alpha example</title>
  <canvas id="MyCanvas" width="600" height="600">
     Canvas isn't supported for this document mode or version of the browser
        var canvas = document.getElementById("MyCanvas"); // Get the canvas element.
        if (canvas.getContext) // Test for support.
          var ctx = canvas.getContext("2d"); // Get the context to draw on.
        ctx.fillStyle = "red";  // Specify black as the fill color.  
        ctx.strokeStyle = "black";
          for (var i = 0; i < 1; i += .1) {
            ctx.globalAlpha = 1 - i;   // Reduce transparency as we loop 
            xyOffset = 25 + (i * 200);  // Calculate an offset of 20px
            ctx.fillRect(xyOffset, xyOffset, 200, 200);  // Create a filled rectangle.
            ctx.strokeRect(xyOffset, xyOffset, 200, 200); // Put an outline around it

See also