анимация кривой по точкам
 

Люди есть классная функция которая дает возможность анимировать кривую по точкам http://habrahabr.ru/post/249103/ но проблема в том что при возврате кривой или при пересечении возникает сбой координат, помогите пожалуйста исправить этот факт, на примере должна прорисовываться буква L как на лого но происходит сбой при возарате
http://lhotel.com.ua

http://w3pro.ru/article/html-5-canva...chinayushchikh
Это во первых.
Во вторых дам вам совет использовать фразу

context.closePath();

Или же назначать новый

context1 = canvas.getContext("2d");

В третьих, можно посмотреть сорсы ресурса который вы привели в пример.

var cnv = document.getElementById('round_cnv');
var cnt = cnv.getContext('2d');
var pi = Math.PI;
cnt.lineWidth = 1;
cnt.strokeStyle = "#FFF";
cnt.arc(16, 16, 12, 0, 2*pi, true);
cnt.stroke();

var cnt2 = cnv.getContext('2d');
cnt2.lineWidth = 3;
cnt2.strokeStyle = "#FFF";
cnt2.fillStyle = "white";
cnt2.fill();
cnt2.arc(16, 16, 7, 0, 2*pi, true);
cnt2.stroke();


var cnv2 = document.getElementById('round_cnv2');
var cnt2 = cnv2.getContext('2d');
cnt2.lineWidth = 1;
cnt2.strokeStyle = "#FFF";
cnt2.arc(16, 16, 12, 0, 2*pi, true);
cnt2.stroke();

var cnt3 = cnv2.getContext('2d');
cnt3.lineWidth = 3;
cnt3.strokeStyle = "#FFF";
cnt3.fillStyle = "white";
cnt3.fill();
cnt3.arc(16, 16, 7, 0, 2*pi, true);
cnt3.stroke();

var cnv3 = document.getElementById('round_cnv3');
var cnt3 = cnv3.getContext('2d');
cnt3.lineWidth = 1;
cnt3.strokeStyle = "#FFF";
cnt3.arc(16, 16, 12, 0, 2*pi, true);
cnt3.stroke();

var cnt4 = cnv3.getContext('2d');
cnt4.lineWidth = 3;
cnt4.strokeStyle = "#FFF";
cnt4.fillStyle = "white";
cnt4.fill();
cnt4.arc(16, 16, 7, 0, 2*pi, true);
cnt4.stroke();

Тут прекрасно видно что человек использовал второе предложенное мною решение.
Лично по моему мнению это не совсем верно в случае одного canvasа.
Но это моё личное мнение.

Есть вот такое решение я его выбрал http://jsfiddle.net/halflling/qDucr/ но появился вопрос как постепенно стереть написанную линию по тем же точкам?