title: How to make a scrolling starfield
body: <p>I want to write a simple scrolling right to left <code>starfield</code>. I have printed out the stars randomly. Now, how do I target each star and randomly give it a speed (say 1-10) and begin moving it? I also need to put each star back on the right edge after it reaches the left edge.</p>
  
  <p>Following is my code written so far:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;script&gt;
  
  
   function stars()
   {
      canvas = document.getElementById("can");
  
      if(canvas.getContext)
      {
         ctx = canvas.getContext("2d");
         ctx.fillStyle = "black";
         ctx.rect (0, 0, 400, 400);
         ctx.fill();
         starfield();
      }
    }
    //print  random stars
    function starfield()
    {
       for (i=0; i&lt;10; i++)
       {
          var x = Math.floor(Math.random()*399);
          var y = Math.floor(Math.random()*399);
          var tempx = x;
          ctx.fillStyle = "white";
          ctx.beginPath();
          ctx.arc(x, y, 3, 0, Math.PI*2, true);
          ctx.closePath();
          ctx.fill();
       }
    }
  
  &lt;/script&gt;
  
  &lt;/head&gt;
  &lt;body onload="stars()"&gt;
  &lt;h1&gt;Stars&lt;/h1&gt;
  &lt;canvas id="can" width="400" height="400"style="border:2px solid #000100" &gt;&lt;/canvas&gt;
  &lt;/body &gt;
  &lt;/html&gt;
  </code></pre>