Join Joe Marini for an in-depth discussion in this video Drawing shadows, part of Learning HTML Canvas.
- [Instructor] So far, we've learned how to…to use the basic canvas drawing operations.…In this chapter, we're going to take a look at using…some of the more complex canvas drawing techniques,…starting with creating shadows.…The canvas drawing context provides four properties…that you can use to control how to draw shadows…on the canvas.…And all the drawing operations that take place…on the canvas are affected by these shadow attributes.…This includes paths, images, text, lines, and so on.…When you draw shadows, they can be colored,…they can be offset in both the x and the y direction…and they can have a blur value.…
The shadowColor property specifies the color to use…when drawing the shadow.…The offset X and offset Y properties…are pretty self-explanatory, they control…the horizontal and vertical offsets to the shadow.…They both default to zero.…And the shadowBlur property controls the level of blurring.…And that value does not correspond directly…to a pixel value, it just has to be larger…than zero to have any effect.…
- 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.