90+ Canvas API Examples (Page 3)

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.

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.