title: HTML5 Canvas Basic Line Animation
body: <p>So, I'm trying to get into HTML5 Canvas with a small project animating an existing header consisting of red laser-like lines bursting from a single point. I'm able to draw these lines as I want them, and animate them as a group at a nice speed, but the next hurdle is above my head, I think: I'd like each line to move independently!</p>
  <p>I've got an object defining the starting point for my lines such as:</p>
  <pre><code>var myLines = {
        a: 1500,
        b: 700,
        c: 400,
        d: 310,
        e: 140,
        f: 60
      }
  </code></pre>
  <p>And I then draw with a loop kinda like:</p>
  <pre><code>for (var i in myLines)
        {
          var cur = myLines[i];
          context.beginPath();
          context.moveTo(0, canvas.height);
          context.lineTo(canvas.width, myLine.y-cur);
          context.stroke();
        }
  </code></pre>
  <p>Using an awkward method of incrementation:</p>
  <pre><code>var step = 1;
  
      if (myLine.y+step &gt; canvas.height) {set = false;}
      if (myLine.y-step &lt; 0) {set = true;}
  
      if (set) {
        myLine.y = myLine.y+step;
  
      } else {
        myLine.y = myLine.y-step;
      }
  </code></pre>
  <p>I'm aware the above code is poorly written, I'm out of my league here, I work during the day as a chef in a small kitchen, but I'd like some advice, please!</p>
  <p><a href="http://jsfiddle.net/jrDwf/" rel="nofollow noreferrer">Here's a fiddle</a> to see it all in action.</p>
  <p>Thanks in advance!</p>