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
Drawing a smiley face. This example demonstrates:
- The concept of paths
- Drawing circles and arcs using the Canvas functions
beginPath,arc,fill, andstroke - Fill style vs. stroke style
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
Drawing the Sierpinski Triangle. This example demonstrates:
- Drawing polygons
- Recursive geometric structures
See also the Sierpinski Carpet
<iframe width="400" height="70" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="canvas/digitalClock/index.html"></iframe>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
bodytag
Drawing a circle that follows the mouse. This example demonstrates:
- Responding to mouse events
mousemoveandmouseout
A bouncing ball that can be swung around with the mouse. This example demonstrates:
- Listening for mouse events
mousedown,mouseup, andmouseenter - Animation using
requestAnimationFrame(through a cross-browser shim) - Bouncing physics
- Velocity vectors
- Simulation
- Drawing lines
- Animating only when the mouse is over the Canvas
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
An interactive tree fractal. This example demonstrates:
- Changing parameters based on the mouse location
A starfield with stars moving toward you. The mouse controls the focal length. This example demonstrates:
- Perspective projection
- The concept of focal length
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
scripttags
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
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
run (supports multi-touch in iOS devices)
<iframe width="520" height="200" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="mobile/multiTouchFingerpainting/index.html"></iframe>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
run (supports multi-touch in iOS devices)
<iframe width="520" height="400" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="mobile/iPadAirHockey/index.html"></iframe>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
Conways Game of Life, in CoffeeScript. View Source
<script src="disqus.js"></script>