title: HTML5 canvas fill image with a circle
body: <p>I was reading this post <a href="https://stackoverflow.com/questions/4276048/html5-canvas-fill-circle-with-image">HTML5 canvas fill circle with image</a> and was curious about doing something a little different.</p>
  
  <p>Step by step I'd like to:
  1.  Take this image I have of a shield.<br>
  2.  Trace the outline of the shield to get the shape.
  3.  Use a second, larger, image to fill the outline of the shield.  I don't want it to fit.  I just want it to observe the boundaries set by the outline of the shield and not draw outside them.</p>
  
  <p>Here's what I have so far:  <a href="https://jsfiddle.net/Bladetrick/6xz714Lr/42/" rel="nofollow noreferrer">JSFiddle - outline shape</a>.  </p>
  
  <pre><code>var img = new Image();
  img.crossOrigin = "anonymous";
  img.onload = function () {
  
      // draw the image
      // (this time to grab the image's pixel data
      ctx.drawImage(img, canvas.width / 2 - img.width / 2, canvas.height / 2 - img.height / 2);
  
      // grab the image's pixel data
      imgData = ctx.getImageData(0, 0, canvas.width, canvas.height);
      data = imgData.data;
  
      // call the marching ants algorithm
      // to get the outline path of the image
      // (outline=outside path of transparent pixels
      points = geom.contour(defineNonTransparent);
  
      ctx.strokeStyle = "red";
      ctx.lineWidth = 2;
  
      redraw();
  
  }
  img.src = "https://cdn1.iconfinder.com/data/icons/shield-4/744/1-512.png";
  
  // redraw the canvas
  // user determines if original-image or outline path or both are visible
  function redraw() {
  
      // clear the canvas
      ctx.clearRect(0, 0, canvas.width, canvas.height);
  
      // draw the image
  
      ctx.drawImage(img, canvas.width / 2 - img.width / 2, canvas.height / 2 - img.height / 2);
  
      // draw the path (consisting of connected points)    
      // draw outline path
      ctx.beginPath();
      ctx.moveTo(points[0][0], points[0][1]);
      for (var i = 1; i &lt; points.length; i++) {
          var point = points[i];
          ctx.lineTo(point[0], point[1]);
      }
      ctx.closePath();
      ctx.stroke();
      ctx.fillStyle="yellow";  // Just filling with yellow temporarily but would like to use an image
      ctx.fill();
  }
  </code></pre>
  
  <p>I'm not sure how to draw inside the outline without overwriting it.</p>