Start learning with our library of video tutorials taught by experts. Get started
Viewed by members. in countries. members currently watching.
One of the most exciting additions that HTML5 offers to designers is the ability to draw free-form graphics on a drawing surface known as the Canvas. In this course, author Joe Marini introduces the technical concepts behind Canvas and shows how to perform drawing operations directly in a web page. The course covers drawing basic and complex shapes, setting colors and styles, adding shadows, patterns, and gradients, more advanced techniques such as scaling, rotating, and compositing objects, and how to incorporate Canvas elements in a slideshow and an animation.
If you are a Premium member of the lynda.com Online Training Library, or if you're watching this tutorial on a DVD-ROM, you have access to the exercise files used throughout this course. So let me show you how they're laid out. Here we are in the Exercise Files folder. The way I have laid it out is each folder is named with a two-digit number at the beginning, and that corresponds to the chapter that we're currently looking at in the course. And the name that follows the number is just a little hint of what's contained inside. So if we open up one of these chapters, you'll see that way I've laid out each example file, there's two versions of each file: there's a finished version and there's a start version.
The finished version is the particular tutorial in its finished state. That's what I'll be showing at the end of each one of the tutorials. The start version is the same as the finished version but with key pieces of code removed. And what we'll do is any tutorial, we'll start with the starting point, add the code until we reach the same point as the finished version. So you really have your choice: you can either open up the finished version and see how things work and run it for yourself, or you can follow along with me as we build the start version until it reaches the finishing point.
In addition to each one of the tutorials, I've also included a file called ExampleSnippets. Let's go to the code editor and see what that looks like. This is the snippets file that I've included for this course. So each one of these chapters has various code snippets that I add to the starting point for each one of the tutorials. This way, I just simply copy the code and paste it into the starting point, so you don't have to sit there and watch me type. So I'll be doing things like copying this piece of code, putting it into the starting point, showing it in the browser, and so on. Now this ExampleSnippets file, you'll have access to this as a free downloadable tutorial file directly from the online course page, even if you're not a Premium member of the lynda.com Online Training Library.
If you are a Monthly subscriber or Annual subscriber to lynda.com, you don't have access to the exercise files, other than that ExampleSnippets file that I just showed. But you can follow along from scratch with your own assets. All right! Let's get started.
There are currently no FAQs about HTML5: Graphics and Animation with Canvas.
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.