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?

Was it helpful?

Solution

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.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top