I came across an interesting interaction that reminded me of the older web the other day. As a user moved their mouse cursor around, there would be a trail of something that followed it. I was intrigued and wanted to see how/what it worked, so I opened up the dev console for the website (Synchronized Digital Studio) and after poking around a bit, I realized that it wasn't just a plain old <div> that had some special handling. It was <canvas>, which I had never worked with before.

Using a combination of <canvas> and requestAnimationFrame(), I was able to recreate the interaction.

The idea is to attach an event listener for mouse movement to add a new Point to an array that holds the position of the user's movement.

const canvas = document.querySelector('canvas')
const ctx = canvas.getContext('2d')
class Point {
constructor(x, y) {
this.x = x
this.y = y
this.timestamp = 0
const points = []
const addPoint = (x, y) => {
const point = new Point(x, y)
document.addEventListener('mousemove', ({ clientX, clientY }) => {
addPoint(clientX - canvas.offsetLeft, clientY - canvas.offsetTop)

Next, using requestAnimationFrame, on each frame, clear the canvas, loop over each point and either

  1. Remove the point if enough time has passed (maxAgeMS)
  2. Draw the point and connect it to the previous point
ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height)
const maxAgeMS = 160
for (let i = 0; i < points.length; i++) {
const currentPoint = points[i]
let previousPoint
if (points[i - 1] !== undefined) {
previousPoint = points[i - 1]
} else {
previousPoint = currentPoint
if (!currentPoint.timestamp) {
currentPoint.timestamp = timestamp
const elapsed = timestamp - currentPoint.timestamp
if (elapsed > maxAgeMS) {
} else {
ctx.lineJoin = 'round'
ctx.lineWidth = 4
ctx.strokeStyle = `rgb(152,236,60)`
ctx.moveTo(previousPoint.x, previousPoint.y)
ctx.lineTo(currentPoint.x, currentPoint.y)

Rinse and repeat for each frame, and this is what I ended up with: