HTML5 Canvas: What and Why

by Mike Gleicher on August 28, 2015

in 559 Graphics

This is more of a “Why are we using HTML5 Canvas in 559” than anything else. But to answer that question, I need to make sure you know what “it” is first. This is meant to come before my “getting started” tutorial (since you should know what you’re starting and why you’re starting it).

What is Canvas

Technically, when I say Canvas, I should be saying the “Canvas 2D drawing API” because just “Canvas” could also be referring to the generic container that also serves to provide a space for other APIs to draw on the web page. To save typing, when I say “Canvas” I mean the 2D API.

Canvas is part of the specification for web pages. It gives a way to make space on a web page, and a set of operations for drawing on it. However, to do the drawing (as far as I can tell), you need to access the drawing commands from JavaScript. So Canvas is also a JavaScript API. But this is where JavaScript and web browsers become hard to tell apart. Like most JavaScript APIs, a Canvas is an object that has some methods defined. If you run a JavaScript program in a web browser you can ask for one of these things. There might be other ways to get a Canvas, but I don’t know about them.

Why Canvas?

Of the web graphcis APIs, Canvas is probably not the most popular anymore. Real web pros might say its a little dated. You’re probably eager to use things like WebGL and Three and SVG and …

But, there are a few reasons that we’re starting with it first:

  1. It’s an example of an immediate mode API. The other web graphics APIs are not immediate mode. I want you to have the experience of working with an immediate mode API so you understand the difference.
  2. It’s much easier to get started with than anything else. It will let you practice working with web programming with making the graphics easy. Once you’ve got the web programming bit down, then we can move on to things where you can do more graphics.
  3. It has only basic stuff in it. Which means to do fancy stuff, you have to do it yourself. And I am going to ask you to do some of that. (yes, you will implement your own 3D stuff on top of Canvas)

I have used Canvas this way successfully in a prior class (see CS679 2012 where I just told people to use this for a project,  giving them only a little tutorial). Once you get are comfortable (or at least started with) Canvas and web programming, then you can move on to WebGL and other fancier things.

Getting Started

In order to do things with Canvas, you need to tackle the following basic issues (and I recommend them in this order).

  1. You need to know a little about HTML so you can make a web page and put a place to draw on it.
  2. You need to know a little about JavaScript and how it interacts with HTML, so you can try to have your program draw on the page.
  3. You can start using the Canvas API to draw pictures. Some basic questions will inevitably come up. (where do I draw? when do I draw? what do I draw?)
  4. You need to experiment with the tools (like the debugger in the web browser, and maybe the text editor/IDE you’ll choose to work with.
You can also just try diving in – which I recommend. Look at my getting started with Canvas tutorial. Read through it. When you get to the end (with the sample program) read the sample program carefully and make sure you understand it. Tinker with it (you can change it live right on the web page) and see what happens. Save a copy of it to a text file and try editing it. Load it into a web browser and find the debugger and step through it.
Then, go read some more and become a better JavaScript programmer. In later assignments, you’ll have to write (and read) more complicated programs.

Canvas Resources

I have my own getting started with Canvas Programming Tutorial, made especially for CS559 students.

Eloquent JavaScript (one of my favorite JavaScript books) has a nice chapter on it.

A nice tutorial: http://diveintohtml5.info/canvas.html

Another set of tutorials using a set of live code examples: http://www.html5canvastutorials.com/

Official tutorial: https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial
Official docs: https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API

31 tutorials in order – each discussing a different aspect. Be careful, some of the things aren’t as good as they should be, and they often use jQuery (rather than standard JavaScript). http://creativejs.com/2011/08/31-days-of-canvas-tutorials/

A fun exploration of drawing with the mouse. He makes cool looking line styles. The demos run, but the way he sets up handlers (using canvas.onmousedown and things like that) never work for me. http://perfectionkills.com/exploring-canvas-drawing-techniques/

Handy cheat sheet:
http://cheatsheetworld.com/programming/html5-canvas-cheat-sheet/

Print Friendly, PDF & Email

Previous post:

Next post: