This project creates a celebratory “Happy Birthday” animation using the HTML Canvas API. The message appears letter by letter through animated fireworks, glowing effects, and particle explosions. After the fireworks settle, each letter transforms into a floating balloon that drifts upward. The animation continuously loops, creating a lively and festive visual experience. Overall, the project demonstrates advanced canvas drawing, particle systems, and animation sequencing.
HTML
<canvas id="c"></canvas>The HTML file is intentionally minimal because all visuals are rendered dynamically on the canvas. The <canvas> element fills the entire screen and acts as the drawing surface for the animation. No text or shapes are written directly in HTML; everything is drawn through JavaScript. A CSS file is linked to ensure the canvas is positioned correctly and fills the viewport. An external prefix-free script is included to ensure CSS compatibility across browsers.
The JavaScript file is loaded after the canvas so rendering can begin immediately. This structure keeps the markup clean and focused on performance. The HTML’s main role is to host and initialize the canvas-based animation.
CSS
p {
margin: 0 0;
position: absolute;
font: 16px Verdana;
color: #eee;
height: 25px;
top: calc( 100vh - 30px );
text-shadow: 0 0 2px white;
}
p a {
text-decoration: none;
color: #aaa;
}The CSS ensures that the canvas always covers the full browser window. Absolute positioning locks the canvas to the top-left corner of the viewport. Overflow is hidden to prevent scrollbars during animation. Minimal styling is applied because most visuals are handled by JavaScript drawing routines.
Text styling rules are included only for optional captions or links. The dark background color enhances contrast, making fireworks and balloons glow vividly. CSS avoids heavy effects to keep animation performance smooth. Overall, the CSS plays a supportive role by handling layout and visibility.
JavaScript
Letter.prototype.reset = function(){
this.phase = 'firework';
this.tick = 0;
this.spawned = false;
this.spawningTime = opts.fireworkSpawnTime * Math.random() |0;
this.reachTime = opts.fireworkBaseReachTime + opts.fireworkAddedReachTime * Math.random() |0;
this.lineWidth = opts.fireworkBaseLineWidth + opts.fireworkAddedLineWidth * Math.random();
this.prevPoints = [ [ 0, hh, 0 ] ];
}The JavaScript file is the core engine behind the entire animation. It initializes the canvas context, screen dimensions, and configuration options for fireworks, letters, and balloons. Each letter is treated as an object that transitions through multiple phases: firework launch, explosion, display, balloon inflation, and floating away. Particle shards simulate realistic firework explosions using velocity, gravity, and fading trails. Bezier curves are used to draw smooth balloon shapes.
The animation loop runs continuously using requestAnimationFrame for smooth rendering. When all letters complete their animation, the sequence automatically resets and restarts. Resize events dynamically adjust the canvas size and text layout. Overall, JavaScript orchestrates timing, physics, rendering, and visual transitions into a cohesive celebration.
