How can I prevent objects from being fuzzy in canv

Question

Currently, I'm doing a mini game which only has a box and a character.

The character can freely move around. I did so it moves 640px/second. The "formula" I use to get the pixels to move each frame is ((currentFrameTimeMs - lastFrameTimeMs) * pxPerSecond) / 1000. Actual values are ((currentFrameTimeMs - lastFrameTimeMs) * 640) / 1000. This effectively makes my character to move exactly 640px/s.

But the problem is that when moving, I see it as "fuzzy". I've checked out the FPS, and it's very far above 60, yet the image still looks fuzzy.

Is there any technique to remove that blurriness? I've played desktop games which have objects moving pretty fast, and they don't blur, so I suppose there's some trick for that.

Answer 1

Problem solved.

Problem was with FPS, they were under 60. I was using a wrong approach (with requestAnimationFrame, but wrong calculations).

Answer 2

Round the result so your image will always be at an exact pixel index, rather than "between" pixels. If you don't round, the pixels of your image will be "spread" between pixels and might appear blurry.