51 Canvas API Examples

An infinite, psychedelic flight through a field of glass cubes that refract light and respond to camera interaction, creating a deep immersion into a tumbling crystalline structure.

A Low Poly 3D planet visualization built with Three.js, featuring three rotating layers: a solid core, a wireframe shell, and a floating particle cloud.

Entering the Konami Code (↑ ↑ ↓ ↓ ← → ← → B A) triggers a party mode: the stars turn different colors, move chaotically to the sound of sparkle.mp3, and then return to their original state.

A highly specialized visual component leveraging Pixi.js for WebGL rendering and applying real-time filters.

A unique, highly interactive Vue.js recipe application synchronizing UI progress with procedural Canvas animation.

A retro-styled, full-screen Snake game rendered on HTML5 Canvas. JavaScript manages the game loop, collision detection, and array-based movement logic, while CSS provides a neon arcade aesthetic.

A real-time glitch art generator powered by p5.js, manipulating image data at the pixel level.

A full-featured browser game with retro aesthetics, procedural level generation, intelligent enemies, and a scoring system, running smoothly thanks to a combination of Canvas for static elements and DOM for dynamic content.

A high-performance WebGL slider that leverages displacement mapping to create liquid, kinetic transitions via the rgbKineticSlider library. The JavaScript configuration orchestrates intricate RGB split effects and cursor interactions rendering onto a canvas, while CSS implements a glassmorphic UI overlay using backdrop-filter to ensure the travel booking widget floats distinctively above the distortion effects.

Experience a dynamic, generative glitch effect where the visuals are created in real-time within the p5.js draw() loop. The animation combines a sequence of pixel shifts, line flows, and RGB channel separation to create a unique, non-repeating visual every time the code runs.

This tower defense-style game leverages an object-oriented class hierarchy with p5.Vector physics to create dynamic ball interactions, where core gameplay revolves around protecting a central orb from attacker waves using a reload-managed cannon.

Canvas-powered dot grid with interactive profile components. Responsive card design featuring smooth transitions, gradient accents, and scalable SVG avatars.

A 3D scene from Spline is loaded using the Spline Runtime, and its objects are brought to life with programmatic animation in GSAP. This approach allows you to avoid low-level WebGL by using a powerful timeline to create complex interactive scenarios, with the code already containing stubs for finding and controlling objects.

An implementation of ‘flipping’ clocks in LightningJS where the animation is triggered via bindProp on a value change and an on('finish') callback atomically resets the component’s state for the next tick.

The engine implements a lightweight game loop via requestAnimFrame for smooth rendering, featuring a scriptable and fully customizable map structure defined by a simple - easily modifiable - JavaScript object.

Vanilla JS game built with the Canvas API uses OOP principles for physics-based color-matching and implements dynamic difficulty scaling - gradually increasing ball velocity within an setInterval loop.

This pure Vanilla JS arcade game leverages the HTML Canvas API to render real-time projectile and enemy movement, utilizing sprites for an old-school look, and implements mouse-based aiming and firing for interactive defense against asteroids.

This demo implements a tilt-controlled marble labyrinth using the HTML Canvas API for rendering and custom physics logic in vanilla JavaScript to handle sphere movement, gravity simulation, and collision detection with the static map geometry.

This technical demo showcases a tile-based puzzle game built on the Diorama engine, leveraging the HTML Canvas API for rendering; smooth object movement is implemented via custom tweening utilities, such as Util.easeInOutQuad, with the retro-pixel aesthetic achieved using the CSS property image-rendering: pixelated;.

Uses the PIXI.js WebGL renderer to draw dynamic, hardware-accelerated connection lines between content hotspots, enhanced by GSAP for the smooth ‘magnetic’ displacement effect upon mouse hover.

This full-screen particle system uses the Canvas 2D context to draw short-lived, low-alpha rain streaks, relying on requestAnimationFrame for a performance-optimized background animation.

Dive into an interactive demo using pure JavaScript and Canvas 2D, where mouse movement creates a magnetic field for particles, and clicking triggers an explosion effect, implementing complex element creation and destruction logic.

Complex Path Morphing at the intersection of technologies: the demo uses the GSAP library to interpolate coordinates sampled from SVG paths and renders the result with frame-by-frame precision using the Canvas API.

