Холст растягивается при использовании CSS, но обычно со свойствами ширины / высоты

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

Это объясняется на странице http://www.whatwg.org/html#attr-canvas-width (требуется JS) или http://www.whatwg.org/c#attr-canvas-width (вероятно, съест ваш компьютер):

Элемент canvas имеет два атрибута для управления размером растрового изображения элемента: width и height. Эти атрибуты, если они указаны, должны иметь значения, которые являются действительными неотрицательными целыми числами. правила синтаксического анализа неотрицательных целых чисел должны использоваться для получения их числовых значений. Если атрибут отсутствует или если анализ его значения возвращает ошибку, то вместо него должно использоваться значение по умолчанию. Атрибут width по умолчанию имеет значение 300, а атрибут height - значение по умолчанию 150.

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

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

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

Например, рассмотрим это (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 единица этих значений равнялась 1 пикселю на странице. Если эти атрибуты не указаны, они по умолчанию будут иметь width 300 и height 150.

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

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

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

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

Shannimal поправка

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

CSS устанавливает ширину и высоту элемента холста, поэтому он влияет на пространство координат, оставляя все нарисованное перекошенным.

Вот мой способ установки ширины и высоты с помощью Vanilla JavaScript

canvas.width = numberForWidth

canvas.height = numberForHeight

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

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

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

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