Как избежать автоматической растяжки холста HTML

У меня есть следующий фрагмент HTML:

<style type="text/css">
    #c{width:200px;height:500px}
</style>
<canvas id="c"></canvas>
<script type="text/javascript">
    var i = new Image();
    i.onload = function () {
        var ctx = document.getElementById('c').getContext('2d');
        ctx.drawImage(i, 0, 0);
    }
    i.width = i.height = 20; // actual size of square.png
    i.src = 'square.png';
</script>

Проблема заключается в том, что нарисованное изображение автоматически растягивается (изменяется) пропорционально размеру холста. Я попытался использовать все доступные параметры (drawImage(i, 0, 0, 20, 20, 0, 0, 20, 20)), и это не помогло.

Что вызывает растяжку моего рисунка и как я могу это предотвратить?

Спасибо,
Том

Ответ 1

Вам нужны атрибуты width и height в элементе canvas. Они определяют пространство координат для холста. По-видимому, по умолчанию используется холст с соотношением сторон 2: 1, который ваш CSS перекошен в квадрат.

Ответ 2

Стоит отметить, что атрибуты ширины и высоты холста не похожи на старую школу <img> ширины и высоты. Они не заменяют CSS. Они определяют, сколько пикселей должно иметь пиксельный буфер в самом холсте, и если вы не применяете к нему размер с помощью css, css будет подразумевать его размер из этой формы этого пиксельного буфера. Установка размера элемента в css не устанавливает размер буфера пикселей - он изменяет его размер. С точки зрения CSS, < холст > полностью совпадает с <img> .

Ответ 3

Хорошо, немного проще (и легче), чем JQuery - это JAVASCRIP ITSELF, конечно!

Если вам нужно изменить динамические размеры холста, просто используйте:

document.getElementById('yourcanvasid').setAttribute('width', aWidth);
document.getElementById('yourcanvasid').setAttribute('height', aHeight);

Ответ 4

Если вы используете JQuery, вы не должны устанавливать CSS (как упомянутые выше комментаторы). Вам необходимо установить атрибут так:

$("canvas").attr('width', aWidth);
$("canvas").attr('height', aHeight);

отлично работает.

Ответ 5

Мне было проще просто поставить цикл while, ожидающий тайм-аута в моем цикле анимации, например:

function animate() {
    c.clearRect(0, 0, window.innerWidth, window.innerHeight);
    ryuji.draw();
    ryuji.update();
    let now = Date.now();
    then = now + (1000 / fps);
    while (Date.now() < then) {

    }
    requestAnimationFrame(animate);
}