Я не понимаю, почему следующие фрагменты кода создают разные результаты, потому что css будет масштабировать холст, поскольку он был увеличен,
<style>
#canvas {
width: 800px;
height: 600px;
}
</style>
<canvas id="canvas"></canvas>
В отличие от этого подхода (который работает как ожидалось):
<canvas id="canvas" width="800px" height="600px"></canvas>
Объяснение здесь: http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html#attr-canvas-width, как видно в другом посте, спасибо!
Внутренние размеры элемента canvas равны размеру пространства координат, причем числа интерпретируются в пикселях CSS. Однако элемент может быть произвольно задан таблицей стилей. Во время рендеринга изображение масштабируется, чтобы соответствовать размеру макета.
Подумайте, что произойдет, если у вас есть JPG 32x32 (он имеет ровно 1024 общих пикселя), но укажите через CSS, что он должен выглядеть как width:800px; height:16px. То же самое относится к HTML Canvas:
Атрибуты width и height самого элемента canvas определяют, сколько пикселей вы можете нарисовать. Если вы не указали высоту и ширину элемента canvas, то за спецификации:
"атрибуту width по умолчанию соответствует 300, а атрибуту height по умолчанию соответствует 150.
Свойства CSS width и height управляют размером, отображаемым элементом на экране. Если размеры CSS не установлены, для макета используется собственный размер элемента.
Если вы укажете в CSS разный размер, чем фактические размеры холста, он должен быть растянут и раздавлен браузером по мере необходимости для отображения. Вы можете увидеть пример этого здесь: http://jsfiddle.net/9bheb/5/