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 - 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:
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 official Canvas drawing tutorial 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).
We can see an example of inconsistent coordinate systems when we handled the mouse on page 4. Mouse coordinates are given relative to the window. We need to convert those coordinates to the Canvas by figuring out where the canvas is in the window!
Next week, 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).
This is the last page of the workbook, but you still must look at the
questions.md file. And don't forget to edit the
README.md and to commit and push all your work!