From the course: Creating Web Media

Unlock this course with a free trial

Join today to access over 22,600 courses taught by industry experts.

Animate an HTML canvas

Animate an HTML canvas - CSS Tutorial

From the course: Creating Web Media

Start my 1-month free trial Buy for my team

Animate an HTML canvas

“

- [Instructor] Hi, this is Chris Converse and in this episode we'll be building on a previous episode where we combined two images together using the HTML five canvas element and so starting from there, we're going to create a second instance of the clouds image and move the images together seamlessly to create a looping animation. So if you'd like to follow along, download the exercise files and we'll begin by opening the HTML file in the text editor and so once you have the HTML file open we're going to scroll down here. We have a script in place that we created in an earlier episode, so down here we defined a canvas element, we defined the context and two of the images, and then we created a draw image function where we drew the two images to the canvas. So starting from there what we're going to do is before the draw image function let's come in here and declare two more variables. First one's going to be clouds one position, so var clouds underscore one underscore position. We're…

Contents