Page 3: Where did I draw

CS559 Spring 2021 Sample Solution - Workbook 2

Written by CS559 course staff

You can try out the example solutions here. The interesting code is on page 4 and page 7.

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! Even the Mozilla (Official) Canvas Tutorial: Drawing Shapes starts with this.

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).


Next: Canvas Drawing: Your Turn

Page Rubric

    This page (3) has no points.