Как очистить Canvas?

canvas.width = canvas.width;

Или

ctx.clearRect(0, 0, canvas.width, canvas.height);

Однако, нужно иметь ввиду, что вариант из canvas.width сбрасывает всё состояние Канваса (такие параметры как transformations, lineWidth, strokeStyle и т.п.), поэтому это очень медленно по сравнению со вторым вариантом.

У второго варианта тоже есть особенность: если Вы изменили матрицу трансформаций, то, вероятно, Ваш Канвас не очистится полностью. Решение может заключаться в сбросе матрицы трансформации:

// Сохраняем текущую матрицу трансформации
ctx.save();
// Используем идентичную матрицу трансформации на время очистки
ctx.setTransform(1, 0, 0, 1, 0, 0);
ctx.clearRect(0, 0, canvas.width, canvas.height);
// Возобновляем матрицу трансформации
ctx.restore();
По вопросам рекламы [email protected]