Как масштабировать спрайт относительно экрана?

Question

[po4emuch]

Добрый день. Пишу браузерную игру на js. Появилась проблема, при масштабировании окна. Необходимо сделать так, чтобы при уменьшении окна браузера, сохранялись пропорции спрайтов относительно экрана. Например как в slither.io

Answer 1

[Алексей]

Используйте относительные единицы измерения в стилях, например rem.

Comments

[Rustam Bainazarov]

rem не поможет, он от экрана не зависит. Тут тогда уже vw нужен. Но скорее всего речь о canvas, а там не работает CSS.

[Алексей]

Рустам Байназаров, ну тут речь про спрайты, полагаю всё-таки svg а не canvas.

[Rustam Bainazarov]

Алексей, спрайты это не только SVG (обычно это вообще растровые изображения) или что-то иное. Это общее название для такого типа вещей.

www.williammalone.com/articles/create-html5-canvas...

Answer 2

[dollar]

Попробуйте так:

canvas.width = canvas.height * (canvas.clientWidth / canvas.clientHeight);