Масштабирование элемента canvas со статическим разрешением

Question

У меня есть элемент canvas, и я хочу уменьшить его, но не меняя его логику js. Размер области рисования в js всегда должен быть 600x300px, даже если он отображается в HTML как 300x150px. Я знаю, что могу изменить размер изображения со статическим разрешением, но могу ли я сделать то же самое с холстом?

Answer 1

Изменение размера с помощью CSS масштабирует его

Демонстрационная версия

Таким образом, вы устанавливаете его размер для объектов рисования и т. Д. Через свойства width и height, например,

var canvas = document.getElementById("canvas"),
    ctx = canvas.getContext("2d");

canvas.width = 600;
canvas.height = 300;

, а затем измените его отображаемый размер с помощью css

#canvas{
   width: 300px;
   height: 150px; 
}​

Answer 2

У Loktar есть один способ - использовать CSS, но это может привести к тому, что некоторые вещи будут выглядеть забавно. Например, пути, масштабируемые с помощью CSS и масштабируемые с помощью собственного преобразования canvas, могут выглядеть очень по-разному (CSS выглядят плохо, а canvas - гладкими). Это зависит от браузера, хотя и может быть вполне нормально. По крайней мере, на Chrome текст, масштабированный таким образом, выглядит очень плохо.

Вместо этого я бы порекомендовал посмотреть на то, что я написал здесь о понятии "модельных" координат: Работа с холстом на экранах разных размеров

Напишите все так, как если бы пространство для рисования было 600x300, но оставьте холст размером 300x150.

Перед тем как что-либо нарисовать, используйте ctx.scale(0.5, 0.5); и все будет отлично выглядеть!

Вполне возможно, в конце концов, написать одно приложение Canvas, и оно масштабируется на все виды экранов, даже если вы просто нацеливаетесь на один размер экрана.