title: Creating a line animation on canvas
body: <p>I'm a newbie in canvas drawing. I want to draw the PV string model and the direction of flow of electrons into <code>&lt;canvas&gt;</code> tag.</p>
  
  <p>This is what I want to achieve, redrawing the lines from the following direction:</p>
  
  <p><a href="https://i.stack.imgur.com/NEoRJ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/NEoRJ.png" alt="enter image description here"></a></p>
  
  <p>How do I initially set the animation location, and do I need to update it via <code>setTimeout</code>?</p>
  
  <p>Here is what I try so far:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var canvas = document.getElementById("myCanvas");
  var ctx = canvas.getContext("2d");
  
  if (canvas.getContext) {
    var ctx = canvas.getContext('2d');
    // drawing code here
  
    /* First Row */
    ctx.fillStyle = "rgb(2,150,224, 1)";
    ctx.fillRect(50, 50, 50, 50);
  
    ctx.fillStyle = "rgb(2,150,224, 1)";
    ctx.fillRect(110, 50, 50, 50);
  
    ctx.fillStyle = "rgb(188,12,50, 1)";
    ctx.fillRect(170, 50, 50, 50);
  
    ctx.fillStyle = "rgb(2,150,224, 1)";
    ctx.fillRect(230, 50, 50, 50);
  
    ctx.fillStyle = "rgb(2,150,224, 1)";
    ctx.fillRect(290, 50, 50, 50);
  
    /* Second Row */
    ctx.fillStyle = "rgb(0,106,160, 1)";
    ctx.fillRect(50, 150, 50, 50);
  
    ctx.fillStyle = "rgb(0,106,160, 1)";
    ctx.fillRect(110, 150, 50, 50);
  
    ctx.fillStyle = "rgb(0,106,160, 1)";
    ctx.fillRect(170, 150, 50, 50);
  
    ctx.fillStyle = "rgb(0,106,160, 1)";
    ctx.fillRect(230, 150, 50, 50);
  
    ctx.fillStyle = "rgb(0,106,160, 1)";
    ctx.fillRect(290, 150, 50, 50);
  
    /* Paths */
    ctx.beginPath();
    ctx.lineWidth = "3";
    ctx.strokeStyle = "rgb(34,177,76, 1)";
    ctx.moveTo(0, 75);
    ctx.lineTo(400, 75);
    ctx.stroke();
  
    ctx.beginPath();
    ctx.lineWidth = "10";
    ctx.strokeStyle = "rgb(34,177,76, 1)";
    ctx.moveTo(400, 75);
    ctx.lineTo(400, 175);
    ctx.stroke();
  
    ctx.beginPath();
    ctx.lineWidth = "3";
    ctx.strokeStyle = "rgb(34,177,76, 1)";
    ctx.moveTo(0, 175);
    ctx.lineTo(400, 175);
    ctx.stroke();
  
  
  } else {
    // canvas-unsupported code here
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>/* canvas {
    border: 1px solid #d3d3d3;
  } */</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;canvas id="myCanvas" width="400" height="400"&gt;
  Your browser does not support the HTML5 canvas tag.&lt;/canvas&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Any help would be appreciated!</p>