Tutorials
Basics
Advanced
KineticJS
Three.js
Transformations
Translate
Scale
Rotate
Custom Transform
Shear
Mirror
Reset Transform
State Stack
Oval
Composites
Shadows
Global Alpha
Clipping Region
Operations
Image Data & URLs
Image Data
Invert Colors
Grayscale
Get Data URL
Load Data URL
Save Drawing
Animation
Clear Canvas
Animation Frames
Linear Motion
Acceleration
Oscillation
Start and Stop
Mouse Detection
Mouse Coordinates

HTML5 Canvas Global Alpha Tutorial

To set the opacity of elements with the HTML5 Canvas, we can set the globalAlpha property of the canvas context to a real number between 0 and 1, in which 0 is fully transparent and 1 is fully opaque.

Open in new window

Code Editor

< Shadows Clipping Region >

More Examples

2.2.3 HTML5 Canvas Global Composite Operations Tutorial
HTML5 Canvas Shape Tooltips
HTML5 Canvas Shape Events with KineticJS
HTML5 Canvas Shadow Tutorial
HTML5 Canvas KineticJS Rotation Animation Tutorial

Modified on April 9th, 2013 by Eric Rowell