This project creates a magical Christmas night scene using HTML Canvas, featuring softly glowing snowflakes and a flying Santa animation. The entire scene is rendered dynamically, giving a smooth and immersive winter atmosphere. Snowflakes fall with natural sway and depth, while Santa glides across the sky in a looping motion. A city skyline banner adds visual depth behind the canvas animation. Overall, the project focuses on festive visuals, smooth animation loops, and lightweight canvas-based rendering.
HTML
<canvas id="skyCanvas"></canvas>The HTML file provides a very minimal structure because most of the visual work happens inside the canvas. The <canvas id="skyCanvas"> element is the main drawing surface where snowflakes and Santa are rendered using JavaScript. A container called christmasScene sits beneath the canvas and holds a background city banner image, giving the illusion of depth.
The canvas is layered above the background using z-index, allowing animations to appear in the foreground. The layout is fullscreen and responsive, ensuring the animation adapts to any screen size. No UI controls are present, keeping the focus purely on visual storytelling. The script file is loaded at the bottom to ensure the canvas exists before JavaScript starts drawing. Overall, the HTML acts as a clean foundation that supports the animated scene without unnecessary markup.
CSS
#skyCanvas {
position: absolute;
top: 0;
left: 0;
}
The CSS establishes the mood of the scene by applying a vertical gradient background that resembles a winter night sky. The body is set to fullscreen with hidden overflow so the animation never causes scrolling. The canvas is absolutely positioned and stretched to cover the entire viewport, ensuring all animations fill the screen.
Layering is controlled with z-index so the snowflakes and Santa appear above the city banner. The christmasScene container anchors the background visuals to the bottom of the screen, mimicking a distant city horizon. The city banner image is scaled and positioned to stay fixed at the bottom, enhancing depth. Flexbox is used to keep elements aligned without interfering with the canvas. Overall, the CSS quietly supports the animation by handling layout, layering, and atmosphere.
JavaScript
requestAnimationFrame(animate);The JavaScript file drives the entire animation system using the HTML Canvas API. It begins by setting up the canvas dimensions and resizing them dynamically when the browser window changes. Snowflakes are generated as objects with properties like position, speed, opacity, and horizontal swing to create natural motion. Each snowflake updates its position every frame and redraws itself using a soft radial gradient for a glowing effect. Santa is treated as a moving sprite, floating horizontally across the screen while gently oscillating vertically using a sine wave.
Once Santa exits the screen, his position resets to loop the animation seamlessly. The animate() function clears the canvas, updates all elements, and redraws them in sequence. The animation loop is powered by requestAnimationFrame, ensuring smooth performance and efficient rendering. Together, these elements create a continuous, festive winter animation. (Licence)
