title: Fill HTML5 arc with a picture - HTML5 Canvas
body: <p>I have a HTML5 Canvas (<a href="http://jsfiddle.net/ecv8de4L/" rel="nofollow noreferrer"><strong><em>JSFiddle</em></strong></a>) that looks like: <img src="https://i.stack.imgur.com/d4HVw.png" alt="enter image description here"></p>
  
  <p>I am creating the balls by the following method:</p>
  
  <pre><code>function createball(x,y,r,color){
      context.beginPath();
      context.arc(x,y,r,0,Math.PI*2,true);
      context.fillStyle = color;
      context.fill();
  
  }
  </code></pre>
  
  <p>How can I fill the ball with image? I mean a image that might have patters or some natural color? </p>