SOURCE

var canvas = document.getElementById("canvas");
canvas.width = 600;
canvas.height = 600;
var context = canvas.getContext("2d");

context.lineWidth = 2;
context.strokeStyle = "#03EDFF";

var x = 200,
y = 300,
length = x+42,
x1=0, y1=0,length1=0, x2=0, y2=0, length2=0;
var deloy=4;

drawFace();

function drawFace(){
  context.clearRect(0, 0, 600, 600);
  firstRoad();
}


function firstRoad() {
  if (x < length) {
    context.moveTo(x, y);
    context.lineTo(++x, y);
    y = y - 1.7;
    context.stroke();
    setTimeout("firstRoad()", deloy);
  } else {
    x1 = x;
    y1 = y;
    length1 = x1 + 81;
    context.beginPath();
    context.arc(x, y, 4, 0, Math.PI * 2, true);
    context.fillStyle = "#03EDFF";
    context.fill();
    context.stroke();
    secondRoad();
  }
}
function secondRoad() {
  if (x1 < length1) {
    context.lineWidth = 1;
    context.moveTo(x1, y1);
    context.lineTo(++x1, y1);
    y1 = y1 - 0.7654;
    context.stroke();
    setTimeout("secondRoad()", deloy);
  } else {
    x2=x1;
    y2=y1;
    length2=x2+83;
    context.beginPath();
    context.arc(x1, y1, 4, 0, Math.PI * 2, true);
    context.fillStyle = "#03EDFF";
    context.fill();
    context.stroke();
    thirdRoad();
  }
}
function thirdRoad() {
  if (x2 < length2) {
    context.lineWidth = 1;
    context.moveTo(x2, y2);
    context.lineTo(++x2, y2);
    context.stroke();
    setTimeout("thirdRoad()", deloy);
  } else {
     
  }
}

<canvas id="canvas">
</canvas>

 #canvas {
   border: 1px solid #ADACB0;
   display: block;
   margin: 20px auto;
 }