The canvas itself is an HTML element that you can place anywhere in your page, just as with most other elements. The drawing part is accomplished using either a 2D or 3D (WebGL) drawing context. Right now we’ll focus on 2D because it has much more browser support, with 3D being still in its infancy. Here’s some code that displays a JPEG image in grayscale:
The following example creates an oval with a linear gradient using SVG:
<svg version="1.1"> <defs> <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%"> <stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1" /> <stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1" /> </linearGradient> </defs> <ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#grad1)" /> </svg>
Comparing the Differences
SVG Is Vector-based, Canvas Manipulates Pixels
What’s the difference, you ask? Remember those old vector video games like asteroids and Tempest. No? OK, I’m getting up there! Anyway, those were based on bright line drawings. One of the reasons for their popularity was that they looked quite different from typical games at the time. With regards to SVG and Canvas, the differences are a lot less dramatic visually, as you can load bitmaps in SVG, and you can draw lines using the canvas API. However, creating the image may be easier using one technology over the other, depending on whether your graphic is mainly line-based or more image-like.
SVG Relies on Files, Canvas Uses Pure Scripting
For front-end designers, there’s no question that SVG would be easier to configure, due to XML’s high readability. This is the same reason that Frameworks like Spring have been so popular these last few years; pretty much anyone can use them. Canvas images are created programmatically and require some programming expertise that is more suited to a developer.
I’ve tried to provide some options here that you can hopefully apply to your own skillset and predispositions. There is no black and white answer to be found, so you’ll have to weigh your options before committing to any one technology. Consider that SVG will result in slower rendering as document complexity increases due to SVG’s integration into the DOM. Hence, SVG would probably not be best for dynamic applications like games. Downsides of the Canvas include poor text rendering capability, lack of animation, as well as mediocre accessibility support. The best advice I can give you is to choose the one that not only best fits the task at hand, but your own comfort level as well.