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.
Immediate mode APIs draw immediately. When you make a function call to create, for example, a rectangle, the rectangle gets drawn immediately. The system colors the pixels right away. In practice, you may not see the changes immediately (more on that in a bit). But, when you make a drawing call (like to the rectangle function), conceptually, the system colors the pixels. It forgets why it colored the pixels after its done doing it. Canvas is an immediate mode API.
Retained mode APIs create a list of objects that are drawn on demand. Function calls create objects in some storage (e.g., a list of objects), and eventually this list is drawn. The system remembers the objects, and refers to these when coloring the pixels. SVG is a retained mode API. Retained mode APIs are sometimes called display-list APIs since they keep a list of things to display.
This distinction will become clearer as we work through some examples.
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!):
a02.css, you will see that I am styling all of the other ones on this page to have a thin black border.
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.
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.
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.
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.
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
Also notice that the classes (where the colors come from) are defined
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.