Page 2: Drawing with Canvas

Now that we understand that Canvas is an immediate mode graphics API, we can look more at what commands it gives us for drawing.

Canvas provides a rich set of options for creating shapes and coloring and styling them. We won’t talk about all of them here, and only cover the basic options. Beyond that, you are encouraged to go out onto the web to read and try things on your own.

We recommend reading this page first and then going on to other web resources, some of which are listed at the end of this page. We’ll explain some of the concepts, and then point you to things that give details.

As usual, all of the “drawing” code for this workbook is contained in the for_students directory - from the filenames, you should be able to figure out what pieces of code go with each box on this page.

You might wonder why we don’t use “live code boxes” where the actual code that gets run appears on the page itself and you can read and tinker with it in place. Most of the better tutorials on the web do this. And its great since the code is right there in the text, and it is really easy to tinker with. For CS559, however, we very quickly get to more complex programs where you will want to use “real tools”. So you should get used to that with the simple examples and see from the very start how we structure programs. You should also be able to use the debugger.

But this means that (1) you will actually have to go looking at the source code files, and (2) when we do put a snippet of code on a web page, it will be “marked up” as HTML and not interactive.

Review the Basics

On Page  1  (Web Graphics APIs) we saw a few simple examples. The simplest one was this:

Understanding this is quite important. Be sure to find the code in 02-02-01.js. This is the actual drawing code (without the comments - the code starts at line 29 in the file):

1
2
3
4

    let canvas = document.getElementById("box1canvas");
    let context = canvas.getContext("2d");
    context.fillStyle = "#F00";
    context.fillRect(30,30,30,30); 

Line by line:

1. Line 1 gets the canvas element from the DOM. The element is just like any other HTML element.
2. Line 2 gets the context object out of the Canvas element. The context object stores all of the state that we need for drawing - things like where we will draw, what the current color to draw is, partially finished objects, etc. At a practical level, most of the “drawing commands” are methods of this object.
3. Line 3 sets the color for filling objects. Canvas is a stateful drawing model. For example, we pick a color and then we draw with that color. In contrast, a stateless drawing model would pass everything we need to know to draw to the actual drawing command.
4. Line 4 actually draws the rectangle. It uses the “current state” of the context (such as the color we set on the previous line). Conceptually, the square is drawn immediately - changing the pixels on the screen. After the function completes, there is no memory that these pixels should be associated with a rectangle. The only representation of the rectangle is in the code. In practice, the drawing may happen asynchronously - we might not see the changes in the pixels until the system gets around to it.
5. Notice that the code displayed above varies slightly from the code in 02-02-01.js. In the actual file, we include a type checking comment, /** @type {HTMLCanvasElement} */, which is enabled in vs code by the // @ts-check comment at the top of the file. This comment tells the type checker that canvas is of type HTMLCanvasElement, which then allows auto-complete and checks that function names are valid, for example canvas.getContext() on the next line.

You can look at the Mozilla (Official) Canvas Tutorial: Getting Started (optional) to get more details. You can see a few differences - these are worth pointing out:

1. They are concerned with “fallback content” - if you’re a real web developer, you need to be worried about what happens if someone uses an old browser. For class, we assume that everyone who looks at your program will have a modern, compatible web browser.
2. They put the drawing code into an onload event handler for the Canvas, whereas we use defer on the script tag. Either way, we cannot draw into the canvas element until it has been created. For us, we wait until the entire page (including the canvas element) has been created.

Insides and Outsides

