Tearing in HTML5 canvas?

Question

I'm making a small game using the HTML5 canvas element. It works great, except that it has a scrolling background with obvious tearing happening in Firefox and Chromium browsers in Ubuntu. I'm pretty sure it's buffered because there isn't any of the flickering I'd expect; just tearing. Is there any way to work around this or time rendering to right after the last screen refresh?

Hesitate

See: #6026161 – Viviyan

Answer 1

Currently there is no way to control the actual repainting of a canvas element(which if there was, could actually help in increasing performance I guess). So one can only hope that the browser actually does something intelligent, rather than screwing up like in your case.

I myself have quite some experience with the canvas element and know of its quirks. I ran into some kind of "repaint lag" several times by now, where obviously the actual numbers behind the scenes are correct and "smooth", but the graphics still have a somewhat "jumpy" behavior, which in fact is really annoying.

Only thing I can imagine that could have an effect in your case, is activating VSync in the driver settings of your Graphics Card.

If you'd like to provide a link to your game that might be helpful too, since I'm also running Ubuntu here.

Coper

Thanks for the suggestion. Unfortunately, I'm currently using placeholder art stolen from another game, so I cannot distribute it until the art is all replaced. I'm also seeing the lag issue you mentioned. – Hesitate