HTML5 Canvas очень похож на реальный холст. Когда вы рисуете на холст, чернила изменяют холст, смешиваясь с другим уже существующим содержимым и навсегда меняя его.
Спросите Моне «Как вы добавляете нового человека к своей картине?» и он может сказать «Вы просто рисуете их там, где хотите!» Точно так же вы используете drawImage() для «рисования» изображения на холсте.
Однако, если вы спросите Моне «Как вы удалите человека с картины?» и он, скорее всего, будет смешно смотреть на вас, а затем ответит «Quoi? Вам придется либо сделать новую картину, либо нарисовать поверх человека! " Точно так же, если вы хотите" удалить "что-то с вашего холста, вам нужно либо начать заново (очистить холст и нарисовать все, кроме или перекрасьте то, что было «позади» вашего изображения поверх него.
Вот пример, который я сделал , который показывает один способ, которым вы можете «сохранить» часть холста (перетаскивая ее на другой холст), а затем позже перетаскивая ее поверх чего-либо, чтобы «стереть» ее .
Однако я обычно советую вам не использовать HTML5 Canvas, если вы не знаете, зачем он вам нужен. Вы упоминаете о добавлении и удалении предметов, а также об обнаружении движений мыши. Использование системы рисования reserved-mode - например, HTML или SVG - означает, что вы фактически добавляете, удаляете или изменяете элементы в представлении объекта, и кто-то другой (браузер) должен выяснить, как лучше перерисовать их.
Возможно, вам лучше всего выполнить «рисование» частей пользовательского ввода на одном или нескольких холстах, а затем объединить эти холсты с другими элементами (например, <div> с текстом или <img> для рисунки или векторные изображения SVG).
Вы можете создать свою собственную систему с сохраненным режимом для типа canvas или использовать чужую библиотеку, которая делает это. Но вместо этого я бы посоветовал вам подумать, является ли это лучшим и наиболее простым способом достижения ваших целей.