Сергей Соколов

Сделайте два элемента canvas друг над другом. В нижнем изображение, в верхнем, "рабочем", таскается линия. Тогда её можно стирать clearRect'ом.

<div style="position: relative;">
 <canvas id="layer1" width="100" height="100" 
   style="position: absolute; left: 0; top: 0; z-index: 0;"></canvas>
 <canvas id="layer2" width="100" height="100" 
   style="position: absolute; left: 0; top: 0; z-index: 1;"></canvas>
</div>

Потом изменения можно копировать в нижний слой.

Не знаю, что у вас будет за эффект, но как вариант:

SVG, clipping path позволяет вырезать часть картинки любой векторной формой.
Т.е. вы делаете SVG, где размещены две копии изображения, каждая со своей маской. Ещё примеры обрезки картинки в svg.

В чём выражается избыточная нагруженность страницы? У меня ваш пример замечательно работает.

Идеи:
1. реализовать такое же на canvas. Копировать пиксели из картинки в canvas. Не знаю, будет ли выигрышь в производительности;
2. обратный процесс: показать картинку, закрытую маской из белых div'ов, и потом их удалять в случайном порядке, раскрывая единственную картинку;
3. показать поверх картинки анимированный гиф с исчезающей маской, проигрываемый единственный раз : )