A blurred photograph of train rails in a tunnel

One of the common frustrations in looping through iterable elements in JavaScript is that they typically take a not-insignificant amount of time to setup: a classical for loop takes a variable, an iterator and a condition just to get started.

JavaScript’s new for…of loop has a native understanding of iterable structures, removing the need for much of that preparation and allowing you to get right to manipulating data.

A man framed in an open window

The canvas tag is an arbitrary area that functions as a drawing surface. Unlike , the Canvas API doesn’t create induvidual addressable elements; instead, it writes to the drawing area pixel by pixel using .

While this can make drawing on the canvas more of a challenge for new coders, it also makes it very fast in execution: once you have a handle on the basics, fantastic interactive effects can be coded quite easily. This feature also makes the Canvas API an excellent medium for modern web apps, games, and advanced options like 3D and VR.

In the previous article I demonstrated how to make an element rotate to follow the position of a cursor or a touch on the screen. At the time, I explained that the technique was not necessarily limited to a single element: in this article, I'll show how to apply the code to two elements simultaneously, in the form of eyes that follow the mouse / touch position; you can also see the code at the associated CodePen demo.