Размер пикселя холста HTML5 зависит от размера холста?

Я рисую простые строки с холстом HTML5:

context = $('canvas')[0].getContext('2d');
context.moveTo(150, 20);
context.lineTo(300, 20);
context.stroke();

Когда мой холст CSS изменяется с:

canvas {
    width: 500px;
    height: 500px;
}

к

canvas {
    width: 1000px;
    height: 1000px;
}

ширина и высота хода также удваиваются! Что дает?

Ответы

Ответ 1

CSS определяет только видимый размер. Измените атрибуты width и height в HTML, чтобы настроить фактическое количество пикселей, которые его составляют. Если в HTML это 100x100, а в CSS 200x200, он будет визуально масштабирован на 2X.