HTML5 Canvas or SVG: Choose Wisely
var canvas = document.getElementById("canvas"); var drawing = canvas.getContext("2d"); drawing.moveTo(0, 0); drawing.lineTo(200, 200); drawing.lineWidth = 2; drawing.strokeStyle = "red"; drawing.stroke();In the example, a red line is drawn from the position "0, 0" to "200, 200". Via SVG, the same line would be drawn using an according SVG element.
Pixel vs. VectorsAnother significant difference is the way the formats display content. While HTML5 Canvas is a pixel based format (a PNG image is created within the browser), the SVG format is vector based. Of course, HTML5 Canvas also allows you to create graphics for high-resolution displays. But, at the latest, after zooming in, the Canvas drawings become pixelated, while SVG drawings keep their acuity. Once again, the SVG format stays in the lead - especially since you can even integrate bitmaps within an SVG document.