80 Canvas API Examples

This is an Interactive Canvas Particle Image Effect. It reconstructs standard raster images using thousands of autonomous floating particles. Its function is to create a highly tactile visual experience that reacts to cursor proximity, morphing colors based on hidden alternate image data to remove the static barrier between user and interface.

This is a PixiJS Procedural GLSL Flame. It generates a hyper-realistic, endlessly animating flame entirely through mathematical functions inside a fragment shader. Its function is to provide a high-performance visual effect without relying on video files or sprite sheets, using procedural noise to simulate the chaotic turbulence of a real fire.

This is a Twisted Wave GLSL Image Gallery. It’s a high-performance, full-screen WebGL experience that uses custom shaders to create sophisticated visual effects. Its function is to transform a standard image carousel into a cinematic journey with two distinct interactions: a localized sine-wave distortion on mouse hover and a global radial blur that intensifies with the speed of the scroll.

This is a Cinematic Zoom Blur Image Gallery. It utilizes custom GLSL fragment shaders and Three.js to create a high-fidelity transition between image textures. Its function is to provide an immersive navigational layer for visual portfolios, where spatial depth and radial blur replace standard linear crossfades.

The Minimalist Canvas Animated Particle Background is an ambient UI element that generates a field of drifting geometric shapes. It serves as a non-intrusive aesthetic layer for headers or landing pages, providing depth through motion. The system alternates between “bubbles” and spinning “lines” to create a technical yet organic atmosphere.

This is a Neon Vaporwave Pong Game (“CODEPONG 26”). It is a complete, browser-based arcade game rendered via the HTML5 Canvas 2D API. Its function is to provide a highly polished, playable experience that demonstrates advanced frontend techniques, including a custom physics engine, an adaptive AI opponent that gets harder as the game progresses, and programmatic audio synthesis for sound effects.

This is a Matcap Instanced Disco Geometry demo. It renders multiple unique 3D geometries (Torus Knot, Icosahedron, Torus) using the WebGL Instanced Mesh technique. Instead of drawing individual planes for every mirror on the surface of the shape, it creates one InstancedMesh per object, mathematically orienting thousands of tiny reflective mirrors to mimic a faceted, crystal-like disco surface.

This is a WebGL Generative Flower Cursor. It transforms the cursor into a botanical paintbrush, procedurally generating complex, blooming flower patterns across the screen in real-time. Its function is to provide an immersive, artistic interaction layer that allows users to “paint” generative digital gardens.

This is an Interactive Feather Reveal 404 Page. It utilizes the Canvas 2D API to transform a sterile error screen into a generative digital canvas. The component records user movement to stamp intricate feather-shaped paths that alternate between solid black fills and clipped fragments of external bird photography.

This is a Shattering Image Gallery Transition. It utilizes the WebGL API via Three.js to deconstruct 2D images into a matrix of 3D particles. Its function is to replace standard fade or slide slideshows with a highly cinematic, physics-based explosion effect, transitioning between photographs by blowing the current image apart to reveal the next one underneath.

This is a Dynamic Color-Extracting Media Player. It serves as a fully functional frontend music card component. Its primary function is to fetch real track data from the iTunes API, analyze the retrieved album artwork using the HTML Canvas API, and mathematically adjust its own UI color palette to perfectly complement the image.

This is an Infinite 3D Poster Scroll Wall. It constructs a dense, continuous grid of cinematic assets rendered entirely in WebGL. Its function is to provide a visually overwhelming, highly performant “hero” background that automatically fetches live data from an external API and perpetually scrolls along a tilted perspective plane.

This is an Isometric 3D Bouncing Cube Animation. It utilizes the Zdog.js engine to render a pseudo-3D geometric scene onto a flat HTML Canvas. Its function is to provide an engaging, continuous background animation where a wandering cube paints a trail across a structural grid, adding depth and kinetic energy to otherwise static hero sections.

This is an Interactive 3D Pricing Card Slider. It integrates WebGL geometric renders into a standard product tier UI. Its function is to convert static pricing options into an engaging, tactile spatial experience.

This is an HTML5 Canvas Stick Hero Game. It uses pure JavaScript and mathematical rendering to create an interactive 2D physics puzzle. The function is to demonstrate a continuous render loop controlled by user input timing, transforming simple mouse holds into spatial calculations.

This is an Interactive Liquid SVG Wobble Button. It maps cursor proximity to discrete vector points along an SVG path, deforming the shape in real-time. Its function is to transform a static call-to-action into a physical, reactive object.

