Join Joe Marini for an in-depth discussion in this video The canvas element, part of Learning HTML Canvas.
- [Narrator] The Canvas element provides…webpages with a place where they can draw…free-form graphics of all kinds.…Shapes, images, text, lines, even video.…It is supported in all the latest modern browsers…and fallback content is displayed…in a case where a browser does not support it.…You can think of canvas as a piece of paper on the webpage…where your code can draw anything it wants.…Webpages can have more than one canvas…and, in fact, you can even overlap them.…And one of the reasons why you might want to do this…is because canvases can have levels of transparency.…
So you might have one canvas that contains,…say, the background for a game,…and another canvas that has the characters in the game…and you can position them on top of each other.…So, unlike other media types such as images,…the contents of the canvas are created…on the fly using code.…The canvas content doesn't become part of the page DOM.…If you want to manipulate the structure of the drawing…then you have to take care of that yourself,…and because of this, the canvas element…
- 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.