From the course: Vanilla JavaScript: Animations

Unlock the full course today

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

Animating within the canvas

Animating within the canvas - JavaScript Tutorial

From the course: Vanilla JavaScript: Animations

Start my 1-month free trial

Animating within the canvas

“

- [Instructor] Animating within canvas is a bit different than animating DOM elements across the browser viewport. With canvas, we basically redraw the graphics. Using JavaScript at a determined interval. Changing where and how they are drawn in order to achieve a change in properties over time. The first thing we'll do is create a couple variables so right underneath context, let's paste in some bits from our snippets. So here we're defining the interval itself. So canvas interval. And again, just like with our DOM elements, we're using request animation frame. And we're passing in a function of canvas animation. This doesn't exist yet. But we'll write it pretty soon. The next thing we need to do is keep track of the circles X position because we're going to have it actually animate along the X-axis. So here we set that to 60. Which is how we're actually drawing out our arch in terms of the X position right now. The next step is to create the function canvas animation for request…

Contents