Join Joe Marini for an in-depth discussion in this video Double-buffered animation, part of Learning HTML Canvas.
- [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 DBAnim_start file,…and similar to the previous examples…
- Canvas examples
- Drawing shapes, arcs, paths, and curves
- Drawing text
- Drawing shadows, patterns, and gradients
- Using clipping paths
- Displaying images and video
- Transforming objects with scaling and rotation
- Manipulating raw pixels
- Applying transitions
- Creating animations
Skill Level Intermediate
1. Overview of Canvas
2. Basic Canvas Drawing Techniques
3. Complex Canvas Drawing
4. Advanced Drawing APIs
5. Practical Examples
- Mark as unwatched
- Mark all as unwatched
Are you sure you want to mark all the videos in this course as unwatched?
This will not affect your course history, your reports, or your certificates of completion for this course.Cancel
Take notes with your new membership!
Type in the entry box, then click Enter to save your note.
1:30Press on any video thumbnail to jump immediately to the timecode shown.
Notes are saved with you account but can also be exported as plain text, MS Word, PDF, Google Doc, or Evernote.