Размер холста HTML5 через CSS и атрибуты элемента

Question

Я не понимаю, почему следующие фрагменты кода дают разные результаты, потому что css будет масштабировать холст при его увеличении,

<style>
#canvas {
    width: 800px;
    height: 600px;
}
</style>
<canvas id="canvas"></canvas>

В отличие от этого подхода (который работает как ожидалось):

<canvas id="canvas" width="800px" height="600px"></canvas>

Answer 1

Объяснение здесь: http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html#attr-canvas-width как видно из другого поста, спасибо!

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

Answer 2

Подумайте, что произойдет, если у вас есть JPG, который равен 32x32 (у него ровно 1024 пикселя), но укажите через CSS, что он должен отображаться как width:800px; height:16px. То же самое относится и к HTML-холсту:

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

• Свойства CSS width и height управляют размером элемента на экране. Если размеры CSS не заданы, для макета используется собственный размер элемента.

Если вы указываете в CSS другой размер, чем фактические размеры холста, он должен растягиваться и сдавливаться браузером по мере необходимости для отображения. Вы можете увидеть пример этого здесь: http://jsfiddle.net/9bheb/5/

Answer 3

Лучший способ определить размер холста - включить в div и стилизовать ваш div с нужным вам размером.

Вот CSS

<style>
#divCanvas{
    width: 800px;
    height: 600px;
}
</style>

Вот HTML

<div id="divCanvas">
    <canvas id="canvas"></canvas>
</div>