Переместить изображение в <canvas>без перерисовки всего холста?

Question

Я создал игровую доску и хочу перетаскивать свои фигуры (.gif), но я не могу найти способ сделать это без необходимости перерисовывать всю доску бесконечно, так как я должен очищать фигуры каждый раз он перемещается на 1 пиксель, и это очищает все, что было под ним (доска и другие фигуры). Это вообще возможно?

Answer 1

Да, вам нужно каждый раз перерисовывать всю доску.

Одна техника, которую вы можете использовать, это закадровый холст:

var board = document.createElement("canvas");
board.width = width;
board.height = height;

var boardContext = board.getContext("2d");

// rendering code for board
// ...

// now draw board onto main canvas
var context = mainCanvas.getContext("2d");

context.drawImage(board, ...);

Холст доски не виден на экране, но он будет сохранен в памяти, поэтому при каждом повторном рендеринге он будет отображаться очень быстро.