Javascript Canvas Flashcard

Front

Where is the origin (0,0) located on the canvas?

Back

Top Left

Answer explanation

In math, it's the bottom left. But on the canvas, it's the top left.

Front

In which direction does the y coordinate increase?

Back

Moving from bottom to top

Answer explanation

Math and javascript are the same for the x coordinate. To the right is increasing for x in math and javascript.

But it's different for the y coordinate. In Javascript, going down is an increasing y coordinate.

Front

Which one of these represents a point that is 50 pixels to the right of the top left corner and 70 pixels lower than the top left corner? (70, 50), (50, -70), (50, 70), (70, -50)

Back

(50, 70)

Answer explanation

Left/right is the x coordinate, which is first. So 50, should go there. Up/down is the y coordinate, which comes second. So 70 should go there.

We don't really use negative coordinates in javascript. So those don't make much sense.

Front

Which one of these represents a point that is 80 pixels to the right of the top left corner and 100 pixels lower than the top left corner? (80, 80), (getWidth(), 100), (80, 20), (80, 100)

Back

(80, 100)

Answer explanation

getWidth() is for when we want to think of the coordinate as how far it is from the right edge. So that won't work.

This is the distance from the top left corner, which in javascript is (0, 0). So we really just need to put the left/right # of pixels in the first spot (the x coordinate) and the up/down # of pixels in the second spot (the y-coordinate).

Front

Which one of these represents a point that is 80 pixels to the left of the top right corner and 100 pixels lower than the top right corner? Options: (getWidth() - 100, 80), (getWidth() - 80, 100), (80, 100), (80, getHeight() - 100)

Back

(getWidth() - 80, 100)

Answer explanation

The top is normally where we measure the y coordinate from, so that doesn't need to change.

But we usually measure the x coordinate from the left. So measuring from the top right corner makes our lives more annoying. To count from the right, we first go all the way right using getWidth(). That sets the x coordinate all the way to the right side of the canvas.

But we wanted to go 80 pixels left of that, so we just subtract 80 from getWidth().

Front

Which one of these represents a point that is 210 pixels to the left of the bottom right corner and 140 pixels higher than the bottom right corner? Options: (getWidth() - 210, getHeight() - 140), (getWidth() + 210, getHeight() + 140), (getWidth(), getHeight()), (210, 140)

Back

(getWidth() - 210, getHeight() - 140)

Answer explanation

The top is normally where we measure the y coordinate from, so measuring from the bottom means we need to subtract from getHeight(). getHeight() represents going all the way to the bottom. So subtracting 140 from that take us 140 above the bottom.

Same idea for the x coordinate. We want to be 210 from right edge, so do getWidth() - 210.

Front

Back

Answer explanation

getWidth() is the full width of the canvas. So dividing it by two will go halfway.

Same idea for getHeight().

Front

If A is at (30, 20) and B is at (115, 150), which of these would be the most reasonable coordinate for C? (75, 75), (20, 190), (205, 190), (190, 80)

Back

(190, 80)

Answer explanation

The x has to be larger than the x for A and B. The y has to be in between the y for A and B.

Front

In the canvas shown, which point would be at the location (getWidth()/2, getHeight() - 5)? Options: A, Q, B, C

Back

B

Answer explanation

B is in the middle of the canvas in the x-direction, so getWidth()/2 makes sense for B.

And it's just above the bottom edge of the canvas. getHeight() - 5 would be just 5 pixels above.

So B matches best.

Front

Every point with a y coordinate of 0 would have to be somewhere on the:

Back

Bottom edge of the canvas

Answer explanation

A y of 0 would be 0 pixels away from the top edge, so it would have to be on the top edge.