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

Syntax

JavaScript

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

Remarks

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

Examples


<!DOCTYPE html>
<html>
<head>
    <title>Global Alpha example</title>
</head>
<body>
  <canvas id="MyCanvas" width="600" height="600">
     Canvas isn't supported for this document mode or version of the browser
  </canvas>
      <script>
        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
          }
        }
    </script>
</body>
</html>


See also

CanvasRenderingContext2D
globalCompositeOperation

 

 

Show:
© 2014 Microsoft