How to optimize the graphics output in the game (js/canvas)?

Question

Canvas

Example: obsuditor.ddns.net/ftt
-- The image is displayed on a canvas the size of a browser window.
-- The image consists of 100x100 (or 140x140) cached chunks in memory that are pixel buffers (each chunk starts life with getImageData). For each frame, the cached chunks are placed on the large canvas by several calls to the putImageData() function. Bad: Lots of pixel copy operations.
-- When you shoot at a brick and it needs to be removed, the piece containing this brick is redrawn and the new version of the piece is placed in the cache instead of the old one. Poor garbage collector.
JS profiler in chrome says putImageData() and fillText() are eating up a lot of time.
What fundamentally different approaches can be used to implement the movement of the world around the tank without redrawing the canvas for each step (even if using cached pieces)? Thank you.
Do not offer to take ready-made engines.

Answer 1

Replace putImageData with drawImage
You can try to take www.pixijs.com for the engine

Answer 2

WebGL.

Answer 3

The simplest option https://jsfiddle.net/hk6wscLt/

Answer 4

It can be so.