Who's your daddy - Canvas > SVG

Use Canvas When...

  1. You're awesome
  2. Your drawing area is under 1000 x 1000px
  3. You need pixel level access
  4. You need special blending on your objects
  5. You can basically create SVG from canvas
  6. You want to export your creation as an image
  7. You can cut off browser support at IE9+
  8. You hate XML
  9. Dont Forget the Cheat Sheet!

Use SVG When...

  1. You're lame
  2. You need to draw over a large area
  3. You want to take advantage of the 'scalable' nature
  4. You don't need pixel level access (drawing application)
  5. You want to easily bind to objects
  6. You're dealing with a lot of text
  7. Performance isn't a major factor (i.e. video games)
  8. You want to support older browsers (IE6+)
  9. ...Maybe just use CSS transitions instead?

Third Party Libraries

  1. Canvas: Kinetic js
  2. SVG: Raphael js

Wrap Up

  1. Get reference to canvas element
  2. Get the 2d context (the clear plastic overlay)
  3. Use context.save() & context.beginPath()
  4. Use the draw methods (rect, arc, line) to draw to the buffer
  5. Use the render methods (fill, stroke) to apply the buffer to the canvas
  6. Modify the entire context with transforms