HTML5 Canvas Code Examples

Hello Canvas

run

Drawing a blue rectangle. This example demonstrates:

• Getting the canvas 2D context
• Setting the fill style
• filling a rectangle
• using the Canvas pixel coordinate space

Smiley Face

run

Drawing a smiley face. This example demonstrates:

• The concept of paths
• Drawing circles and arcs using the Canvas functions beginPath, arc, fill, and stroke
• Fill style vs. stroke style

Hello Text!

run

Drawing the text "Hello Text!" in gray with a black stroke. This example demonstrates:

• Using the Canvas text API
• Setting the font
• Setting the stroke style
• Filling and stroking text

The Sierpinski Triangle

run

Drawing the Sierpinski Triangle. This example demonstrates:

• Drawing polygons
• Recursive geometric structures

See also the Sierpinski Carpet

Digital Clock

run

Drawing the text representing the time of day. This example demonstrates:

• Periodically clearing and redrawing the canvas using setInterval
• Drawing a background color instead of clearing the canvas to white
• Using colors picked by hand with JSColor
• Using the JavaScript Date API
• Eliminating the margin around the canvas using inline CSS on the body tag

Mouse Follower

run

Drawing a circle that follows the mouse. This example demonstrates:

• Responding to mouse events mousemove and mouseout

Bouncing Ball

run

A bouncing ball that can be swung around with the mouse. This example demonstrates:

• Listening for mouse events mousedown, mouseup, and mouseenter
• Animation using requestAnimationFrame (through a cross-browser shim)
• Bouncing physics
• Velocity vectors
• Simulation
• Drawing lines
• Animating only when the mouse is over the Canvas

Bouncing Balls

run

Many bouncing balls that can be swung around with the mouse. This example demonstrates:

• Multiple graphical objects with different colors
• Detecting which object is under the mouse
• A trailing effect from clearing the canvas with a semi-transparent rectangle

Tree Fractal

run

An interactive tree fractal. This example demonstrates:

• Changing parameters based on the mouse location

Starfield

run

A starfield with stars moving toward you. The mouse controls the focal length. This example demonstrates:

• Perspective projection
• The concept of focal length

Wave Simulation

run

A 1-dimensional numeric simulation of the Wave equation. This example demonstrates:

• Resizing the canvas to the window (or containing iFrame)
• Visualizing and interacting with a dynamic simulation
• Transforming (x,y) coordinates between a model space and the display space
• Using multiple script tags

2D Wave Simulation

run

A 2-dimensional numeric simulation of the Wave equation. This example demonstrates:

• An interactive grid
• Using luminance to visualize values
• Color object re-use optimization

Graphing Calculator

run

A grapher that plots equations. This example demonstrates:

• Use of eval() (which generally should be avoided)
• Use of the hash portion of the URL for storing state
• Drawing simple tick marks
• Animation based on a time variable
• Placement of HTML form elements over a canvas element

Multi-touch Fingerpainting

run (supports multi-touch in iOS devices)

Multi-touch fingerpainting, where each touch gets its own random color. This example demonstrates:

• Responding to touch events in iOS devices
• Tracking stateful objects based on touches
• Generating random colors

Multi-touch Air Hockey

run (supports multi-touch in iOS devices)

An air hockey game for the iPad. This example demonstrates:

• Setting the page to be "mobile Web capable"
  • This makes the page full screen when run from a shortcur saved to the iOS home screen
• Using an icon for saving to the home screen
• Setting the viewport to have a fixed scale
• Multi-touch manipulation of multiple objects simultaneously

Game of Life

run

Conways Game of Life, in CoffeeScript. View Source