You may have noticed that when we drew the rectangle, we “filled” its inside with red color (#F00).

In Canvas, we can apply styles (like colors) to both the insides and outsides of shapes (like rectangles). The inside is the “fill” and the outside is the “stroke” (as in, you make a stroke with a pen to draw the outline or boundary of a shape).

With Canvas, we need to do the stroke and fill separately. They are different commands, and get their styles from different properties. Here are some examples. Look at the JavaScript code (you can find it in 02-02-02a.js)!

You can look at the Mozilla (Official) Canvas Tutorial: Styles (optional) to see more about what styles are available (including non-constant fills).

There’s another key concept hidden in that example. When you set a drawing state, it stays for the next object. So, for example, when square 3 in the previous example set dashed lines, the next square also got it (whether it wanted it or not). In the simple example, we can see what is going on - but in a more complex example, the state might get set by some code somewhere very different.

Since the green square didn’t know what happened before it, if it wants something specific, it has to reset all of the different pieces of the state!

Instead, a better idea is to have drawing an object “clean up” after itself. If we set some state to draw an object, we set it back before going on to the next one. Unless we’re sure it wants our changes. To simplify this convention, stated APIs (like Canvas) allow us to “save” and “restore” the state. Observe (and look at the source code! 02-02-02b.js):

Saving and restoring works like a stack: if you save twice, it makes a stack of the two saves. Each restore takes something else off of the stack.

Notice (in 02-02-02c.js) how this leads to nesting, or “hierarchy”. We will use this concept (save/restore with a stack) for many things in graphics.

Drawing Order and Transparency

If rectangles (or any shape, for that matter) overlap, the shape that is drawn last covers over anything that was drawn before it. This is like painting with thick paint - we see the last thing drawn. Here is an example (in 02-02-03a.js):

Of course, if we don’t fill, then we don’t cover over things inside the rectangle.

Drawing order even effects commands that draw the same rectangle (remember, we draw the stroke and the fill separately). The stroke and fill share some of the same area. Since the stroke is centered on the line around the filled area, the fill covers half the stroke. Here is an example where we switched the order of stroke and fill ( 02-02-03b.js):

All of our colors so far have been opaque - they cover over what is behind them. We can also make semi-transparent colors. That is, the color lets through some of what’s behind it. To do this, we extend our colors with an extra number: the opacity (or alpha). In addition to an amount of red, green, and blue, we add a fourth number that is the amount that it covers what is behind it. By default, this is 100% (or 255/255), so things are opaque. But most places where we specify 3 numbers, we can specify a fourth - so to make red that only blocks 50% of what it covers, we can say #FF00007F (where 7F is 127, or about half of 255).

Remember that drawing order matters - the transparent thing covers what was there before it. Things drawn afterwards will cover the transparent thing. Also, the transparent things will let the background (white) through if that is what they cover.

Here is a simple example ( 02-02-03c.js):

We are using the simple math for transparency (it’s called alpha-blending). There are more ways to combine the colors. Canvas supports many of them, but we might not get to learn about all of them in class.

Note that in the code, I specified colors as rgba(255,0,0,.5) rather than #FF00007F. Also, notice that the stroke can be transparent, and we can have transparent dark and light colors.

Shapes Besides Rectangles (Paths)

Canvas has 2 kinds of shapes: rectangles, and everything else. There are also images and text, which can be considered shapes, too.

To make a path based shape, you define a “path” - which is basically the outline of the shape, and then you can stroke and fill that. Just as the rectangle had fillRect and strokeRect paths have stroke and fill. The biggest difference is that rather than telling stroke and fill what the shape is, it uses the current path. That is, the current path is part of the context, the same way things like fill color and line width are.

The official documentation is the best place to look Mozilla (Official) Canvas Tutorial: Drawing Shapes. You can skip the section on “Bézier and quadratic curves” for now - we’ll learn about them in a few weeks. The parts about Path2D and SVG paths you can skip as well.

Make sure you understand how to make paths, and use them to draw with Canvas. And note that to make a circle, you need to draw an arc that has 2*Math.PI radians of arc to it.

Summary

Now we’ve seen the basics of drawing with Canvas. On the Page  4  (Canvas Drawing: Your Turn), you’ll get to try it out.

From this page, make sure you understand the concepts (like drawing state).

You will want to learn more about Canvas drawing, so you can make more interesting pictures. Some of the things (like curves and transformations) we’ll introduce in the coming weeks as we introduce the graphics concepts in class. For now, focus on making shapes and giving them styles.

If you would like more resources, here are some good ones (all optional):

1. Mozilla (Official) Canvas API Documentation This is the “official” documentation. Everything is in here, somewhere. It is actually quite well written and well organized.
2. Mozilla (Official) Canvas Tutorial (top level) This is part of #1. It very quickly gets beyond the basics. We mainly need the basics. Many of the pages are very useful such as Mozilla (Official) Canvas Tutorial: Drawing Shapes and Mozilla (Official) Canvas Tutorial: Styles.
3. Canvas Cheat Sheet: A concise page that reminds you of the different things you can do with Canvas.
4. HTML Canvas Deep Dive: This is a “book length” tutorial on web graphics program (it even gets to 3D stuff). The first chapter covers a lot of the basic stuff.

Ok, now move on to Next: Where did I draw