Create a Browser Fireworks Animation with HTML, CSS, and JavaScript

Overview

The article demonstrates how to render a fireworks display directly in a web page without external libraries, using only HTML, CSS, and JavaScript. It explains the project structure, provides complete source code, and describes each component in detail.

1. HTML Structure

The HTML is split into two main parts: a text container for the greeting and a <canvas> element that serves as the drawing area.

<code>&lt;!-- Text container --&gt;
&lt;div class="title"&gt;
    &lt;h2&gt;LGD_Sunday 祝大家：&lt;/h2&gt;
    &lt;h1&gt;2023 新年快乐?&lt;/h1&gt;
&lt;/div&gt;

&lt;!-- Fireworks canvas --&gt;
&lt;canvas&gt;&lt;/canvas&gt;</code>

2. CSS Styling

The CSS resets page margins, sets a dark background, and styles the text container with a semi‑transparent backdrop, custom font, border, and fixed positioning in the lower‑right corner. The canvas is forced to fill the viewport.

<code>html, body {
    padding: 0;
    margin: 0;
    background: #222;
    font-family: 'Karla', sans-serif;
    color: #fff;
    height: 100vh;
    overflow: hidden;
}

.title {
    z-index: 1000;
    position: fixed;
    bottom: 12px;
    right: 12px;
    font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
    border: 2px solid #fff;
    padding: 7.5px 15px;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 3px;
    overflow: hidden;
}

canvas { width: 100%; height: 100%; }</code>

3. JavaScript Core

The script is organized into utility functions, two constructor classes ( Firework and Spark ), and a render loop that continuously draws and updates objects.

Utility Functions

<code>// Get canvas context and set size
let ctx = document.querySelector('canvas').getContext('2d');
ctx.canvas.width = window.innerWidth;
ctx.canvas.height = window.innerHeight;

function drawCircle(x, y, radius, color) {
    ctx.fillStyle = color;
    ctx.fillRect(x - radius/2, y - radius/2, radius, radius);
}

function randomColor() {
    const r = Math.floor(Math.random()*255);
    const g = Math.floor(Math.random()*255);
    const b = Math.floor(Math.random()*255);
    return `rgb(${r},${g},${b})`;
}</code>

Firework Class

Represents a rising firework that moves upward until it reaches a burst point, then spawns multiple Spark instances.

<code>function Firework(x, y) {
    this.x = x || Math.random()*ctx.canvas.width;
    this.y = y || ctx.canvas.height;
    this.burstLocation = (Math.random()*ctx.canvas.height)/2;
    this.over = false;
    this.color = randomColor();
    this.move = function() {
        this.x += WALK;
        if (this.y > this.burstLocation) this.y -= 1;
        else this.burst();
    };
    this.draw = function() { drawCircle(this.x, this.y, 1.5, this.color); };
    this.burst = function() {
        this.over = true;
        let i = Math.floor(Math.random()*150) + 10;
        while (i--) sparks.push(new Spark(this.x, this.y, this.color));
    };
}</code>

Spark Class

Models an individual spark after a firework bursts, handling its motion, gravity, and fading.

<code>function Spark(x, y, color) {
    this.x = x; this.y = y; this.color = color;
    this.dir = Math.random() * (Math.PI * 2);
    this.over = false;
    this.speed = Math.random()*3 + 3;
    this.gravity = Math.random() + 0.1;
    this.countdown = this.speed * 10;
    this.move = function() {
        this.countdown--;
        if (this.countdown < 0) this.over = true;
        if (this.speed > 0) this.speed -= 0.1; else return;
        this.x += Math.cos(this.dir + WALK) * this.speed;
        this.y += Math.sin(this.dir + WALK) * this.speed + this.gravity;
        this.gravity += 0.05;
    };
    this.draw = function() { drawCircle(this.x, this.y, 3, this.color); };
}</code>

Render Loop

The render function clears the canvas with a translucent overlay, updates and draws all active fireworks and sparks, randomly creates new fireworks, and schedules the next frame using setTimeout for a stable 16 ms step.

<code>function render() {
    ctx.fillStyle = 'rgba(0, 0, 0, 0.1)';
    ctx.fillRect(0, 0, ctx.canvas.width, ctx.canvas.height);
    for (let firework of fireworks) {
        if (firework.over) continue;
        firework.move();
        firework.draw();
    }
    for (let spark of sparks) {
        if (spark.over) continue;
        spark.move();
        spark.draw();
    }
    if (Math.random() < 0.05) fireworks.push(new Firework());
    setTimeout(render, TIME_STEP);
}
render();</code>

4. Full Source Code

The article concludes with the complete script (including constant definitions, initial firework population, and the render call) so readers can copy, paste, and run the animation instantly.

<code>// Constants
const OVERLAP_NUM = 66;
const TIME_STEP = 16;
const WALK = 0.2;
let sparks = [];
let fireworks = [];

// Populate initial fireworks
for (let i = 0; i < OVERLAP_NUM; i++) {
    fireworks.push(new Firework(Math.random()*window.innerWidth, Math.random()*window.innerHeight));
}

// (Utility functions, classes, and render function as shown above)
</code>

Conclusion

The tutorial shows that even a seemingly festive visual effect like fireworks can be built entirely with standard web technologies, reinforcing the power of the Canvas API and JavaScript for creative front‑end development.