Export (0) Print
Expand All

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




© 2015 Microsoft