globalAlpha property
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;
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>
See also
Show:

