#canvas{
            display: block;
            margin: auto;
            border: 1px solid #000000;

        }

    var canvas =document.getElementById('canvas');

    var ctx= canvas.getContext('2d'),
        requestAnimation;
    var c={
        x:200,
        y:400
    };
    var count=9;
    var timer = setInterval( function draw() {

        ctx.clearRect(0, 0, 600, 600);
        ctx.beginPath();
        ctx.lineWidth = 5;
        ctx.moveTo(300, 300);
        ctx.lineTo(c.x, c.y);

            if (c.x < 300 && count<1) {
        c.x += 5;
        c.y += 2;
    }

         else if (c.x>299 && c.x<400 && count<1){
            c.x += 5;
            c.y -= 2;
            console.log(c.x);
            if(c.x>398){count=1;}
        }
        if (c.x > 299 && c.x < 401 && count>0 && count<3) {
            c.x -= 5;
            c.y += 2;
        }
        else if (c.x < 299 && count>0 && c.x>250) {
            c.x -= 5;
            c.y -= 2.5;



        }

        ctx.stroke();
        requestAnimation = requestAnimationFrame(draw);

    } ,2000);
    requestAnimationFrame(draw);