Масштабируемый элемент холста со статическим разрешением

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

Ответ 1

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

Live Demo

Итак, в основном вы устанавливаете свой размер для рисования объектов и т.д. с помощью свойств width и height, таких как

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

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

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

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

Ответ 2

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

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

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

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

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