globalAlpha property

Article
05/02/2017

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

Syntax

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

HTML Canvas 2D Context, Section 4

Remarks

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.

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>

Share via