Canvas Examples

Some stuff I got to work. NOTE: All the files are available on GitHub.

Learning to Use the HTML5 Canvas

  1. Triangles: Fill and stroke
  2. Circles and Arcs: Fill and stroke
  3. Images: Scale and tile an external image file (photo, JPG)
  4. A Grid of Colored Squares: Generating colors
  5. Triangles: Add colors with fill and stroke
  6. Transparency: Create semi-transparent blocks of color and overlay them on a photo
  7. Lines and Grids: Drawing sharp, crisp lines
  8. Understanding the canvas coordinates: A triangle on top of a grid, with x, y coordinates
  9. Animated text: Use Google fonts to write text on the canvas, and then animate the text
  10. Using Google Web fonts: This example solves the problem of Google fonts not appearing and also shows you how to position text as you want it
  11. Drawing curves: Create either quadratic or Bezier curves
  12. Control of a Bezier curve: Interactive! Click buttons to see how control points alter the shape of the line
  13. Fully interactive dragging: Drag either one of two squares to change the shape of a curve in realtime.

Animation and Canvas

  1. Canvas Test with Ball: Uses JavaScript, processing.js