Why the Weird Behavior?

By now, you are probably wondering why there is this weird behavior when you set a canvas's size via CSS and when you set it directly on the element. The reason has to do with what exactly gets sized in both of those cases.

When you specify the size of the canvas's width and height attributes, you are specifying the size of the canvas's rendered area. When the size is specified via CSS, you scale the rendered area to match the defined CSS size. It is this discrepancy that results in the skewing that you see on your canvas.