- [Instructor] Before we dive-in…and start writing our own code,…let's take a look around the web…at some good examples of apps…that use the Canvas element.…It probably won't surprise you that many…of the examples you're going to find…will be games.…And we'll start with one here called…Pirates Love Daisies.…And you can find this at Pirateslovedaisies.com.…It's a fairly typical tower defense game.…If you've ever played a game…like Plants vs. Zombies, for example,…it's basically just like that.…So when I load this in the browser,…you can see that there's a splash screen…that comes up for loading.…
And I can blow the daisies around.…Some intro music.…(bright music)…And when the game starts,…I'm presented with a fairly typical…game user interface.…So I'll let you explore this example…as an exercise.…It's actually a pretty cute little game…that's fun to play.…Another interesting game that uses Canvas…is this one.…It's called Sinuous.…And it's available at sinuousgame.com.…It's fairly simple, and the object of the game…is just to avoid these red dots,…
- 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.