[dandiablo]

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

Делаю клон змейки на 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);

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

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

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