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

Solution 1:

Use ctx.imageSmoothingEnabled = false.

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

(documentation)

Solution 2:

If you draw a vertical line at x=5 and width = 1, the canvas actually draws the line from 4.5 to 5.5 this results in aliasing and a fuzzy line. A quick way to remedy that so it is a solid line is to offset the entire canvas by half a pixel before doing anthing else.

ctx.translate(-0.5, -0.5);

(documentation)