Page 3: Where did I draw

There is one detail we glossed over: with either Canvas or SVG, we referred to positions (such as the center of a circle, or corner of a rectangle) using two numbers. What do these mean?

Notice that they don’t always mean the same thing: here are two SVG elements, each with a circle at position (30, 30). Look in the HTML ( 02-03-01.html) - you’ll see the exact same line is repeated twice. Yet the two circles aren’t in the same place. You can see both of them on the page.

It should be obvious that we interpret position x=30, y=30 differently in each one.

For SVG and Canvas, we interpret coordinates (x,y pairs) as follows:

• The origin (0,0) is in the top left corner of the element. The picture above has 2 SVG elements, each one has its origin at its top left corner.
• The x value measures the distance to the right, starting at the origin. Each unit, is one “pixel” (more on that in a moment). So x=5 means move 5 “web pixels” to the right from the left edge of the element.
• The y value measures the distance downward from the top, starting at the origin. Note that this is different than what we typically do in math classes, where the origin is at the bottom and y goes upwards. Again, each unit of y is one “pixel”.

These three parts (where is the origin, how to interpret x, how to interpret y) are critical - if we don’t know them, we cannot interpret x, y numbers as places to draw!

A pesky detail...

If you notice, I put the term “pixel” in quotes. The units of measure aren’t really pixels, they are “web pixels” which are defined in a way that should be somewhat independent of screen resolution. The actual size depends on various scaling factors and how the web browser interprets things.

The important part is that the browser does treat the units of measurement consistently. So if the whole Canvas element is 200 “pixels”, then one pixel is 1/200th of the whole element.

We call this information about how to interpret coordinates a coordinate system. The official tutorial uses the term “coordinate space”. A key idea in computer graphics is that we need to understand coordinate systems and always try to work in a convenient coordinate system. For example, when drawing, having a coordinate system relative to the current element we’re drawing in is very convenient. Having to talk about things relative to the position on the screen would be inconvenient. We’d have to move everything if the page was scrolled or the window was moved.

In class, we will see how to work with coordinate systems mathematically. The trick will be to use matrices to represent coordinate systems, which requires us to use vector algebra. To make sure you’re ready for that, please read up on some vector algebra basics (it should be a review from your math classes).

Specifically:

• Read the CS559 Tutorial: Points, Vectors, Coordinate Systems to get a sense of the terms we are using
• (optional) If you aren’t fluent with matrices and vectors (or, if you want a refresher), we recommend reading through chapters 1, 2 and 4 of Practical Linear Algebra (available at the Practical Linear Algebra at the UW Library.

Next: Canvas Drawing: Your Turn