Рассмотрим возможность использования ластика на холсте Canvas.
Для того, чтобы реализовать действительно ластик, который будет стирать нарисованное, а не просто закрашивать его белым или цветом фона, нужно выполнить два шага.
Шаг 1.
Необходимо изменить один из параметров context`а, а именно globalCompositeOperation, который отвечает за то, как должны вести себя фигуры, если они перекрывают друг друга.
По умолчанию значение стоит source-over, означающее, что новое изображение рисуется поверх старого:
Нам же нужно, сделать так, чтобы рисуемая поверх фигура убирала с холста то, что под ней, для этого нужно установить значение destination-out:
Шаг 2.
После чего нужно просто определить цвет - по сути им может быть абсолютно любой, но мы не проверяли. И конечно его значение составляющей alpha (прозрачность) должна быть равна 1. Теперь можно рисовать любые фигуры на холсте, и они будут стирать те, которые уже нарисованы.
После всего этого, необходимо не забыть вернуть значение параметра контекста globalCompositeOperation в значение по умолчанию, иначе рисовать новые объекты и фигуры вы не сможете.
Рассмотрим пример, создадим холст с зеленым цветом фона (чтобы проверить, что ластик действительно стирает, а не закрашивает), нарисуем на нем прямоугольник произвольного цвета и сотрём его часть окружностью. Цвет фона будем задавать CSS стилем для нашего холста.
Рассматривать создание холста мы тут не будем, вы можете прочитать об этом в специальной статье - Создание холста canvas и получение контекста на него.
Ссылка на демо-пример:
Как видно на демо, часть прямоугольника действительно стерлась, а не закрасилась белым цветом. Значит наш ластик работает! =)