Canvas растягивается при использовании CSS, но обычно со свойствами «width» / «height»

Чтобы установить width и height, вам нужно использовать

canvasObject.setAttribute('width', '475');

Для элементов <canvas> правила CSS для width и height устанавливают фактический размер элемента canvas, который будет нарисован на странице. С другой стороны, атрибуты HTML width и height устанавливают размер системы координат или сетки, которые будет использовать API-интерфейс canvas.

Например, рассмотрим это (jsfiddle):

var ctx = document.getElementById('canvas1').getContext('2d');
ctx.fillStyle = "red";
ctx.fillRect(10, 10, 30, 30);

var ctx2 = document.getElementById('canvas2').getContext('2d');
ctx2.fillStyle = "red";
ctx2.fillRect(10, 10, 30, 30);

canvas {
  border: 1px solid black;
}

<canvas id="canvas1" style="width: 50px; height: 100px;" height="50" width="100"></canvas>
<canvas id="canvas2" style="width: 100px; height: 100px;" height="50" width="100"></canvas>

Оба имеют то же самое, что нарисовано на них относительно внутренних координат элемента холста. Но во втором холсте красный прямоугольник будет в два раза шире, потому что полотно в целом растягивается на большую область с помощью правил CSS.

Примечание. Если правила CSS для width и/или height не указаны, браузер будет использовать атрибуты HTML для размера элемента таким образом, чтобы 1 единица этих значений равнялась 1px на странице. Если эти атрибуты не указаны, они будут по умолчанию равны width из 300 и a height of 150.

Холст будет растянут, если вы установите ширину и высоту в CSS. Если вы хотите динамически манипулировать размером холста, вы должны использовать JavaScript следующим образом:

canvas = document.getElementById('canv');
canvas.setAttribute('width', '438');
canvas.setAttribute('height', '462');

Коррекция ланномания

var el = $('#mycanvas');
el.attr('width', parseInt(el.css('width')))
el.attr('height', parseInt(el.css('height')))

Браузер использует ширину и высоту css, но элемент холста масштабируется на основе ширины и высоты холста. В javascript читайте ширину и высоту css и задайте ширину и высоту холста.

var myCanvas = $('#TheMainCanvas');
myCanvas[0].width = myCanvas.width();
myCanvas[0].height = myCanvas.height();

Если вы хотите динамическое поведение, основанное на, например, CSS-медиа-запросы, не используйте атрибуты ширины и высоты холста. Используйте правила CSS, а затем, прежде чем получить контекст рендеринга canvas, присвойте атрибутам width и height стилям ширины и высоты CSS:

var elem = document.getElementById("mycanvas");

elem.width = elem.style.width;
elem.height = elem.style.height;

var ctx1 = elem.getContext("2d");
...