Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
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.
Get unlimited access to all courses for just $25/month.Become a member
82 Video lessons · 101370 Viewers
61 Video lessons · 88126 Viewers
71 Video lessons · 71965 Viewers
56 Video lessons · 103789 Viewers
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.
Your file was successfully uploaded.