All geek questions in one place

Buggy Behavior Using Canvas?

I am making a game using html canvas.

Here is my progress:

http://db.tt/ei3LlR (use WASD and left / right keys) Helps ZOOM.

My questions:

  • Why does the shadow flicker in Google Chrome when the tank spins?
  • Why does the tower image flicker safari when turning the tower?
  • Why does it work fine in Firefox?

The image of the tank and the image of the tower are simple old png. Shadows are dynamically created using these images. Shadows are not objects of the image, but elements of the canvas.

Flickering only seems to happen when I change the rotation of the image. When I say flicker, I mean that the image seems to contract and grow very quickly. The blinking stops again when the image stops rotating.

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

+3
source share
2 answers

UPDATE The problem no longer exists! They must have fixed it!

0
source

As for the flickering issues, you don't seem to duplicate your canvas with a double buffer. Thus, it is possible that things flicker because the earth or shadows are drawn in front of the tanks and the screen is updated before you draw the tanks and turrets.

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

, rotate translate . . , .

PS: - .

+1

Source: https://habr.com/ru/post/1758111/

More articles:


All Articles