javascript loaded image is blurry (PNG)

I'm having a problem drawing sprites on canvas for a school project. My code:

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();
}

I only request 50×50px from the image. Exactly outside of the 50×50 there are black lines (which shouldn't interfere because I only request the square within the black lines) but when I draw the rock, the black outlines are visible. (For other reasons, I can't remove the black lines.)

I'm guessing the image JavaScript stores when I load the image is made blurry, and then when I request that part from the image, the lines around are visible too, as the blur "spreads" the lines into the square I request.

Is there a way I can prevent this?

Use ctx.imageSmoothingEnabled = false.

This will make the image sharp instead of smoothed (blurry).

(documentation)