From the course: Learning HTML Canvas

Unlock the full course today

Join today to access over 22,600 courses taught by industry experts or purchase this course individually.

Basic animation

Basic animation

From the course: Learning HTML Canvas

Start my 1-month free trial

Basic animation

“

- [Instructor] Part of the fun of working with the canvas is learning how to do things like animation. In this example we're going to see how to use the canvas and some JavaScript to make a basic animation sequence. So first let's take a look at the finished example. So I'll open up SimpleAnim_finished in the browser, and you can see it's a very basic example. There's a canvas that's light blue with a square that has a yellow interior and a red stroke, that's just moving from left to right across the canvas. And when it disappears from view on the right, it reappears on the left, and the animation just repeats over and over. So let's see how to build this. In VS Code, I'm going to open up the SimpleAnim_Start and here at the top is some initialization logic. These variables contain the dimensions and starting point of the square, along with variables for the canvas and drawing context. So the rectX variable starts off as the negative value of the square's width, so it starts…

Contents