Let's say that we have a circle that is moving from left to right. The way motion trails work is pretty simple. To kick your canvas skills up a few notches, everything you see here and more (with all its casual clarity!) is available in both paperback and digital editions. In the following sections, we'll learn all about how motion trails work and the handful of lines of JavaScript you need to bring them to life. It gives your circle an added sense of realism as it is moving around our canvas. The interesting thing is the motion trail our circle leaves behind as it is moving around. That is something you already know all about, so that isn't particularly interesting. The first thing to notice is that we have a circle that follows the mouse cursor. Move your mouse around in the following example: There are many names for this, but all the cool kids call it motion trails.Ĭomets are cool and all, but let's look at something closer to home.

Ignoring for a moment that we are looking at a real thing, this idea of indicating motion by leaving behind a trail is a very common animation technique.

The trail of gas and dust just behind the comet seems to indicate that the comet is moving in a left-to-right direction. Have you ever seen a comet or a meteor streaking across the sky? It looks something like this:įrom looking at this picture (of the Hyakutake Comet) can you tell what direction the comet is moving in? You can! The comet's tail holds the answer.

Canvas x trial