Back to Snippets

Interactive Canvas Confetti Explosion JS

Click and 40 confetti pieces fire out from the cursor, arc over, then fall away and fade. There is no library involved, just a canvas and a requestAnimationFrame loop.

Each piece gets a random angle and speed, converted into velocity with cos and sin. That gives an even burst in every direction, unlike randomizing the x and y velocities separately, which quietly biases the spray toward the corners. Every frame multiplies velocity by a friction value and adds gravity to the vertical component.

Spin is drawn by translating the canvas to the particle position, rotating, then filling a rectangle around that origin. Faded particles are shifted off the front of the array, which is safe because they were pushed in age order. The loop keeps running when nothing is on screen, so cancel it with cancelAnimationFrame if battery life matters.

218

#javascript

#css

#canvas

#confetti

#particles

#gamification

#physics

#click

Run /HTML *CSS ()JS Output Console0 Live Updates Focus

const canvas = document.getElementById("confetti-canvas");
const ctx = canvas.getContext("2d");
const clickArea = document.getElementById("click-area");

let width = window.innerWidth;
let height = window.innerHeight;
canvas.width = width;
canvas.height = height;

window.addEventListener("resize", function() {
  width = window.innerWidth;
  height = window.innerHeight;
  canvas.width = width;
  canvas.height = height;
});

const particles = new Array();

function getConfettiColor() {
  const rand = Math.random();
  if (rand < 0.2) return "#3b82f6";
  if (rand < 0.4) return "#ec4899";
  if (rand < 0.6) return "#10b981";
  if (rand < 0.8) return "#f59e0b";
  return "#8b5cf6";
}

function spawnExplosion(x, y) {
  const count = 40;
  for (let i = 0; i < count; i++) {
    const p = new Object();
    p.x = x;
    p.y = y;
    p.color = getConfettiColor();
    p.size = Math.random() * 8 + 4;
    
    /* Random circular velocity */
    const angle = Math.random() * Math.PI * 2;
    const speed = Math.random() * 10 + 5;
    p.vx = Math.cos(angle) * speed;
    p.vy = Math.sin(angle) * speed;
    
    p.rotation = Math.random() * 360;
    p.rotSpeed = (Math.random() - 0.5) * 10;
    
    p.gravity = 0.3;
    p.friction = 0.96;
    p.opacity = 1;
    
    particles.push(p);
  }
}

clickArea.addEventListener("click", function(e) {
  spawnExplosion(e.clientX, e.clientY);
});

animate();

Interactive Canvas Confetti Explosion JS

Share Code Snippet