Canvas Line Drawing

Canvas Line Drawing JAVASCRIPT

HTML

<canvas id="canvasWindow" width="200" height="200" style="border: 1px solid red;">
Your browser does not support the canvas element
</canvas>

JavaScript

var canvas = document.getElementById("canvasWindow");
var c = canvas.getContext("2d");

var curPoint = {
    x : 100,
    y : 0,
    index : 0   
}

    var points = [{x:0, y:100}, {x:100, y:200}, {x:200, y:100}, {x:100, y:0}];
    
function toPoints(points){
    var targetPoint = points[curPoint.index];
    var tx = targetPoint.x - curPoint.x,
        ty = targetPoint.y - curPoint.y,
        dist = Math.sqrt(tx*tx+ty*ty),
        rad = Math.atan2(ty,tx),
        angle = rad/Math.PI * 180;;
     
        velX = (tx/dist)*1;
        velY = (ty/dist)*1;

    curPoint.x += velX;
    curPoint.y += velY;

    if(dist < 2){
        curPoint.index++;
    }

    c.fillRect(curPoint.x, curPoint.y, 1, 1);
    if(curPoint.index < points.length){
        setTimeout(function(){toPoints(points)}, 10);
    }
    else{
        setTimeout(function(){
            var curPoint = {
                x : 100,
                y : 0,
                index : 0   
            }
            
            var points = [{x:0, y:100}, {x:100, y:200}, {x:200, y:100}, {x:100, y:0}];
            
        toPoints(points);
        }, 1000);
    }
}

toPoints(points);