#1

Hi. I was reading Drawing graphics and came up with two questions. Can someone help?

  1. Taken from 0_canvas_start/style.css:

    body {
  margin: 0;
  overflow: hidden;
}

    The problem is, if I comment out overflow: hidden;, the scroll bar appears. I am confused because without the margin, the size of the canvas should be exactly the same with the window. So why is there still a scroll bar?

    P.S. I came up with this question when I was reading the translated version. It said that margin: 0; was used to remove the margin that causes the overflow. However, it didn’t explain about overflow: hidden;. Then I checked the English version of the guide, and realized that the explanation of style.css was removed about 2 years ago. The translated version hasn’t been updated for years, so that part was still preserved.

  2. Taken from 7_canvas_walking_animation/script.js:

    ctx.fillRect(-(width/2),-(height/2),width,height);

    I thought it should be ctx.fillRect(-(width/2),-(height/2),width/2,height/2); because earlier we “made the coordinate origin sit in the middle of the canvas”. However, after trying it out, I found that only the top left quarter was cleared. I don’t understand.

#2

Well, I just figured out the answer of the second question: The syntax of fillRect should be:

fillRect(x, y, width, height)

The 3rd and 4th parameters should be the rectangle’s width and height, not the coordinates of the bottom-right corner. So the provided code is correct.