90+ Canvas API Examples

A mesmerizing WebGL background effect rendering a glowing, undulating sine wave. Built with Three.js and custom GLSL shaders, the script calculates pixel coordinates to generate a continuous mathematical wave. The fragment shader applies a radial distortion multiplier to separate the red, green, and blue color channels, resulting in a dynamic chromatic aberration effect that shifts over time. (Requires: three.js)

An interactive button component featuring an embedded HTML5 Canvas that renders a 3D hyperspace starfield effect. Clicking the button toggles the animation state, switching the button’s background to black and activating a requestAnimationFrame loop. The JavaScript logic calculates 3D-to-2D vector projections, scaling and moving particles outward from the center to simulate high-speed space travel.

An advanced interactive image gallery rendered entirely on an HTML5 Canvas. The script maps a collection of Unsplash images onto the surface of a virtual 3D sphere, calculating scale and opacity based on their normalized distance from the center. Users can rotate the sphere via mouse or touch drag. Hovering over an image highlights it with a tracking focus box, and clicking expands the image with a procedural slicing animation, accompanied by random digital glitch effects.

This immersive navigation interface integrates Curtains.js to render liquid WebGL texture displacement transitions behind a typographic menu. Moving the mouse over the text links updates the shader’s active textures, using a custom cubic ease-out to bend and morph the pixel coordinates seamlessly. The menu list features staggered GSAP entry animations and double-layered text-stroke outlines. (Requires: gsap.js, curtains.js)

An advanced procedural 2D canvas simulation generating an atmospheric stormy night window scene. Combining multiple layered canvas contexts, the code programmatically draws mountain skylines, math-driven falling rain, running window drops, and recursive branching lightning. It utilizes screen blend-modes, composite operations, and a custom frame-rate time-delta smoothing loop.

An advanced WebGL video player constructed using REGL and custom GLSL fragment shaders. Moving the pointer renders an elongated faux-refractive glass lens that distorts the underlying video stream dynamically. Includes customized resolution scaling, an integrated cos-gradient rainbow progress timeline, and canvas-level click interception to control video playback and seeking. (Requires: regl.js)

An advanced WebGL filter engine that transforms CORS-enabled images and videos into refractive stained glass structures. Operating on custom fragment shaders, the canvas allows users to toggle procedural cell geometries — including hexagon, triangle, and diamond tiles — while dynamically adjusting chromatic aberration offsets, drag-and-drop panning, spotlight coordinate tracking, and mathematical ripple distortions.

Artillery Gorilla Canvas Retro Game is a plain JavaScript clone of the MS-DOS classic, QBasic Gorillas. Two gorillas on city rooftops take turns throwing explosive bananas, with calculations factoring in gravity, adjustable angles, and wind speed shown via an animated SVG windmill. It features single-player AI simulation, local two-player, dark/light modes, and destructible building hitboxes.

Interactive 3D Baked Room Concept leverages Three.js to render a detailed, stylized isometric room. Instead of heavy real-time shadows, the design uses a baked texture mapping approach (bakedTexture, normalTexture, occlusionTexture) for highly optimized, realistic ambient occlusion. Standard OrbitControls allow smooth user navigation within restricted bounding limits, preventing camera clipping. (Requires: three.js)

This is a Wireframe Ocean Vector Waves background. It renders multiple layered vector paths using mathematical sine functions to simulate a rolling sea. Its function is to create a dynamic, highly illustrative hero section, integrating static text behind a moving fluid layer to establish a strong sense of depth. (Requires: paper.js)

This is a 3D WebGL Shape Matcher Game. It utilizes the Three.js library to render a fully functional, physics-driven puzzle game directly in the browser. Its function is to demonstrate complex state management, 3D raycasting, and sequential animation chaining without the overhead of a dedicated game engine like Unity. (Requires: three.js, tween.js)

This is a Kinetic Snake Focus Indicator. It replaces the default browser outline with a dynamic, canvas-drawn organism that travels between active form fields. Its function is to draw absolute visual attention to the current user context, turning mundane data entry into a highly tactile, continuous experience.

This is a Cinematic 3D Racing Pursuit Game. It renders an endless runner-style experience with high-speed lane switching, projectile combat, and dynamic obstacle generation. Its function is to demonstrate complex WebGL post-processing and real-time game loops inside the browser, transforming a static webpage into an interactive arcade environment. (Requires: three-js)

This is a Neon Retro Canvas Space Shooter. It is a fully self-contained arcade game rendered entirely within a web browser without external assets. Its function in a UI context is to demonstrate high-performance 2D rendering, touch-based virtual control schemes, and procedural audio synthesis.

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. (Requires: GSAP)

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. (Requires: PixiJS)

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. (Requires: Three.js, GSAP, Locomotive Scroll, Maku.js, imagesLoaded)

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. (Requires: Three.js, GSAP)

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. (Requires: Lodash)

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. (Requires: FontAwesome)

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. (Requires: Three.js)

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. (Requires: Three.js)

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. (Requires: GSAP, Lodash)

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. (Requires: ThreeJS, GSAP)

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. (Requires: ThreeJS)

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. (Requires: Zdog)

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. (Requires: three.js, swiper.js)

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. (Requires: svg.js, generative-utils.js, vector2d.js, debounce.js)