Start learning with our library of video tutorials taught by experts. Get started
Viewed by members. in countries. members currently watching.
One of the most exciting additions that HTML5 offers to designers is the ability to draw free-form graphics on a drawing surface known as the Canvas. In this course, author Joe Marini introduces the technical concepts behind Canvas and shows how to perform drawing operations directly in a web page. The course covers drawing basic and complex shapes, setting colors and styles, adding shadows, patterns, and gradients, more advanced techniques such as scaling, rotating, and compositing objects, and how to incorporate Canvas elements in a slideshow and an animation.
Let's take a look at how canvas compares to SVG, or Scalable Vector Graphics. SVG is another way of drawing content into web pages. It's similar to the canvas, but it works in a pretty different fashion. So let's compare the two. Canvas has elements that are drawn programmatically. In other words, your script code draws elements directly onto the canvas surface. In SVG, the elements are actually a part of the page's DOM, or Document Object Model.
In SVG, when you have a shape, say a rectangle or an arc or some kind of curve, that's actually a tag that is in the document. Your script can refer to it in the DOM. You can manipulate it. You can't do that in canvas. Once something is drawn to the canvas, the browser forgets all about it. It just puts the bits onto the canvas and then moves on to the next operation. In canvas, drawing is done with pixels, whereas in SVG drawing is all done with vectors. Vectors are lines that are determined by start points and end points and curves, and on the canvas that's how you do it.
You actually put pixels directly onto the canvas surface. Canvas does not have animations built into it, whereas SVG does. In the canvas, when you want to create animations, you have to do that using script and timing mechanisms, which we will see how to do later on in this course. In SVG, basic animations, such as moving objects around, all that stuff is built in. Canvas is pretty high performance for pixel-based drawing operations, whereas SVG is based on a standard XML syntax.
So where canvas gets a little bit better performance because it can take advantage directly of your computer's hardware accelerated GPU, or Graphics Processing Unit, SVG uses XML which might be a little bit slower to process, but it provides better accessibility, because again, the elements of the drawing are part of the DOM. So this is a pretty complete basic look at how the two are different, but keep in mind they're not mutually exclusive. You can use canvas and SVG in the same web page.
And because you can position elements, you might even find a way to use the two of them together, have a canvas in the background and SVG on top. Now what you can't do is draw SVG into a canvas or vice versa, but just remember, they're not mutually exclusive. You can actually use both.
There are currently no FAQs about HTML5: Graphics and Animation with Canvas.
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.