I use the P5.JS library to draw a square wide and full canvas:

function setup() { createCanvas(100,100); background(200,200,200); } function draw() { rect(0, 0, 100, 100); }

According to the P5, 100 directory in my rect () method, this is the width and height of the rectangle.
Then why does my square go beyond the canvas and I don’t see its two sides?

enter image description here

If you change to rect(0, 0, 99, 99) then the square takes up the entire outline.

enter image description here

Then it may seem that 99 are the coordinates of the opposite angle,
but it is not, it is precisely the length and width.

  • one
    Not sure, but I think that this simple frame of the square does not fit - smellyshovel
  • one
    It turns out that the left and upper frame are part of the square, and the right and bottom is not. Otherwise we would not see any of them. Strange. - Vitaly Komarov
  • one
    No, why not. Just the left and top frames are built from the edges of the canvas. In particular, the same situation with simple DOM elements. If you don’t tinker with the box-sizing CSS property, then a square with a side of 100px and a frame with a thickness of 100px will actually not be 100 by 100, but 300 by 300, and if you limit the scope to a hundred pixels, then you’ll will see. - smellyshovel
  • No, I, of course, do not claim that this is the problem. I am not familiar with P5, much less its API, just guessing from the most obvious. It is quite possible (although unlikely) that the problem really lies in the wrong documentation. - smellyshovel
  • Clearly, the contour is not part of the square. And then, to display the contour of the square you need to slightly move to the right and down. Thank. - Vitaly Komarov

0