Was this page helpful?
Your feedback about this content is important. Let us know what you think.
Additional feedback?
1500 characters remaining

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



object.put_globalAlpha(number v);object.get_globalAlpha(number* p);

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 ICanvasRenderingContext2D::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




Community Additions

© 2015 Microsoft