Right now, we have a canvas element that we're giving 500 by 500 within height. We're also calling out that canvas element, getting its 2D context, and, to that context, filling a rectangle that is the same width and height of the canvas element. Voila.
However, what happens with this setup whenever we try to make it a size that's, I don't know, not the canvas size? Let's say 50 by 50. Remember here, you don't use units whenever you're specifying.
Refresh. We get a not square looking shape. The reason this is happening is because our canvas element needs a set height and width. The one in the CSS will not do.
If we give it a height of 500 and a width of, again the same, 500, we go back and refresh. We see that, voila, we are now getting a 50 by 50 square shape with our fillRect method.
If we go back over here, refresh. We'll see it doesn't break because this is also acceptable.