title: javascript change speed of a ball in a canvas
body: <p>I have a ball bouncing in a canvas and I am trying to change the speed the ball travels at and I'm not getting it to work. I'm trying to implement the speed just as I am doing the ball color and ball width but its not working. setInterval in the code is what alters the speed but cant get it to take the value form the speedx input.</p>
  
  <p>javascript:</p>
  
  <pre><code>function draw(){
   var canvas = document.getElementById('ball');
   context = ball.getContext('2d');
   //context.clearRect(150,50,750,750);
   context.beginPath();
   context.fillStyle="#0000ff";
   context.arc(x,y,10,20,Math.PI*2,true);
    context.closePath();
    lineColor = document.getElementById('lineColor').value;
    lineWidth = document.getElementById('lineWidth').value;
      speed = document.getElementById('speedx').value;
          setInterval(draw,speed); 
  
          if (lineWidth)
          {
              context.lineWidth=lineWidth;
          }
          if (lineColor)
          {
              context.strokeStyle=lineColor;
              context.stroke();
          }
  }
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>      Ball Width: &lt;input type="text" id="lineWidth"&gt;&lt;/input&gt;
  Ball Color: &lt;input type="text" id="lineColor"&gt;&lt;/input&gt;
  Ball Speed X:&lt;input type="text" id="speedx"&gt;&lt;/input&gt;
  </code></pre>