title: Fill canvas area with an image instead of color
body: <p>Using below code i'm able to draw an area on an image loaded into a canvas and fill the drawn area with some color. </p>
  
  <p>Now i need to fill the drawn area with an image instead of a color.
  some thing like:</p>
  
  <p>canvas.fillStyle = 'url(myimage.jpg)';</p>
  
  <p>instead of</p>
  
  <p>canvas.fillStyle = '#123456' // example fill color</p>
  
  <p><strong>HTML:</strong>   </p>
  
  <pre><code> &lt;body&gt;
    &lt;div id="main" class="container"&gt;
      &lt;h1&gt;Image Maps Canvas Drawing&lt;/h1&gt;
      &lt;form&gt;
      &lt;div class="row"&gt;
        &lt;div class="span6"&gt;
        &lt;textarea rows=3 name="coords1" class="canvas-area input-xxlarge" disabled 
          placeholder="Shape Coordinates" 
          data-image-url="img1.jpg"&gt;&lt;/textarea&gt;
        &lt;/div&gt;
        &lt;div class="span6"&gt;
  
      &lt;/div&gt;
      &lt;/form&gt;
      &lt;/div&gt;
      &lt;script language="javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"&gt;&lt;/script&gt;
  
      &lt;script language="javascript" src="jquery.canvasAreaDraw.min.js"&gt;&lt;/script&gt;
    &lt;/body&gt;
  </code></pre>
  
  <p><strong>jquery.canvasAreaDraw.min.js</strong></p>
  
  <pre><code>(function (e) {
      e.fn.canvasAreaDraw = function (e) {
          this.each(function (n, r) {
              t.apply(r, [n, r, e])
          })
      };
  
      var t = function (t, r, i) {
          var s, o, u, a, f, l, c, h, p, d, v, m, g, y, b; u = e.extend({
              imageUrl: e(this).attr("data-image-url")
          }, i), e(this).val().length ? s = e(this).val().split(",").map(function (e) {
              return parseInt(e, 10)
          }) : s = [], a = e('&lt;button type="button" class="btn"&gt;&lt;i class="icon-trash"&gt;&lt;/i&gt;Clear&lt;/button&gt;'),
  f = e("&lt;canvas id='your_canvas'&gt;"), l = f[0].getContext("2d"), c = new Image, m = function () {
      f.attr("height", c.height).attr("width", c.width), h()
  }, e(c).load(m), c.src = u.imageUrl, c.loaded &amp;&amp; m(), f.css(
  { background: "url(" + c.src + ")" }), e(document).ready(function () {
      e(r).after("&lt;br&gt;", f, "&lt;br&gt;", a), a.click(g), f.bind("mousedown", p), f.bind("contextmenu", y), f.bind("mouseup", d)
  }), g = function () {
      s = [], h()
  }, v = function (t) {
      t.offsetX || (t.offsetX = t.pageX - e(t.target).offset().left, t.offsetY = t.pageY - e(t.target).offset().top), s[o] = Math.round(t.offsetX), s[o + 1] = Math.round(t.offsetY), h()
  },
  d = function () {
      e(this).unbind("mousemove"), b(), o = null
  }, y = function (t) {
      t.preventDefault(), t.offsetX || (t.offsetX = t.pageX - e(t.target).offset().left, t.offsetY = t.pageY - e(t.target).offset().top);
  
      var n = t.offsetX, r = t.offsetY;
      for (var i = 0; i &lt; s.length; i += 2) {
          dis = Math.sqrt(Math.pow(n - s[i], 2) + Math.pow(r - s[i + 1], 2));
          if (dis &lt; 6)
              return s.splice(i, 2), h(), b(), !1
      }
      return !1
  }, p = function (t) {
      var r, i, u, a, f = s.length;
      if (t.which === 3)
          return !1;
      t.preventDefault(), t.offsetX || (t.offsetX = t.pageX - e(t.target).offset().left, t.offsetY = t.pageY - e(t.target).offset().top), r = t.offsetX, i = t.offsetY;
      for (var l = 0; l &lt; s.length; l += 2) {
          u = Math.sqrt(Math.pow(r - s[l], 2) + Math.pow(i - s[l + 1], 2));
          if (u &lt; 6) return o = l, e(this).bind("mousemove", v), !1
      }
      for (var l = 0; l &lt; s.length; l += 2)
          l &gt; 1 &amp;&amp; (a = n(r, i, s[l], s[l + 1], s[l - 2], s[l - 1], !0), a &lt; 6 &amp;&amp; (f = l));
      return console.log(s), s.splice(f, 0, Math.round(r), Math.round(i)), o = f, e(this).bind("mousemove", v), h(), b(), !1
  }, h = function () {
      l.canvas.width = l.canvas.width;
      if (s.length &lt; 2)
          return !1;
      l.globalCompositeOperation = "destination-over", l.fillStyle = "rgb(255,255,255)", l.strokeStyle = "rgb(255,20,20)", l.lineWidth = 1, l.beginPath(),
  l.moveTo(s[0], s[1]);
      for (var e = 0; e &lt; s.length; e += 2)
          l.fillRect(s[e] - 2, s[e + 1] - 2, 4, 4), l.strokeRect(s[e] - 2, s[e + 1] - 2, 4, 4), s.length &gt; 2 &amp;&amp; e &gt; 1 &amp;&amp; l.lineTo(s[e], s[e + 1]); l.closePath(), l.fillStyle = "rgba(255,0,0,0.3)", l.fill(), l.stroke(), b()
  }, b = function () {
      e(r).val(s.join(","))
  } 
  }; e(document).ready(function () {
      e(".canvas-area[data-image-url]").canvasAreaDraw()
  });
  var n = function (e, t, n, r, i, s, o) {
      function u(e, t, n, r) {
          return Math.sqrt((e -= n) * e + (t -= r) * t)
      }
      if (o &amp;&amp; !(o = function (e, t, n, r, i, s) {
          if (!(i - n)) return { x: n, y: t };
          if (!(s - r))
              return { x: e, y: r };
          var o, u = -1 / ((s - r) / (i - n));
          return {
              x: o = (i * (e * u - t + r) + n * (e * -u + t - s)) / (u * (i - n) + r - s), y: u * o - u * e + t
          }
      }
  (e, t, n, r, i, s), o.x &gt;= Math.min(n, i) &amp;&amp; o.x &lt;= Math.max(n, i) &amp;&amp; o.y &gt;= Math.min(r, s) &amp;&amp; o.y &lt;= Math.max(r, s))) {
          var a = u(e, t, n, r), f = u(e, t, i, s);
          return a &gt; f ? f : a
      }
      var l = r - s, c = i - n, h = n * s - r * i;
  return Math.abs(l*e+c*t+h)/Math.sqrt(l*l+c*c)}})(jQuery);
  </code></pre>