Javascript-форум - Почему растягивается изображение в Canvas?

Javascript-форум (https://javascript.ru/forum/)

- Общие вопросы Javascript (https://javascript.ru/forum/misc/)

- - Почему растягивается изображение в Canvas? (https://javascript.ru/forum/misc/85497-pochemu-rastyagivaetsya-izobrazhenie-v-canvas.html)

Почему растягивается изображение в Canvas?

Доброго времени суток, друзья!

Делаю клон змейки на canvas и изображения яблока у меня странное:

Вот.

Но нормальное яблоко у меня 32px на 32px

Код рисования:

const canvas = document.getElementById("game");

const ctx = canvas.getContext("2d");

const foodImg = new Image();

foodImg.src = "img/food.png";

let widthField = canvas.width;

let heightField = canvas.height;

let box = 32;

food = {
    
    x: Math.floor((Math.random() * (widthField - box))),
        
    y: Math.floor((Math.random() * (heightField - box))) ,
    
    width: box,

    height: box
};

};

function drawGame () {
 
    ctx.drawImage(foodImg, food.x, food.y, food.width, food.height);

}

let game = setInterval(drawGame, 100);

Я уж и размер яблоку задал. Уменьшается, если размер делить на двое.

Почему его так колбасит то? Изначально же должно быть нормального размера!

Благодарю за помощь!

dandiablo,
вы что-то не договариваете ...

<!DOCTYPE HTML>
<html>
<head>
    <title>Untitled</title>
    <meta charset="utf-8">
    <style type="text/css">
        #game {
            border: 1px solid #8B4513;
        }
    </style>
</head>
<body>
    <canvas height="300" width="300" id="game"></canvas>
    <script>
        const canvas = document.getElementById("game");
        const ctx = canvas.getContext("2d");
        const foodImg = new Image();
        foodImg.src = "https://i.postimg.cc/QMgFDqpk/food.png";
        let widthField = canvas.width;
        let heightField = canvas.height;
        let box = 32;
        function drawGame() {
            let food = {
                x: Math.floor((Math.random() * (widthField - box))),
                y: Math.floor((Math.random() * (heightField - box))),
                width: box,
                height: box
            };
            ctx.drawImage(foodImg, food.x, food.y, food.width, food.height);
        }
        let game = setInterval(drawGame, 1000);
    </script>
</body>
</html>

Что же интересно, я могу не договаривать? Ваши предположения?

Единственное отличие:

у Вас:

<canvas height="300" width="300" id="game"></canvas>

У меня:

<canvas id="game"></canvas>

И параметры, соответственно, в CSS:

#game{
    width: 647px;
    height: 517px;
    border: 5px #24722a solid;
    background: rgba(223, 190, 3, 0.8);
    border-radius: 10px;
}

dandiablo,
надо выставлять размер через атрибуты.

если ты в стилях указал width: 647px; и height: 517px;, это не значит, что холст будет состоять из 647х517 пикселей. У него есть какие-то дефолтные размеры холста, вот они и растянутся.

Япона мама!

Действительно, стоило только вынести высоту и ширину из css в canvas, как надо было, так все и заработало!

Спасибо, что повторили, увидел разницу.

Вот бы уж не подумал... Оо!

dandiablo,
<canvas> это как <img> только с возможностью скриптинга, поэтому в плане css и другого ведет себя также, растягивается, имеет свои атрибуты размеров, можно сохранить картинку как... и тд.

Блин, вот об этом не говорили ни где. Буду знать, благодарю!

Цитата:

Сообщение от dandiablo

Блин, вот об этом не говорили ни где.

Об этом написано
https://developer.mozilla.org/ru/doc...%D0%B8% D0%B5

Цитата:

Отображаемый размер холста может быть изменён используя stylesheet. Изображение масштабируется при рендеринге, чтобы соответствовать стилю размер. Если ваш рендеринг кажется искажённым, попытайтесь указать ваши атрибуты ширины и высоты точно в атрибутах <canvas>, и не используя CSS.