html5-canvas Change opacity with "globalAlpha"


Example

context.globalAlpha=0.50

You can change the opacity of new drawings by setting the globalAlpha to a value between 0.00 (fully transparent) and 1.00 (fully opaque).

The default globalAlpha is 1.00 (fully opaque).

Existing drawings are not affected by globalAlpha.

// draw an opaque rectangle
context.fillRect(10,10,50,50);

// change alpha to 50% -- all new drawings will have 50% opacity
context.globalAlpha=0.50;

// draw a semi-transparent rectangle
context.fillRect(100,10,50,50);