Recently, I came across an issue while trying to display graphics on an HTML page using canvas. The problem I encountered was that the canvas element was somehow reducing the quality of my images during rendering, especially after some time.
Let me visually demonstrate the issue:
https://i.sstatic.net/KyMly.png Image to render (32x32)
https://i.sstatic.net/RJXol.png
Initial rendering (with browser zoom)
https://i.sstatic.net/SFDP7.png
Image quality degradation after some user interactions (keyboard events)
Note 1: I want to clarify that I am not resizing the image at any point!
Note 2: The drawing function is called every 10 milliseconds
Note 3: I have applied
image-rendering: pixelatedin the CSS for the canvas
Note 4: Below is the function responsible for drawing the image:
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);
}
}
(The dimensions w and h are both 32 pixels, so there should be no resizing involved!)
Note 5: I am using HTML, CSS, and pure vanilla JavaScript for this project
If you require any additional information, please let me know. Your assistance in resolving this issue would be greatly appreciated.
PLEASE HELP!