Why are my character's pixels blurry in my javascript game?

Question

I'm not using floating point values. I tweaked the upscaling to show you what I mean. At first I thought it was because I wasn't using absolute values or I wasn't multiplying width and height by multiples of 2 when resizing my sprites, but even when I do, the pixels blur. They're even blurry before resizing, you just have to zoom in a lot to see. Please take a look and see. Thanks.

https://tannerchrishop.github.io/metergame/.

https://github.com/TannerChrishop/metergame

Answer 1

This is obtained from Anti Aliasing. You can use: canvasContext.imageSmoothingEnabled = false; to stop blurring.

Add this line in function doStuff()

function doStuff() {
    canvasContext.drawImage(backgroundImage, 0, 0);

    canvasContext.imageSmoothingEnabled = false; // <--- ADD THIS LINE

    canvasContext.drawImage(zurg, frame1x, frame1y, 32, 64, (zurgx - (16 * (zurgSize - 1))), (zurgy - (32 * (zurgSize - 1))), 32 * zurgSize, 64 * zurgSize);
    animate();

    document.addEventListener('keydown', function (e) {
        if (e.keyCode == 40) holdingDown = true;
        if (e.keyCode == 39) holdingRight = true;
        if (e.keyCode == 38) holdingUp = true;
        if (e.keyCode == 37) holdingLeft = true;
    });
    document.addEventListener('keyup', function (e) {
        if (e.keyCode == 40) holdingDown = false;
        if (e.keyCode == 39) holdingRight = false;
        if (e.keyCode == 38) holdingUp = false;
        if (e.keyCode == 37) holdingLeft = false;
    });
}