How to get rid of scale in chrome when rendering to canvas?

Question

JavaScript

I teach my children to program (we make a relatively simple IO game). In the process, we found that when rendering to canvas, images are slightly blurry. Having screened the result, I found that the image rendered in chrome canvas is slightly larger than the original, which gives the blur effect. I looked at how things are in firefox - there is no such problem in it (although the rendering is much slower, but this is not relevant)

I tried to solve the problem:
- disabled scale in the code as such - did not help
- set forced scaling equal to 1 / window .devicePixelRatio - the size after that became the same as the original (without scale), but the blur and artifacts (as with jpeg compression) remained.
- forced this.context.imageSmoothingEnabled = false - did not help

If anyone has encountered a problem or knows how to solve it - I will be grateful.

original

firefox

chrome

a gif demonstrating the essence of the problem


The game blank itself is https://game.lastuniverse.ru/iogame.01/
But at the moment I can’t pay for the domain, so I register it 83.219.143.88 game.lastuniverse.ruin:
windows\System32\drivers\etc\hosts (under Windows)
or in /etc/hosts (under Linux)