Solve HTML Canvas image-rendering DOWNGRADE issue

Question

These days, while trying to render some graphics in a HTML page with canvas, I fot the following issue: The canvas element is downgrading my images while rendering, after some time.

Here's the issue visualized:

Image to render (32x32)

Rendering at first instance (with browser zoom)

How the image gets after some moves (by keyboard events), randomly

Note 1: I'm not resizing the image!

Note 2: The function responsible to draw is being called every 10 miliseconds

Note 3: I'm using image-rendering: pixelated for canvas in CSS

Note 4: Here's the function responsible for drawing it:

    function draw_player(x,y,w,h,state){
    
        if(state>2){ctx.drawImage(player_sprite_jump, x,y, w,h)}
        if(state<=1){ctx.drawImage(player_sprite_left, x,y, w,h)}
        if(state===2){ctx.drawImage(player_sprite_right, x,y, w,h)}
}

(w and h are, again, 32, I'm not resizing the image anywhere!)

Note 5: I'm using HTML, CSS and only vanilla JS

If any other info is needed, I would like to contribute.

PLEASE HELP!

Answer 1

Basically, it was happening by imageSmoothingEnabled , that is set 'true' by default

It tries to smooth the image, and removes pixels's sharpness!

Resolution: ctx.imageSmoothingEnabled = false;