Merry Christmas!

Merry Christmas everyone! Here is a CodePen of I whipped up to celebrate, a binary Christmas tree :)

See the Pen Binary Christmas Tree by Daniel Imms (@Tyriar) on CodePen

Creating a 'trail' effect in canvas

I put together a CodePen demonstrating a method for creating a 'trail' effect using canvas. The method involves drawing a slightly transparent rectangle over the canvas every time the program loops. This creates the fading gradient effect.

Check it out here.

This is a snippet of the loop, the important part.

function loop() {
  updatePosition();
  
  // Draw over the whole canvas to create the trail effect
  context.fillStyle = 'rgba(255, 255, 255, .05)';
  context.fillRect(0, 0, canvas.width, canvas.height);
  
  // Draw the dot
  context.beginPath();
  context.fillStyle = '#ff0000';
  context.moveTo(dot.x, dot.y);
  context.arc(dot.x, dot.y, 3, 0, Math.PI*2, true);
  context.fill();
}