How do I create a fireworks explosion effect in HTML5 Canvas JavaScript?

To create a fireworks explosion in HTML5 Canvas JavaScript: (1) Create a Firework class that launches from the bottom: this.y = canvas.height; this.targetY = clickY. (2) Move it upward each frame: this.y -= this.speed. (3) When it reaches targetY, call this.explode(). (4) In explode(), create 80-140 Particle objects in a circle: for (let i = 0; i < count; i++) { const angle = (Math.PI * 2 * i) / count; const vx = Math.cos(angle) * velocity; const vy = Math.sin(angle) * velocity; }. (5) In each Particle.update(): apply friction (velocityX *= 0.98), gravity (velocityY += 0.08), move (x += velocityX), and fade (alpha -= 0.008). (6) Create fading trail: ctx.fillStyle = 'rgba(0,0,0,0.1)'; ctx.fillRect(0,0,canvas.width,canvas.height) each frame. (7) Animate with requestAnimationFrame. The Coodeverse Fireworks demo is a complete free example.

How do I add a rocket trail effect to a canvas animation in JavaScript?

To add a rocket trail effect in Canvas JavaScript: (1) Store past positions in a trail array: this.trail = []. (2) Each frame push current position: this.trail.push({ x: this.x, y: this.y }). (3) Limit trail length: if (this.trail.length > 15) this.trail.shift(). (4) Draw each trail point with decreasing opacity: this.trail.forEach((point, i) => { ctx.globalAlpha = i / this.trail.length; ctx.arc(point.x, point.y, 5, 0, Math.PI * 2); ctx.fill(); }). (5) Reset: ctx.globalAlpha = 1 after drawing. (6) Add glow: ctx.shadowBlur = 20; ctx.shadowColor = this.color. The trail length divided by index creates a natural fade — oldest point is most transparent.

How do I apply gravity and friction to canvas particles in JavaScript?

To apply realistic gravity and friction to canvas particles: (1) Give each particle velocity: this.velocityX = vx; this.velocityY = vy. (2) Friction (air resistance): this.velocityX *= 0.98; this.velocityY *= 0.98. Multiply by a value slightly less than 1 each frame to gradually slow particles. (3) Gravity: this.velocityY += 0.08. Add a small positive value to Y velocity each frame so particles arc downward. (4) Move: this.x += this.velocityX; this.y += this.velocityY. (5) Fade: this.alpha -= 0.008. (6) Remove when invisible: if (particle.alpha <= 0) remove it. The combination of friction + gravity creates realistic ballistic arcs exactly like real fireworks particles.

How do I draw a heart shape in HTML5 Canvas JavaScript?

To draw a heart shape in Canvas JavaScript using the parametric equation: for (let t = 0; t < Math.PI * 2; t += 0.1) { const x = 16 * Math.pow(Math.sin(t), 3); const y = -(13 * Math.cos(t) + 5 * Math.cos(2*t) + 2 * Math.cos(3*t) + Math.cos(4*t)); }. This gives normalized coordinates -16 to 16 on x and -17 to 13 on y. Scale by multiplying: x * scale, y * scale. In the fireworks demo, these coordinates are used as velocity vectors: vx = x * 0.1 to create particles that fly outward in a heart shape. Add random noise: (Math.random() - 0.5) * 3 for organic variation. Trigger with 15% probability: if (Math.random() < 0.15).

How do I add glow effects to canvas particles in JavaScript?

To add glow/bloom effects to Canvas particles: (1) Before drawing: ctx.save(). (2) Set glow: ctx.shadowBlur = 20; ctx.shadowColor = this.color. (3) Draw the particle: ctx.arc(x, y, radius, 0, Math.PI * 2); ctx.fill(). (4) Restore: ctx.restore(). The shadowBlur creates a soft bloom around the shape — higher values (30-50) for rockets, lower (15-20) for particles. ctx.save() and ctx.restore() are crucial to prevent glow leaking into subsequent drawings. For multi-layered glow, draw the same circle twice: once large and faded for the halo, once small and bright for the core.

How do I add touch support to a canvas click animation in JavaScript?

