How to optimize animation on canvas?

Question

Canvas

In the toy fintank.ru , the screen (canvas) is redrawn at 20 fps. Each frame is drawn with several putImageData() calls, which, like Google maps, make up a picture from square fragments. The fragments are converted to ImageData and are in the cache. Each fragment can sometimes be changed by the server (put/removed a game object). The modified fragment is rendered in ImageData and replaces the old version in the cache.
How can this architecture be changed so that 60fps is achievable and the CPU doesn't run hot as hell? Forget about these dances with a tambourine putImageData () and move to WebGL?

Answer 1

putImageData заменить на drawImage