Start learning with our library of video tutorials taught by experts. Get started
Viewers: in countries Watching now:
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.
And you can see, as I switch among the months, the chart is changing to show various different data sets, and you can see that there is a little animation step that happens in there. Let's go back to the first one. Here is a really cool example called a Polar Clock, and this is using canvas to draw a clock that is drawn using circles. So, you can see each one of these rings is color-coded and the color-coded rings correspond to the text up here. So the blue ring is the hours, the gray is the minutes. You can see the second hand is out here. Then the date is shown in the two interior rings in different shades of green.
So, it is now April 26 and you can see that this clock is just an interesting way of using the canvas to draw something that we take for granted every day, such as clocks on the wall. And let's take a look at one more example. This here is an example of using the canvas to rotate a pre-drawn image. This is an actual JPEG image that's drawn onto the canvas, and using these controls, I can rotate it. You can see that there is little animation that goes along that as well. You can see, it starts off slow, speeds up, and then slows down, using easing.
These are all kind of things that used to require plug-ins and are now provided to you as part of canvas in HTML5.
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.