In the 'size' selection, the canvas size is defined as 200x200 in the HTML. This defines the user coordinates (or the canvas coordinates). The canvas box is defined in CSS as 100% width and 100% height of the demo-block (400x500). The green area shows the displayed area.
You can see that although we have 200x200 square canvas element, it is not a square, since the actual size is not a square (400x500). Thus, the canvas is scaled in y-axis to fill 500 real pixels. This means that every 200 canvas pixels in y-axis are equivalent to actual 500 pixels, and every 200 canvas pixels in x-axis are euivalent to actual 400 pixels.
Try: Set the viewport height to be equal to the viewport width. Do it by removing the comment in the JS main code, and pressing run, or by changing the demo-block size, for example to 400x400.