title: Changing a path drawn in a canvas to an image
body: <p>Currently I have a circle in my canvas, and the circle follows the mouse around. The canvas updates periodically, so that the old circles are erased so it gives the impression that there is one circle that follows the mouse around. I did this using the setMousePosition function. The function is called in the update function that looks like this </p>
  
  <pre><code>function update() {
  
  
      context.clearRect(0, 0, canvas.width, canvas.height);
  
      context.beginPath();
      context.arc(mouseX, mouseY, 50, 0, 2 * Math.PI, true);
      context.clip();
  
      var img = new Image()
      img.addEventListener("load", function(e) {
          context.fillStyle = context.createPattern(this, "no-repeat")
          context.fill()
          }, true);
          img.src="pics/iris.jpg"
  
      requestAnimationFrame(update);
  }
  update();
  </code></pre>
  
  <p>As you can see, img is sourced at pics/iris.jpg</p>
  
  <p>Why is the picture not filling the circle? </p>