Join Joe Marini for an in-depth discussion in this video Compositing and globalAlpha example, part of Learning HTML Canvas.
- [Instructor] Okay, so here in VS Code,…I've got the global alpha start file opened,…and let's first try out manipulating…the global alpha setting.…So here in the code, I already have a setting…for the context global alpha,…and it starts off at 1.0, and that's the default value.…But I'm going to explicitly set it anyway,…for purposes of illustration.…And then I have an array of eight rectangles,…all defined at different coordinates…so that they overlap each other.…So let's go ahead and get to drawing.…
I have a loop here…that's going to loop over each one of these rectangles…and then draw each one.…What I'm going to do is,…each time I perform the drawing operation,…I'm going to gradually reduce the global alpha setting.…So I'm going to write ctx.globalAlpha,…and I'm going to subtract off about 30% each time.…All right, so I'm going to save this,…and I'm going to load this in the browser.…So when we bring this up,…you can see that the rectangles start off…at a full opacity of 1.0,…but then they gradually get lighter and lighter…
- Canvas examples
- Drawing shapes, arcs, paths, and curves
- Drawing text
- Drawing shadows, patterns, and gradients
- Using clipping paths
- Displaying images and video
- Transforming objects with scaling and rotation
- Manipulating raw pixels
- Applying transitions
- Creating animations
Skill Level Intermediate
1. Overview of Canvas
2. Basic Canvas Drawing Techniques
3. Complex Canvas Drawing
4. Advanced Drawing APIs
5. Practical Examples
- Mark as unwatched
- Mark all as unwatched
Are you sure you want to mark all the videos in this course as unwatched?
This will not affect your course history, your reports, or your certificates of completion for this course.Cancel
Take notes with your new membership!
Type in the entry box, then click Enter to save your note.
1:30Press on any video thumbnail to jump immediately to the timecode shown.
Notes are saved with you account but can also be exported as plain text, MS Word, PDF, Google Doc, or Evernote.