Workbook 2, Page 1: Web Graphics APIs

First things first, the "kind" of graphics we will be doing is "object-based" or "vector" or "primitive-based" graphics, as opposed to "image-based" graphics. Read the Tutorial: Image vs. Object (raster vs. vector). The tutorial is from 2014, but it still applies (except that in class, we won't be doing much image-based graphics).

For most of this class, we will be doing non-image-based graphics. The other category is harder to name (I used the term "object-based"), but the basic idea is that we create pictures not by describing the color of each pixel (as image-based graphics would do), but rather by using a set of "primitives" (basic objects) that we put together to make pictures.

For doing (2D) graphics on web pages, there are two main APIs: Canvas and SVG. In class, we'll mainly be using Canvas, but we will look at SVG as well. For the purposes of this workbook, SVG is important because it represents a very different kind of API than Canvas. They both do similar things, but they do it in very different ways.

The distinction I'd like to make in graphics APIs is immediate vs. retained mode.

This distinction will become clearer as we work through some examples.

Box 1: Graphics Elements

Web pages are made up of elements - like paragraphs, headings, and buttons. To do graphics, we make special elements that give us a rectangular region that we can draw in. For the Canvas API (and actually some other APIs), we create "canvas" elements using the "canvas" tag. For SVGs, we create "svg" elements using the SVG tag.

Here I will make one of each, side by side (look at the HTML source!):

Note that these are normal HTML elements. We can give them ids (and classes), as well as styling them (here I gave them red borders). In fact, we can use CSS to style them - if you look at the style sheet for this workbook a02.css, you will see that I am styling all of the other ones on this page to have a thin black border.

By themselves, these elements are pretty boring - we need to write some JavaScript to make them more interesting. (SVGs will have an alternative, but we'll get to that later)

It may not be obvious in these examples, but in both SVG and Canvas, Y is measured downwards - this is different than you might be used to. We'll come back to talk about this later.

Box 2: Drawing 2 ways

Now I am going to use those same boxes, but draw in them. The HTML is basically the same as box 1 (except that the style comes from CSS). The difference is that the JavaScript is going to add a rectangle to each. Be sure to go look at the JavaScript in A02_p1.js (which gets loaded at the end).

Understanding the details of how each of those works we can do later, but observe the key difference (when you look at the code). In Canvas, we use the "fill" command to fill in the pixels of the rectangle, while in SVG we create a "rect" element and add it to the SVG element.

In this simple example, things don't seem too different.

Box 3: Moving Squares

Now, let's animate those squares. This is very similar to box 2, except that we'll create an animation loop to move the squares.

Have a look at the JavaScript for this box, especially the onTick function that moves things (remember animation loops from Workbook 1?).

This example hopefully highlights the difference between the immediate mode API (Canvas) and the retained mode API (SVG). In retained mode, the primitives (in this case the square) are represented as data. To move them, we change the data structure. In immediate mode, the primitives are drawn - they are only represented in the code. To animate things, we need to erase the picture and re-draw the picture.

In some ways, immediate mode is easier: we draw what we want, when we want. We can use whatever data structures we want to represent things. In other ways, retained mode is easier: we can created objects, and then alter them as needed.

Box 4: Understanding SVG

The basic idea of SVG in the web browser is that each graphics object (like the square) is an HTML element in the DOM - just the same as anything else (paragraphs, buttons, scripts, ...). Adding the rectangle to the SVG element is just like adding a button to a paragraph.

Since the graphics elements are just like any other HTML element, we can do the same basic things: assign them an id, give them classes, use style sheets, etc. We can even create them right in the html using tags. They generate events just like many other kinds of HTML elements. Try moving the mouse over the rectangles on the right. Then look into the JavaScript to see that this works just like any other event. Also notice that the classes (where the colors come from) are defined in a02.css.

Summary: Two APIs

On this page, you got to see two different ways to do graphics on web pages. One using Canvas (an immediate mode API), and the other using SVG (a retained mode API).

We'll learn to draw something more interesting than a rectangle using Canvas in the next pages.

However, in order to learn more about SVG, you need to look at other tutorials. You can start with the tutorials from CS559 in 2014 (these are the first two, there will be more for concepts in the coming weeks):

It seems like in modern browsers, you don't need to use the namespace in html. We do use it in the code (see the createElementNS usage in boxes above).

We will go on to talk more about Canvas on the next page.