<style>

canvas {border:1px solid #393939}
</style>

<canvas id='line'>
</canvas>
<script>
var SCREEN_WIDTH=window.innerWidth,SCREEN_HEIGHT=window.innerHeight;

var element = document.getElementById('line');
var canvas= element.getContext('2d');
var way = [true,false];
element.width = SCREEN_WIDTH;
element.height = SCREEN_HEIGHT;
canvas.lineWidth=5;

canvas.beginPath();
canvas.strokeStyle = "rgb(0,0,0)";

canvas.moveTo(0, 0);


var length = 100;
var counter = length/2, count = 0;;
var points = [], temp=[];
var x=0, y=0;
var background ="rgb(255, 255, 255)";
for(var i = 0; i < length; i++){

x++;
y++;
points.push([x,y]);
canvas.lineTo(x,y);

}


canvas.stroke();

var randX = true, randY = true;
var lastX = 0, lastY = 0;
var again;

function rand(){

var oldRX = randX;
var oldRY = randY;

if(count == counter){

randX = way[Math.floor(Math.random()*2)];
randY = way[Math.floor(Math.random()*2)];
count = 0;

} else count ++;

lastX = (randX)?points[points.length-1][0]+1:points[points.length-1][0]-1;
lastY = (randY)?points[points.length-1][1]+1:points[points.length-1][1]-1;

if(lastX > SCREEN_WIDTH || lastX <0 || lastY <0 || lastY >SCREEN_HEIGHT ){

again = true;
} else
again = false;





}

function step(){
canvas.beginPath();
var temp = [];
canvas.globalCompositeOperation="source-over";
canvas.fillStyle="rgb(255, 255, 255)";
canvas.fillRect(0,0,SCREEN_WIDTH,SCREEN_HEIGHT);

canvas.moveTo(points[1][0], points[1][1]);

for(var i = 1; i < points.length; i++){

var x = points[i][0];
var y = points[i][1];

temp.push([x,y]);

canvas.lineTo(x,y);

}

rand();

while(again){
rand();
}




canvas.lineTo(lastX,lastY);
temp.push([lastX,lastY]);

points = temp;



canvas.stroke();
var status = false;


if(!status){
setTimeout(step,10);
}

}

step();








</script>