How to create road lines using HTML5 canvas

I have created a road using canvas. There I wish to add lines in the middle. Also width, height and gap between lines must be increase accordingly.

<canvas id="myCanvas" width="578" height="500"></canvas>

  var canvas = document.getElementById('myCanvas');
  var context = canvas.getContext('2d');

  var j = 0;
    for(var i = canvas.height*.30; i< canvas.height; i=i+20){
        context.beginPath();
        context.rect(canvas.width*.50, i-j, 3+j, 10+(j*2));
        context.fillStyle = '#000000';
        context.fill();
        j++;
    }

But I couldn't make it by above code. Please help me to solve this. jsfiddle