So, as someone who's planning to implement a game using Canvas, I was annoyed to notice that there seemed to be occasional frame drops despite the extreme simplicity of this script. I went tested on Safari, Chrome, and Firefox, and although it used only a small fraction of CPU, it wasn't perfectly smooth in any of them: subjectively, Chrome was the best, Safari dropped frames a bit more often, and Firefox was quite laggy. I added a trivial FPS counter to the JavaScript and the results sort of mirrored my impression - Chrome almost always got 60 FPS but sometimes 59, Safari got 59 more often, and Firefox was sometimes lower - but I'm not sure 59 FPS adequately explains the glitchiness I experienced, especially in Firefox, which was subjectively quite awful.
Anyway, I'd like to learn where this frame dropping is coming from. I'm a real stickler about lag, and even though the effect here is pretty minor (except on Firefox), I find it unacceptable. Maybe I should try reimplementing this in WebGL or even pure HTML with image tags. Though, again, this game and mine are simple enough that all these approaches should be able to run at 60 FPS, the differences in implementation might be enough to push it over the edge and I have to make do with what exists.
Anyway, I'd like to learn where this frame dropping is coming from. I'm a real stickler about lag, and even though the effect here is pretty minor (except on Firefox), I find it unacceptable. Maybe I should try reimplementing this in WebGL or even pure HTML with image tags. Though, again, this game and mine are simple enough that all these approaches should be able to run at 60 FPS, the differences in implementation might be enough to push it over the edge and I have to make do with what exists.