title: Stop animated element leaving the canvas
body: <p>I'm trying to stop the element leaving the canvas. Whether this resets the loop, or just prevents it going any further -- I'm not sure. What is a common method for preventing the element leaving the canvas?</p>
  
  <p>I've got the following code:</p>
  
  <p><a href="http://jsfiddle.net/tmyie/R5wx8/2/" rel="nofollow">http://jsfiddle.net/tmyie/R5wx8/2/</a></p>
  
  <pre><code>var canvas = document.getElementById('canvas'),
      c = canvas.getContext('2d'),
       x = 10,
          y = 15;
  function move() {
     c.clearRect(0, 0, 500, 300);
      c.fillRect(x, y, 5, 5),
      c.fillRect(x, y, 15, 15);
      x++;
      y++;
  }
  
  setInterval(move, 300);
  </code></pre>