An interactive 3D coin spin animation implemented by rendering 260 pre-shot frames onto a Canvas; spin control, inertia, and movement physics are handled by the combination of GSAP and the Draggable Plugin.

This is a powerful demonstration of the Web Audio API and Canvas synchronization, where an AnalyserNode processes real-time audio data to dynamically drive complex visual glitch effects and an animated equalizer display.

An interactive thermostat implemented in Vanilla JS leverages the Draggable library for rotation input and arrow keys for step-by-step adjustments, with Canvas used for the visualization of temperature activity.

A two-layer animation: a stylish SVG-based interface controlled by SCSS variables and GSAP for micro-animations of the text and flag, while the background fireworks are a separate JS module with particles and sound, optimized for high performance on Canvas.

A simple JavaScript city builder with no simulation at all. No budget, no goals. Just build your tiny city. This would work on a phone, but it wasn’t designed with phones in mind.

Built on a performant, real-time rendering loop with custom mathematical utilities, this demo features robust entity management and advanced damage mechanics that trigger dynamic particle effects on every impact.

A dynamic Asteroids clone built on pure HTML Canvas, showcasing advanced vector graphics and utilizing manual pixel manipulation for realistic and high-impact particle explosions.

Leverages a sophisticated AI decision tree for competitive fight-or-flight behavior, combined with precise barycentric collision detection to calculate shot-to-rocket impacts based on geometric area.

Explore lightweight 3D graphics using the Zdog library to render a vibrant, drag-rotatable isometric rainbow and clouds, demonstrating efficient pseudo-3D rendering for web UIs.

This demo showcases a procedural pixel art flame created with the HTML5 Canvas API. The effect is achieved by rapidly drawing randomized vertical lines on a low-resolution 16x16 canvas, which is then scaled up using CSS image-rendering to maintain a crisp, retro aesthetic.

A dynamic interactive grid implemented on HTML5 Canvas, where the radius of each circle is calculated in real-time based on its squared distance from the cursor, creating a smooth attraction/repulsion effect on mouse movement.

A unique countdown timer with a spooky visual flair, created using a GSAP Timeline to cyclically animate SVG filters, simulating screen distortion and glitches.

An implementation of Mouse Interaction with a grid of elements: each circle smoothly interpolates its radius towards a target using an ease factor for liquid-like animation, producing a smooth repulsion effect.

This demo showcases a responsive grid with dynamic layout, where clicking an element smoothly expands it while others shrink. It’s built on the p5.js library for rendering and animation and uses dat.GUI for interactive control over parameters like column count, animation speed, and colors.

A visually rich interactive carousel that uses a combination of CSS 3D transforms for a smooth parallax effect and the Web Audio API for custom soundscapes. The code is structured into dedicated classes for clean, scalable management.

This HTML Canvas slider showcases advanced transition effects, from classic “Bands” and “Slice” to more complex “Halftone” and “Glitch,” all implemented with vanilla JavaScript. It’s a perfect example for understanding the capabilities of the Canvas API and creating unique interactive UI elements.

A slick, interactive showcase of 10 different preloader animations, utilizing GSAP’s Draggable and horizontal loop for smooth navigation, along with a dark/light theme toggle.

The demo showcases an advanced cursor-reactive animation built with React and GSAP. It utilizes HTML5 Canvas to display an an image broken into multiple fragments that spread out and scale as the cursor approaches, creating a unique visual effect.

Dive into space with this optimized Canvas demo that procedurally generates shimmering stars, random shooting stars, and a colorful Milky Way, focusing on seamless performance and responsiveness.

A complete HTML5 Canvas implementation of Doodle Jump featuring sprite-based animations, realistic physics with gravity and acceleration, and procedurally generated platforms with different behaviors.

A faithful implementation of the classic Pacman game using vanilla JavaScript and HTML5 Canvas, featuring smooth sprite animation, collision detection, and original game mechanics with multiple ghost AI behaviors.

A fully detailed, color-coded scientific table generated by a script just 1 kilobyte in size.

This audio visualizer leverages the Web Audio API to extract frequency data, driving a real-time, responsive 3D starfield and waveform that reacts intensely to the music’s average volume.