HTML5 Canvas lineTo issue with recursion

Question

Итак, мне было скучно и решили сделать простой BST, а потом я подумал, что было бы аккуратно рисовать его на холсте. Я использую для обхода, чтобы печатать дерево в правильном порядке. Если вы посмотрите на этот jsFiddle: http://jsfiddle.net/BY6Ap/13/

Вот метод из jsFiddle:

BST.prototype._draw = function(ctx, node, x, y, depth) { 
    if (node == null) { 
     return; 
    } 
    if (node.left != null) { 
     ctx.moveTo(x - 100/depth, y + 50 + depth * 10); 
    } 
    this._draw(ctx, node.left, x - 100/depth, y + 50 + depth * 10, depth + 1); 
    ctx.lineTo(x, y); 

    this._drawNode(ctx, node, x, y); 

    if (node.right != null) { 
     ctx.moveTo(x + 100/depth, y + 50 + depth * 10); 
    } 
    this._draw(ctx, node.right, x + 100/depth, y + 50 + depth * 10, depth + 1); 
    ctx.lineTo(x, y); 
} 

BST.prototype._drawNode = function(ctx, node, x, y) { 
    //ctx.beginPath(); 
    ctx.arc(x, y, 12, 0, 2*Math.PI); 
    ctx.fillText(node.data, x, y); 
    //ctx.stroke(); 
} 

Вы можете увидеть его втягивания. Единственная проблема, с которой я столкнулась, заключается в том, что lineTo или moveTo, похоже, пытается нарисовать дополнительную строку горизонтально справа внутри того места, где выполняется рисование узла. Мне было интересно, может ли кто-нибудь меня бросить в сторону, чтобы удалить лишнюю линию. Я пробовал несколько вещей, но никто не работает.

Благодаря

Answer 1

Я думаю, что вы просто не хватает beginPath, когда вы начинаете рисовать.

BST.prototype._draw = function(ctx, node, x, y, depth) { 
    ctx.beginPath(); //<- this is what you were missing 

Последнее обновление: jsfiddle.