загруженное изображение JavaScript размыто (PNG)

Я работаю над школьным проектом (всего пару месяцев знания JS), и я наткнулся на эту проблему с рисованием спрайтов на моем холсте. Для рисования я использую эти биты кода.

treeImage = new Image();
treeImage.src = "sprites/treeSprites.png"; 

function rocks() { //to create the rock
    this.x = 1920 * Math.random(); //random location on the width of the field
    this.y = ground[Math.round(this.x/3)]; //ground is an array that stores the height of the ground
    this.draw = function() {
        ctx.save();
        ctx.translate(this.x, this.y);
        ctx.rotate(Math.tan((ground[Math.floor(this.x/3)]-ground[Math.floor(this.x/3)+1])/-3));
        //^rotating based on its position on the ground^
        ctx.drawImage(treeImage, 200, 50, 50, 50, -25, -50, 50, 50);
        ctx.restore();
    }
}

len = rockArray.length; //every frame
for (var i = 0;i<len;i++) {
    rockArray[i].draw();
}

поскольку вы можете видеть, что я запрашиваю только 50 на 50 из изображения, а это 50 на 50, как вы можете видеть на изображении ниже, правильно рисуется мной (насколько я знаю), но точно за пределами 50 на 50 есть черные линии, которые не должны мешать, потому что я только запрашиваю квадрат внутри черных линий. но когда я рисую камень, черные контуры видны. (предположим, что я не могу удалить черные линии по слишком подробным причинам)

доказательство того, что его действительно 50x50, и как он выглядит на моем холсте

что я догадываюсь, что изображение JavaScript хранится, когда я загружаю изображение, размытое, а затем, когда я запрашиваю эту часть из изображения, линии тоже видны, так как размытие "разбрасывает" строки на квадрат я request,

это так? есть ли способ, которым я могу это предотвратить? или, может быть, еще один способ решить эту проблему? потому что я знаю, что люди сделали игры с пиксельным искусством внутри холста, и их изображения не размыты вообще, так сказать.