Who's your daddy - Canvas > SVG
Use Canvas When...
- You're awesome
- Your drawing area is under 1000 x 1000px
- You need pixel level access
- You need special blending on your objects
- You can basically create SVG from canvas
- You want to export your creation as an image
- You can cut off browser support at IE9+
- You hate XML
- Dont Forget the Cheat Sheet!
Use SVG When...
- You're lame
- You need to draw over a large area
- You want to take advantage of the 'scalable' nature
- You don't need pixel level access (drawing application)
- You want to easily bind to objects
- You're dealing with a lot of text
- Performance isn't a major factor (i.e. video games)
- You want to support older browsers (IE6+)
- ...Maybe just use CSS transitions instead?
Third Party Libraries
- Canvas: Kinetic js
- SVG: Raphael js
Wrap Up
- Get reference to canvas element
- Get the 2d context (the clear plastic overlay)
- Use context.save() & context.beginPath()
- Use the draw methods (rect, arc, line) to draw to the buffer
- Use the render methods (fill, stroke) to apply the buffer to the canvas
- Modify the entire context with transforms