Размеры сбиты, потому что у канваса свой вьюпорт, размеры этого вьюпорта задаются через атрибуты тега. А в CSS вы просто задаёте размеры DOM-элемента, который к вьюпорту никакого отношения не имеет.
Можно объяснить на аналогиях: вот у вас есть современный fullHD телефизор, а по нему показывают старое кино. которое было сняло под формат 4:3, естественно фильм получится растянутый по ширине. Вот фильм - это вьюпорт вашего канваса, а телевизор - это собственно сам элемент в DOM.
Для корректного изображения вам нужно обязательно найти где задаются viewportWidth и viewportHeight.