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

Question

[ravend7]

Привет, All !

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

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

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

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

Answer 1

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

Сделайте два элемента 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>

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

Answer 2

[teotlu]

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