How to avoid character blur during movement in canvas(js)?

Question

JavaScript

Hello, in fact, everything is already clear from the question, but I will describe the problem in a little more detail. Let's say I've created a 50 x 50 pixel square on the canvas that will be the playable character, colored it red, and now I want that character to be controllable. With the help of events, I make control, add conditions for movement, everything, and shove the main function with conditions into the game loop, which is scrolled using requestAnimationFrame. If I make the speed of the character in 1px - no problem, everything is very clear. If I change the speed of the character, let's say by 8px (the standard speed for any dynamic 2D games), then this square begins to blur a lot when moving, and if you carefully follow it, even your eyes start to hurt. The question arises how the developers of other games do so,

Answer 1

If you render at 60FPS and the character always hits the pixels clearly, then there is no fuzziness. On the contrary, try adding motion blur.
jsfiddle.net/NfNSz/2