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.
A really great example of using HTML5 canvas to produce some really cool effects is a site called thewildernessdowntown.com. And this is a pretty immersive site built by Arcade Fire and some other folks. I am running this in Google Chrome. It's actually pretty cool! You type in the address of a place and then the site builds a sort of customized music video around the location you give it, complete with some interesting HTML5 canvas effects.
You can see the birds are being chased away by my mouse over here. That's actually pretty cool. All this is HTML5 that you are seeing right now. So, let's give it an address, and I'm going to use the address of lynda.com's recording studio, and we are here in beautiful Ventura, California. I am going to click Search. Okay, so now it's going to go build out that music video. Right, we are ready to go, so we can play the film. So, now as you're watching the movie, I am going to point out some of the canvas effects that are happening.
(music playing) First, you see the video come up. (video playing) This is being accomplished right now via HTML5 video. (video playing) So, now here is an example of the canvas being used to draw the birds flying around the sky up there, those guys right here.
You can see they are still responding to my mouse. (video playing) (video playing) So, now here is the combination. We have a video that's using an image that's been pulled from the Google Earth service. Those birds you see being drawn there are drawn using HTML5 canvas and you can see that there are various windows coming and going.
This is the HTML5 canvas being used to render an image. You saw it there, and it was faded out a little bit to make it look like it was a bit old. You can see the effect over there. So, the colors have been sort of washed out a little bit using the canvas effects. (video playing) You can see the image is now being rotated. There is some more canvas with our location.
You can see that as he's turning around the video down there, it is synchronized with the video up top. (video playing) That's pretty much it. That's a pretty great use of canvas.
You can see here that at the end it gives you an opportunity to write a little postcard to yourself and the contents here are drawn using HTML5 canvas, really great example of using canvas technologies to augment existing media, like video and audio and different windows, and just a nice immersive experience.
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.