title: How to create road lines using HTML5 canvas
body: <p>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.</p>
  
  <pre><code>&lt;canvas id="myCanvas" width="578" height="500"&gt;&lt;/canvas&gt;
  
    var canvas = document.getElementById('myCanvas');
    var context = canvas.getContext('2d');
  
    var j = 0;
      for(var i = canvas.height*.30; i&lt; 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++;
      }
  </code></pre>
  
  <p>But I couldn't make it by above code. Please help me to solve this.
  <a href="https://jsfiddle.net/tcdLf0xu/" rel="nofollow">jsfiddle</a></p>