Buggy Behavior using Canvas?

Question

I am making a game using html canvas.

Here is my progress:

http://db.tt/ei3LlR (use WASD and Left/Right Arrow keys) Helps to ZOOM.

My questions are:

• Why does the shadow flicker in google chrome when the tank is turning?
• Why does the turret image flicker in safari when the turret is turning?
• Why does it work fine in Firefox?

The tank image and the turret image are plain old pngs. The shadows are dynamically created using those images. The shadows are not image objects but canvas elements.

The flickering only seems to happen when I am changing the rotation of the image. When I say flickering I mean that the image appears to shrink and grow a bit very fast. The flickering stops again when the image stops rotating.

What's going on here? Is this a problem on my end at all?

Answer 1

Regarding the flickering issues, you do not seem to be double buffering your canvas. So it's possible things are flickering because the ground or shadows are drawn before the tanks and a screen refresh happens before you draw the tanks and turrets.

This question has a bit about double buffering with Canvas 2D: Does HTML5/Canvas Support Double Buffering?

I'm also wondering if small rounding errors in the context's rotate and translate methods might be causing the juddering of the turrent image. Different browser implementations might have different accuracy levels for these operations. You could try rounding your parameters to the nearest integer to check this.

PS: Your game so far looks great - the tank graphics and handling are really good.