Когда нужно очистить холст при перерисовке изображений

Question

Я работаю над веб-приложением, которое выполняет некоторые функции обнаружения лиц с веб-камеры. Я использую WebRTC, и я использую метод ctx.drawImage(), чтобы нарисовать элемент video на холсте.

Наверху этого изображения я рисую прямоугольник, чтобы очертить лицо. Я повторяю это 15 раз, если веб-камера fps равна 15. Но я нигде не очищаю полотно. Я не вижу никакого отставания после нескольких минут потоковой передачи содержимого веб-камеры на холст и обнаружения лица.

Я попытался использовать профилировщик памяти в chrome devtools, чтобы увидеть, есть ли какие-то тревожные всплески. Я немного волнуюсь, потому что есть NOT что-то рыбное происходит там. Но должен быть всплеск? Я имею в виду, я перерисовываю изображение на холсте каждые пару миллисекунд. Не означает ли это, что у меня будут слои каждого кадра и прямоугольник, уложенный поверх другого. Там будет 15 таких слоев за секунду! Это звучит довольно тревожно.

Я хочу понять, как мне отладить функцию профилирования холста. Я понял, что он удалился после Chrome 44. Кроме того, кто-то прошел через ту же ситуацию, что лучший способ показать каждый кадр. Должен ли я не очищать полотно после каждого кадра? Если я должен это очистить, то как лучше всего это сделать. Надеюсь, я могу объяснить свою проблему здесь.

Редактировать

1. Для кого-то хочет, чтобы увидеть это в действии. Я собрал простой fiddle, чтобы продемонстрировать clearRect, как предложено @touko. Раскомментируйте последнюю строку, и она полностью очистит ее. NO слоев.

Answer 1

Каждый раз, когда вы рисуете что-то на холсте, он переопределяет текущую информацию в этом месте -> на одном холсте никогда не будет много «слоев».

Например. вам нужно вызвать clearRect, который по существу записывает новые данные на холст, чтобы «очистить» холст.