title: How do I add image to this canvas ball?
body: <p>I am trying to make a simple game, though if I need an image for my bouncing ball then how do I do this?
  I am doing this-</p>
  
  <pre><code>function draw() {
      ctx.clearRect(0, 0, 300, 300);
      if (ctx.getContext) {
  
              Snooker = new Image();
              Snooker.onload = loadingComplete;
              Snooker.src = "http://www.wpclipart.com/toys/balls/red_snooker_ball.png";
          }
      x += dx;
      y += dy;
      bounce();
  }
  </code></pre>
  
  <p><strong>And-></strong></p>
  
  <pre><code>function init() {
      var ctx = document.getElementById("canvas");
  
      return setInterval(draw, 10);
  }
  </code></pre>
  
  <p>Now canvas is blank.</p>
  
  <p><strong>Here is fiddle link-</strong>
  <a href="http://jsfiddle.net/stackmanoz/QcLTw/1/" rel="nofollow noreferrer">http://jsfiddle.net/stackmanoz/QcLTw/1/</a></p>
  
  <p>Image I want to add instead of this simple ball-
  <a href="http://www.wpclipart.com/toys/balls/red_snooker_ball.png" rel="nofollow noreferrer">http://www.wpclipart.com/toys/balls/red_snooker_ball.png</a></p>