Как перерисовывать линий в HTML5 ?
 

Привет, All !

делаю графический мини редактор
при рисовании линий столкнулся с проблемой
идея была рисовать линию в режиме "XOR" и при следующей отрисовки затирать предыдущую, так получается возможность таскать за курсором линию, не затирая изображения

но при затирании обнаружилось что остается "след" от старой линии, края не затираются
здесь пример:
jsfiddle.net/uv0gk2pn/8

кто сталкивался, как решить проблему?

P.S.
вариант с затиранием через clearRect(...) не подходит, так как придется восстанавливать уже нарисованную картинку, а это избыточная нагрузка

Делайте например 2 канваса один под другим для того что уже нарисовано и того что рисуете сейчас. Там где рисуете - чистим все.