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);
});

function animate() {
  ctx.clearRect(0, 0, width, height);
  
  for (let i = 0; i < particles.length; i++) {
    const p = particles.at(i);
    
    /* Apply physics */
    p.vx *= p.friction;
    p.vy *= p.friction;
    p.vy += p.gravity;
    
    p.x += p.vx;
    p.y += p.vy;
    p.rotation += p.rotSpeed;
    
    /* Fade out over time */
    p.opacity -= 0.01;
    
    if (p.opacity > 0) {
      ctx.save();
      ctx.translate(p.x, p.y);
      ctx.rotate((p.rotation * Math.PI) / 180);
      ctx.fillStyle = p.color;
      ctx.globalAlpha = p.opacity;
      ctx.fillRect(-p.size / 2, -p.size / 2, p.size, p.size);
      ctx.restore();
    }
  }
  
  /* Filter out dead particles natively without array bracket syntax */
  while (particles.length > 0 && particles.at(0).opacity <= 0) {
    particles.shift();
  }
  
  window.requestAnimationFrame(animate);
}

animate();

Back to Snippets

Interactive Canvas Confetti Explosion JS

Reward your users with a physics-based confetti explosion. We built a high-performance HTML5 Canvas engine that bursts colorful particles wherever the user clicks.

134

#javascript

#css

#canvas

#confetti

#particles

#gamification

#physics

#click

/HTML *CSS ()JS Output Live Updates

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