This is an Interactive Canvas Color Picker Eyedropper. It uses the ZIM.js framework to render a native color extraction tool directly over an image. Its function is to sample pixel data and dynamically theme the surrounding interface. The effect is immediate, bridging image content with UI styling through raw canvas manipulation.

We often treat web content as flat information, devoid of spatial context. This component creates a digital sanctuary. By combining soft, pre-calculated lighting with a constrained interactive camera, we invite the user to inhabit a space, not just view it.

Real-time rendering often demands too much power for too little soul. This component brings the warmth of a hand-crafted miniature to the browser. By leveraging baked textures, we achieve photorealistic lighting with the performance footprint of a simple image. It is not just a 3D model; it is a digital diorama that invites the user to inspect every corner with tactile orbit controls.

Modern web games often rely on bloated frameworks. This project demonstrates the raw capability of the native Canvas API combined with lightweight physics. It is a satisfying, tactile experience where the user’s cursor becomes a blade. By implementing a custom particle system and separating the collision logic (SAT.js) from the rendering, we achieve a high-performance arcade feel that runs smoothly even on modest hardware.

Web games often get bogged down in heavy engines. This project is a love letter to the raw power of the HTML5 Canvas API. It is a pure, dependency-free arcade experience (save for a tiny sound synthesizer) that pits player reflexes against mathematical precision. You aren’t just moving pixels; you are navigating a vector field, dodging a ray-casting collision detector that speeds up as you survive. It is tense, fast, and built on solid geometry.

This GSAP Staggered Blinds Reveal creates a cinematic transition effect often used in hero sections or between major content blocks. By manipulating a series of div elements acting as “slats,” the animation mimics a zipper or venetian blinds opening. As the user scrolls, the slats slide away and rotate sequentially, revealing the content underneath (or changing the state) in a synchronized wave motion.

This Interactive Neon Grid Trail creates a sleek, cybernetic atmosphere ideal for tech portfolios or futuristic landing pages. It utilizes the HTML5 Canvas API to render a grid of invisible squares that light up in neon teal upon interaction. The effect features a “memory” mechanic where the illuminated cells hold their charge for a moment before gracefully fading back into the darkness, creating a satisfying trail behind the user’s cursor.

Oculus II redefines the weather dashboard by blending real-time data with a cinematic 3D environment. Unlike static weather apps, it uses Three.js to render a living scene - drifting clouds, falling rain, or twinkling stars - that reacts to the mouse cursor with a subtle parallax effect. The UI floats above this world using glassmorphism, creating a sense of depth and modernity while providing live weather metrics from the Open-Meteo API.

This Interactive Typographic Wave Footer combines generative art with functional UI design. It features a field of horizontal lines that behave like a liquid surface, reacting to the user’s cursor with a satisfying ripple effect. Hidden within the wave structure is a 3D-like topographic representation of text (“DICH”), generated by mapping pixel brightness from an off-screen canvas to the vertical position of the lines. It’s a sophisticated way to add depth and interactivity to a page footer or hero section.

This Neon 3D Tubes Cursor Trail brings high-end motion graphics to the web browser. Using the power of WebGL and Three.js, it generates a serpentine trail of glowing 3D geometry that fluidly follows the user’s input. The effect features dynamic lighting that casts soft glows on the tubes, and it includes a built-in interaction where clicking the screen instantly randomizes the color palette, keeping the visual experience fresh.

This WebGL Fluid Smoke Button elevates standard UI interactions by embedding a real-time generative shader directly into the interface. Instead of using a heavy video file, it calculates complex fluid dynamics on the fly using Fractional Brownian Motion (fBM). The result is a mesmerizing, never-repeating smoky background that reacts to hover states with a smooth scale and rotation effect, styled effortlessly via Tailwind CSS.

This Interactive Canvas Liquid Image Distortion transforms a static image into a playful, fluid surface. By subdividing the image into a grid of tiny cells, the script manipulates the texture coordinates of each cell in response to mouse movement. The result is a “jelly-like” or refractive glass effect where the image appears to warp and ripple under the user’s cursor.

This Rising Bubbles Particle Background utilizes the tsParticles library to create a soothing, fluid animation reminiscent of carbonated water or an underwater scene. By leveraging the HTML5 Canvas API through a high-level configuration object, it renders performant particles that spawn from the bottom of the viewport and grow until they “pop.”

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.