From the course: Learning HTML Canvas
Join today to access over 22,600 courses taught by industry experts or purchase this course individually.
Double-buffered animation
- [Instructor] In this example we're going to see how to create smooth animation using a technique known as double buffering. This technique involves using two different canvases. All of the drawing takes place on an offscreen canvas before it is copied to the onscreen canvas, and by doing so the code ensures that everything is in place before the result is displayed to the viewer. So let's take a look at the example that we're going to build. So here in the browser I'm going to bring up my finished example and you can see that what we have here is a nighttime sky with snowflakes of various sizes falling at various speeds and randomly drifting from left to right. This example uses double buffering animation, so all the snowflakes are being animated on a canvas that you can't see off the screen and then each frame as its completed is copied onto a visible canvas here in the page. Okay, so let's go to the code to see how this is done. So here in VS Code I'm going to open up the…
Practice while you learn with exercise files
Download the files the instructor uses to teach the course. Follow along and learn by watching, listening and practicing.
Download courses and learn on the go
Watch courses on your mobile device without an internet connection. Download courses using your iOS or Android LinkedIn Learning app.