title: how to animate a bouncing ball on canvas
body: <p>Hi I've just started coding Java and HTML, etc, so I tend to struggle at times. Hence I have joined StackOverflow for your help (Be nice to me please :) )</p>
  
  <p>I'm trying to animate using <code>setInterval()</code> and draw method to create a bouncing ball which moves by a number of pixels in each frame. When it hits an edge it should bounce back by reversing the direction of the relevant horizontal or vertical pixel velocity.</p>
  
  <p>Here is what has been done so far, my HTML code:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
    &lt;html lang="en"&gt;
    &lt;head&gt;
    &lt;title&gt;Canvas Example&lt;/title&gt;
    &lt;script type="text/javascript" src='myanim.js' defer&gt;&lt;/script&gt;
    &lt;style type=text/css&gt;
      #mycanvas {border:1px solid #000000}
    &lt;/style&gt;
    &lt;/head&gt;
    &lt;body&gt;
    &lt;canvas id=mycanvas width=600 height=400&gt;Canvas Not Supported
    &lt;/canvas&gt;
    &lt;/body&gt;
    &lt;/html&gt;
  </code></pre>
  
  <p>My JavaScript:</p>
  
  <pre><code>var canvas=document.getElementById('mycanvas');
  var ctx=canvas.getContext('2d');
  var timer;
  var fillColour = '#FF0000';
  var strokeColour = '#FFFFFF';
  var x=0; var y=0;
  function frameRate(fps) {
   timer = window.setInterval(updateCanvas,1000/fps);
  }
  function noLoop() {
   window.clearInterval(timer);
  }
  function updateCanvas(){
  if (Math.random()&gt;0.5)x+=2; else x-=2;
  if (Math.random()&gt;0.5)y+=2; else y-=2;
  ctx.fillRect(0,0,canvas.width,canvas.height);
  draw();
  }
  function draw(){
  ctx.beginPath();
  ctx.arc(canvas.width/2+x,canvas.height/2+y,100,0,2*Math.PI);
  ctx.stroke();
  }
  ctx.strokeStyle=strokeColour;
  ctx.fillStyle=fillColour;
  frameRate(50);
  </code></pre>
  
  <p><a href="http://jsfiddle.net/6EFqk/265/" rel="nofollow">http://jsfiddle.net/6EFqk/265/</a></p>
  
  <p>I've been helped out by the <code>math.random</code> as I don't understand it. Can someone help me out on how to do this?
  Thanks in advance.</p>