To add touch support to canvas click events: canvas.addEventListener('touchstart', (e) => { e.preventDefault(); const touch = e.touches[0]; const rect = canvas.getBoundingClientRect(); const x = touch.clientX - rect.left; const y = touch.clientY - rect.top; launchFirework(x, y); }). The e.preventDefault() stops the browser from also firing a click event and prevents page scrolling. e.touches[0] gets the first touch point. Subtract rect.left and rect.top to get canvas-relative coordinates (important if the canvas isn't at the top-left of the viewport). For multi-touch: loop e.touches with forEach.

How do I make a canvas animation responsive to window resize?

To make a canvas responsive to window resize: (1) Set initial size: canvas.width = window.innerWidth; canvas.height = window.innerHeight. (2) Add resize listener: window.addEventListener('resize', () => { canvas.width = window.innerWidth; canvas.height = window.innerHeight; }). Note: resizing canvas automatically clears it — this is expected behavior. (3) For CSS fullscreen: canvas { display: block; } and body { margin: 0; overflow: hidden; }. (4) Debounce if needed: let timeout; window.addEventListener('resize', () => { clearTimeout(timeout); timeout = setTimeout(() => { canvas.width = window.innerWidth; canvas.height = window.innerHeight; }, 100); }). The Coodeverse Fireworks demo uses the simple approach without debounce.

How do I create auto-launching ambient fireworks in JavaScript?

To create auto-launching ambient fireworks: setInterval(() => { if (Math.random() < 0.6) { const x = Math.random() * canvas.width; const y = Math.random() * (canvas.height * 0.5); launchFirework(x, y); } }, 2500). The setInterval fires every 2500ms (2.5 seconds). The Math.random() < 0.6 check means only 60% of intervals actually fire a firework, creating irregular natural timing. Targeting the top 50% of the canvas (canvas.height * 0.5) keeps fireworks in the sky area. Combine with click/touch events so users can also manually fire fireworks at specific spots — the Coodeverse demo does both.

Is the Coodeverse Fireworks Click Explosion Canvas completely free?

Yes! The Coodeverse Fireworks Click Explosion Canvas is 100% free — no registration, email, or payment required. Download the full ZIP with HTML, CSS, and JavaScript. Licensed under CC BY 4.0 for personal and commercial use. Keep attribution to Coodeverse. Includes click/touch launch, rocket trail, 80-140 particle burst, gravity/friction physics, glow shadowBlur, heart-shape parametric burst, auto ambient launches, and window resize support — all in one pure HTML5 Canvas vanilla JS file.

Free Fireworks Click Explosion Canvas JavaScript 2025 | HTML5 Particle Animation Rocket Trail Heart

Q: How do I add a rocket trail effect to a canvas animation in JavaScript?

To add a rocket trail effect in Canvas JavaScript: (1) Store past positions in a trail array: this.trail = []. (2) Each frame push current position: this.trail.push({ x: this.x, y: this.y }). (3) Limit trail length: if (this.trail.length > 15) this.trail.shift(). (4) Draw each trail point with decreasing opacity: this.trail.forEach((point, i) => { ctx.globalAlpha = i / this.trail.length; ctx.arc(point.x, point.y, 5, 0, Math.PI * 2); ctx.fill(); }). (5) Reset: ctx.globalAlpha = 1 after drawing. (6) Add glow: ctx.shadowBlur = 20; ctx.shadowColor = this.color. The trail length divided by index creates a natural fade — oldest point is most transparent.

Q: How do I draw a heart shape in HTML5 Canvas JavaScript?

To draw a heart shape in Canvas JavaScript using the parametric equation: for (let t = 0; t < Math.PI * 2; t += 0.1) { const x = 16 * Math.pow(Math.sin(t), 3); const y = -(13 * Math.cos(t) + 5 * Math.cos(2*t) + 2 * Math.cos(3*t) + Math.cos(4*t)); }. This gives normalized coordinates -16 to 16 on x and -17 to 13 on y. Scale by multiplying: x * scale, y * scale. In the fireworks demo, these coordinates are used as velocity vectors: vx = x * 0.1 to create particles that fly outward in a heart shape. Add random noise: (Math.random() - 0.5) * 3 for organic variation. Trigger with 15% probability: if (Math.random() < 0.15).

Q: How do I create a fading trail background effect in HTML5 Canvas?

To create a fading trail/persistence effect in HTML5 Canvas: Instead of ctx.clearRect() (which completely clears each frame), use: ctx.fillStyle = 'rgba(0, 0, 0, 0.1)'; ctx.fillRect(0, 0, canvas.width, canvas.height). The rgba with alpha 0.1 means each frame the canvas darkens by 10%, so old drawings take about 10 frames to fully disappear. Lower alpha (0.05) = longer, more ethereal trails. Higher alpha (0.2) = shorter, sharper trails. For night sky fireworks, 0.1 is the ideal balance — creates glowing comet-like trails without smearing. This is the technique used in the Coodeverse Fireworks demo.

Q: How do I add glow effects to canvas particles in JavaScript?

To add glow/bloom effects to Canvas particles: (1) Before drawing: ctx.save(). (2) Set glow: ctx.shadowBlur = 20; ctx.shadowColor = this.color. (3) Draw the particle: ctx.arc(x, y, radius, 0, Math.PI * 2); ctx.fill(). (4) Restore: ctx.restore(). The shadowBlur creates a soft bloom around the shape — higher values (30-50) for rockets, lower (15-20) for particles. ctx.save() and ctx.restore() are crucial to prevent glow leaking into subsequent drawings. For multi-layered glow, draw the same circle twice: once large and faded for the halo, once small and bright for the core.

Q: How do I add touch support to a canvas click animation in JavaScript?

To add touch support to canvas click events: canvas.addEventListener('touchstart', (e) => { e.preventDefault(); const touch = e.touches[0]; const rect = canvas.getBoundingClientRect(); const x = touch.clientX - rect.left; const y = touch.clientY - rect.top; launchFirework(x, y); }). The e.preventDefault() stops the browser from also firing a click event and prevents page scrolling. e.touches[0] gets the first touch point. Subtract rect.left and rect.top to get canvas-relative coordinates (important if the canvas isn't at the top-left of the viewport). For multi-touch: loop e.touches with forEach.

Q: Is the Coodeverse Fireworks Click Explosion Canvas completely free?

Yes! The Coodeverse Fireworks Click Explosion Canvas is 100% free — no registration, email, or payment required. Download the full ZIP with HTML, CSS, and JavaScript. Licensed under CC BY 4.0 for personal and commercial use. Keep attribution to Coodeverse. Includes click/touch launch, rocket trail, 80-140 particle burst, gravity/friction physics, glow shadowBlur, heart-shape parametric burst, auto ambient launches, and window resize support — all in one pure HTML5 Canvas vanilla JS file.

Full Source Code

Pure HTML5 Canvas + Vanilla JavaScript — no libraries. Teaches OOP class-based particle systems, gravity/friction physics, requestAnimationFrame animation loop, fading trail rgba technique, canvas shadowBlur glow, heart parametric equation, touch events, and array splice lifecycle management. One of the most comprehensive canvas tutorials available free.

HTML

CSS

JavaScript

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>Fireworks Click Explosion | Coodeverse</title>
  <style>
    body { margin:0; height:100vh; background:radial-gradient(circle at top,#001122,#000000); overflow:hidden; cursor:crosshair; user-select:none; }
    h1 { position:absolute; top:20px; left:50%; transform:translateX(-50%); color:white; font-family:'Arial',sans-serif; font-size:42px; text-shadow:0 0 20px #00ffff; z-index:10; pointer-events:none; white-space:nowrap; }
    #instructions { position:absolute; bottom:30px; left:50%; transform:translateX(-50%); color:#00ffff; font-family:'Courier New',monospace; font-size:20px; text-shadow:0 0 10px cyan; z-index:10; pointer-events:none; animation:pulse 3s infinite; white-space:nowrap; }
    @keyframes pulse { 0%,100%{opacity:0.7;} 50%{opacity:1;} }
    canvas { display:block; }
  </style>
</head>
<body>
  <h1>Click Anywhere = Fireworks!</h1>
  <div id="instructions">Click or Tap to Launch Fireworks!</div>
  <canvas id="canvas"></canvas>
  <script>
    const canvas = document.getElementById('canvas');
    const ctx = canvas.getContext('2d');
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
    window.addEventListener('resize', () => {
      canvas.width = window.innerWidth;
      canvas.height = window.innerHeight;
    });

    const colors = ['#ff0000','#00ff00','#0000ff','#ffff00','#ff00ff','#00ffff','#ff8800','#ff0066','#00ff99','#ffaa00','#ff33ff','#33ffff'];
    const fireworks = [];
    const heartParticles = [];

    // ── Particle class: handles individual explosion particle physics ──
    class Particle {
      constructor(x, y, color, velocityX, velocityY) {
        this.x = x; this.y = y;
        this.color = color;
        this.velocityX = velocityX;
        this.velocityY = velocityY;
        this.alpha = 1;
        this.friction = 0.98; // air resistance — multiply each frame
        this.gravity  = 0.08; // downward pull — add to velocityY each frame
        this.size = Math.random() * 3 + 2;
      }
      update() {
        this.velocityX *= this.friction;   // slow horizontal
        this.velocityY *= this.friction;   // slow vertical
        this.velocityY += this.gravity;    // accelerate downward
        this.x += this.velocityX;
        this.y += this.velocityY;
        this.alpha -= 0.008;               // fade out
      }
      draw() {
        ctx.save();
        ctx.globalAlpha = this.alpha;
        ctx.beginPath();
        ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
        ctx.fillStyle = this.color;
        ctx.shadowBlur = 20;
        ctx.shadowColor = this.color;
        ctx.fill();
        ctx.restore();
      }
    }

    // ── Firework class: manages rocket ascent + explosion lifecycle ──
    class Firework {
      constructor(x, y) {
        this.x = x;
        this.y = canvas.height;            // start at bottom
        this.targetY = y;
        this.speed = Math.random() * 4 + 8;
        this.color = colors[Math.floor(Math.random() * colors.length)];
        this.trail = [];                   // array of past positions
        this.exploded = false;
        this.particles = [];
      }
      update() {
        if (!this.exploded) {
          this.y -= this.speed;
          this.trail.push({ x: this.x, y: this.y });
          if (this.trail.length > 15) this.trail.shift(); // limit trail
          if (this.y <= this.targetY) this.explode();
        }
        this.particles.forEach((p, i) => {
          p.update();
          if (p.alpha <= 0) this.particles.splice(i, 1);
        });
      }
      draw() {
        if (!this.exploded) {
          // Draw fading trail
          this.trail.forEach((pt, i) => {
            ctx.globalAlpha = i / this.trail.length; // fade older points
            ctx.beginPath();
            ctx.arc(pt.x, pt.y, 5, 0, Math.PI * 2);
            ctx.fillStyle = this.color;
            ctx.shadowBlur = 20;
            ctx.shadowColor = this.color;
            ctx.fill();
          });
          ctx.globalAlpha = 1;
          // Bright rocket head
          ctx.beginPath();
          ctx.arc(this.x, this.y, 6, 0, Math.PI * 2);
          ctx.fillStyle = '#ffffff';
          ctx.shadowBlur = 30;
          ctx.shadowColor = this.color;
          ctx.fill();
        }
        this.particles.forEach(p => p.draw());
      }
      explode() {
        this.exploded = true;
        const count = Math.floor(Math.random() * 60) + 80; // 80-140 particles
        for (let i = 0; i < count; i++) {
          const angle = (Math.PI * 2 * i) / count;
          const vel = Math.random() * 8 + 4;
          const vx = Math.cos(angle) * vel;
          const vy = Math.sin(angle) * vel;
          const col = colors[Math.floor(Math.random() * colors.length)];
          this.particles.push(new Particle(this.x, this.y, col, vx, vy));
        }
        // 15% chance of heart-shaped burst
        if (Math.random() < 0.15) {
          for (let t = 0; t < Math.PI * 2; t += 0.1) {
            const hx = 16 * Math.pow(Math.sin(t), 3);
            const hy = -(13 * Math.cos(t) + 5 * Math.cos(2*t) + 2 * Math.cos(3*t) + Math.cos(4*t));
            const vx = hx * 0.1 + (Math.random() - 0.5) * 3;
            const vy = hy * 0.1 + (Math.random() - 0.5) * 3;
            heartParticles.push(new Particle(this.x + hx * 0.6, this.y + hy * 0.6, '#ff0066', vx, vy));
          }
        }
      }
    }

    function launchFirework(x, y) {
      fireworks.push(new Firework(x, y));
    }

    function animate() {
      // Fading trail: rgba 0.1 alpha instead of clearRect
      ctx.fillStyle = 'rgba(0, 0, 0, 0.1)';
      ctx.fillRect(0, 0, canvas.width, canvas.height);

      fireworks.forEach((fw, i) => {
        fw.update(); fw.draw();
        if (fw.exploded && fw.particles.length === 0) fireworks.splice(i, 1);
      });
      heartParticles.forEach((p, i) => {
        p.update(); p.draw();
        if (p.alpha <= 0) heartParticles.splice(i, 1);
      });
      requestAnimationFrame(animate);
    }

    // Click handler
    canvas.addEventListener('click', e => {
      const r = canvas.getBoundingClientRect();
      launchFirework(e.clientX - r.left, e.clientY - r.top);
    });
    // Touch handler (mobile)
    canvas.addEventListener('touchstart', e => {
      e.preventDefault();
      const r = canvas.getBoundingClientRect();
      launchFirework(e.touches[0].clientX - r.left, e.touches[0].clientY - r.top);
    });
    // Auto ambient launches every 2.5 seconds, 60% fire probability
    setInterval(() => {
      if (Math.random() < 0.6) launchFirework(Math.random() * canvas.width, Math.random() * canvas.height * 0.5);
    }, 2500);

    animate();
  </script>
</body>
</html>

/* Coodeverse – Fireworks Canvas 2025 | CC BY 4.0
   All visual styling is handled by inline Canvas API drawing.
   The page-level CSS below controls the night-sky body background,
   crosshair cursor, and floating UI text labels only. */

body {
  margin: 0;
  height: 100vh;
  /* Night sky: radial-gradient from deep navy at top to pure black */
  background: radial-gradient(circle at top, #001122, #000000);
  overflow: hidden;       /* Prevent scrollbars — canvas fills full screen */
  cursor: crosshair;      /* Visual cue that clicking does something */
  user-select: none;      /* Prevent text selection on rapid clicks */
}

/* Floating title — positioned over canvas, non-interactive */
h1 {
  position: absolute;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  color: white;
  font-family: 'Arial', sans-serif;
  font-size: 42px;
  text-shadow: 0 0 20px #00ffff; /* Cyan glow text shadow */
  z-index: 10;
  pointer-events: none; /* Clicks pass through to canvas */
  white-space: nowrap;
}

/* Pulsing instruction text at bottom */
#instructions {
  position: absolute;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
  color: #00ffff;
  font-family: 'Courier New', monospace;
  font-size: 20px;
  text-shadow: 0 0 10px cyan;
  z-index: 10;
  pointer-events: none;
  animation: pulse 3s infinite;
  white-space: nowrap;
}

@keyframes pulse {
  0%, 100% { opacity: 0.7; }
  50% { opacity: 1; }
}

/* Canvas fills the full viewport */
canvas { display: block; }

/* KEY CANVAS TECHNIQUE (JavaScript, not CSS):
   Instead of ctx.clearRect() each frame, use:
   ctx.fillStyle = 'rgba(0, 0, 0, 0.1)';
   ctx.fillRect(0, 0, canvas.width, canvas.height);
   This overlays a semi-transparent black rectangle each frame,
   making old drawings fade over ~10 frames → creates glowing trails. */

// Coodeverse – Fireworks Canvas 2025 | CC BY 4.0 | https://coodeverse.com

const canvas = document.getElementById('canvas');
const ctx    = canvas.getContext('2d');
canvas.width  = window.innerWidth;
canvas.height = window.innerHeight;

// Responsive: resize canvas to match window
window.addEventListener('resize', () => {
  canvas.width  = window.innerWidth;
  canvas.height = window.innerHeight;
});

const colors = ['#ff0000','#00ff00','#0000ff','#ffff00','#ff00ff','#00ffff','#ff8800','#ff0066','#00ff99','#ffaa00','#ff33ff','#33ffff'];
const fireworks     = [];  // active Firework objects
const heartParticles = []; // heart burst particles (separate pool)

// ────────────────────────────────────────────
// PARTICLE CLASS — individual explosion speck
// ────────────────────────────────────────────
class Particle {
  constructor(x, y, color, velocityX, velocityY) {
    this.x = x; this.y = y;
    this.color     = color;
    this.velocityX = velocityX;
    this.velocityY = velocityY;
    this.alpha     = 1;
    this.friction  = 0.98;              // multiply velocity → air drag
    this.gravity   = 0.08;             // add to velocityY → pulls down
    this.size      = Math.random() * 3 + 2;
  }
  update() {
    this.velocityX *= this.friction;   // decelerate x
    this.velocityY *= this.friction;   // decelerate y
    this.velocityY += this.gravity;    // accelerate downward
    this.x += this.velocityX;
    this.y += this.velocityY;
    this.alpha -= 0.008;               // fade toward transparent
  }
  draw() {
    ctx.save();
    ctx.globalAlpha   = this.alpha;
    ctx.beginPath();
    ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
    ctx.fillStyle     = this.color;
    ctx.shadowBlur    = 20;            // glow bloom
    ctx.shadowColor   = this.color;
    ctx.fill();
    ctx.restore();
  }
}

// ────────────────────────────────────────────
// FIREWORK CLASS — rocket + trail + explosion
// ────────────────────────────────────────────
class Firework {
  constructor(x, y) {
    this.x       = x;
    this.y       = canvas.height;      // launch from bottom
    this.targetY = y;                  // explode at click height
    this.speed   = Math.random() * 4 + 8;
    this.color   = colors[Math.floor(Math.random() * colors.length)];
    this.trail   = [];                 // past positions for fade trail
    this.exploded = false;
    this.particles = [];
  }
  update() {
    if (!this.exploded) {
      this.y -= this.speed;
      this.trail.push({ x: this.x, y: this.y });
      if (this.trail.length > 15) this.trail.shift(); // cap at 15 points
      if (this.y <= this.targetY) this.explode();
    }
    this.particles.forEach((p, i) => {
      p.update();
      if (p.alpha <= 0) this.particles.splice(i, 1); // remove dead
    });
  }
  draw() {
    if (!this.exploded) {
      // Fading trail: older points are more transparent
      this.trail.forEach((pt, i) => {
        ctx.globalAlpha = i / this.trail.length;
        ctx.beginPath();
        ctx.arc(pt.x, pt.y, 5, 0, Math.PI * 2);
        ctx.fillStyle   = this.color;
        ctx.shadowBlur  = 20;
        ctx.shadowColor = this.color;
        ctx.fill();
      });
      ctx.globalAlpha = 1;
      // Bright white rocket head
      ctx.beginPath();
      ctx.arc(this.x, this.y, 6, 0, Math.PI * 2);
      ctx.fillStyle   = '#ffffff';
      ctx.shadowBlur  = 30;
      ctx.shadowColor = this.color;
      ctx.fill();
    }
    this.particles.forEach(p => p.draw());
  }
  explode() {
    this.exploded = true;
    // Standard circular burst: 80-140 particles at evenly distributed angles
    const count = Math.floor(Math.random() * 60) + 80;
    for (let i = 0; i < count; i++) {
      const angle = (Math.PI * 2 * i) / count;
      const vel   = Math.random() * 8 + 4;
      this.particles.push(new Particle(
        this.x, this.y,
        colors[Math.floor(Math.random() * colors.length)],
        Math.cos(angle) * vel,
        Math.sin(angle) * vel
      ));
    }
    // 15% chance: heart-shaped burst using parametric equation
    // x = 16·sin³(t)  |  y = -(13cos(t) + 5cos(2t) + 2cos(3t) + cos(4t))
    if (Math.random() < 0.15) {
      for (let t = 0; t < Math.PI * 2; t += 0.1) {
        const hx = 16 * Math.pow(Math.sin(t), 3);
        const hy = -(13 * Math.cos(t) + 5 * Math.cos(2*t) + 2 * Math.cos(3*t) + Math.cos(4*t));
        // Use coordinates as velocities so particles fly outward in heart shape
        const vx = hx * 0.1 + (Math.random() - 0.5) * 3;
        const vy = hy * 0.1 + (Math.random() - 0.5) * 3;
        heartParticles.push(new Particle(
          this.x + hx * 0.6, this.y + hy * 0.6, '#ff0066', vx, vy
        ));
      }
    }
  }
}

function launchFirework(x, y) { fireworks.push(new Firework(x, y)); }

// ────────────────────────────────────────────
// ANIMATION LOOP
// ────────────────────────────────────────────
function animate() {
  // Fading trail technique: semi-transparent black overlay instead of clearRect
  // Alpha 0.1 = ~10 frames to fully fade → creates glowing comet trails
  ctx.fillStyle = 'rgba(0, 0, 0, 0.1)';
  ctx.fillRect(0, 0, canvas.width, canvas.height);

  fireworks.forEach((fw, i) => {
    fw.update(); fw.draw();
    if (fw.exploded && fw.particles.length === 0) fireworks.splice(i, 1);
  });
  heartParticles.forEach((p, i) => {
    p.update(); p.draw();
    if (p.alpha <= 0) heartParticles.splice(i, 1);
  });
  requestAnimationFrame(animate);
}

// ── Event Handlers ──
canvas.addEventListener('click', e => {
  const r = canvas.getBoundingClientRect();
  launchFirework(e.clientX - r.left, e.clientY - r.top);
});
canvas.addEventListener('touchstart', e => {
  e.preventDefault(); // prevent scroll and double-fire
  const r = canvas.getBoundingClientRect();
  launchFirework(e.touches[0].clientX - r.left, e.touches[0].clientY - r.top);
});

// ── Auto ambient: 60% fire rate every 2.5 seconds ──
setInterval(() => {
  if (Math.random() < 0.6)
    launchFirework(Math.random() * canvas.width, Math.random() * canvas.height * 0.5);
}, 2500);

animate();

Frequently Asked Questions

How do I create a fireworks explosion in HTML5 Canvas JavaScript?

Create a Firework class launching from bottom: this.y = canvas.height; this.targetY = clickY. Move up: this.y -= this.speed. When this.y <= targetY, call explode(). In explode(): const angle = (Math.PI * 2 * i) / count; vx = Math.cos(angle) * vel; vy = Math.sin(angle) * vel. Each particle: gravity velocityY += 0.08, friction velocity *= 0.98, fade alpha -= 0.008. Fading trail: ctx.fillStyle = 'rgba(0,0,0,0.1)'; ctx.fillRect(...) each frame.

How do I add a rocket trail effect to canvas animation?

Store past positions: this.trail = []. Each frame push: this.trail.push({x:this.x,y:this.y}). Limit: if (this.trail.length > 15) this.trail.shift(). Draw with fade: trail.forEach((pt,i) => { ctx.globalAlpha = i / trail.length; ctx.arc(pt.x,pt.y,5,...); ctx.fill(); }). Reset: ctx.globalAlpha = 1. The index divided by length makes older points transparent — creating a natural comet tail.

How do I apply gravity and friction to canvas particles?

Friction (air drag): velocityX *= 0.98; velocityY *= 0.98 each frame — multiplying by 0.98 gradually slows particles. Gravity: velocityY += 0.08 each frame — adding a small positive value accelerates particles downward. Move: x += velocityX; y += velocityY. The combination creates realistic ballistic arcs identical to real fireworks. Lower friction (0.95) for faster decay; higher gravity (0.15) for heavier feel.

How do I draw a heart shape in HTML5 Canvas using the parametric equation?

Loop from 0 to 2π: for (let t = 0; t < Math.PI * 2; t += 0.1). Calculate: const hx = 16 * Math.pow(Math.sin(t), 3) and const hy = -(13*Math.cos(t) + 5*Math.cos(2*t) + 2*Math.cos(3*t) + Math.cos(4*t)). These give normalized coordinates -16 to 16. Use as velocities: vx = hx * 0.1; vy = hy * 0.1 so particles fly outward in heart shape. Add noise: (Math.random()-0.5)*3 for organic feel. Trigger at 15% probability: if (Math.random() < 0.15).

How do I create a fading trail background effect in HTML5 Canvas?

Instead of ctx.clearRect(), use: ctx.fillStyle = 'rgba(0, 0, 0, 0.1)'; ctx.fillRect(0, 0, canvas.width, canvas.height). Alpha 0.1 darkens the canvas by 10% each frame — old drawings take ~10 frames to fully disappear, creating glowing comet trails. Lower alpha (0.05) = longer trails. Higher alpha (0.2) = shorter. For night sky fireworks, 0.1 is ideal.

Is the Fireworks Click Explosion Canvas completely free?

Yes! 100% free — no registration or payment needed. Download the full ZIP. Licensed CC BY 4.0 for personal and commercial use. Includes click/touch launch, rocket trail, 80-140 particle burst, gravity/friction, glow shadowBlur, heart parametric burst, auto ambient launches, and window resize support — all in one pure HTML5 Canvas vanilla JS file.

Free Fireworks Click Explosion Canvas JavaScript 2025

Canvas & JavaScript Techniques Inside

Live Preview

Full Source Code

Frequently Asked Questions

Download your free fireworks canvas project today