title: How to draw a line in canvas with a background image
body: <p>I'm trying to draw a line in canvas (which I can do), but I want to put a repeating pattern on the line using a background image (unless there is another way to put a repeating background image on a line in canvas?). </p>
  
  <p>How can I draw a line with a background image? </p>
  
  <p>I understand the concept of clipping, but that only seems to work with shapes... not with a stroke. Any ideas? </p>
  
  <p>Here is a jsfiddle of what I was trying
  <a href="http://jsfiddle.net/Z9cd7/" rel="nofollow">http://jsfiddle.net/Z9cd7/</a></p>
  
  <pre><code>    function (callback) {
          window.setTimeout(callback, 1000 / 60);
      };
  })();
  
  var radius = 50;
  var x = 100;
  var dx = 10;
  var y = 100;
  var dy = 10;
  var delay = 10;
  var img = new Image();
  img.onload = function () {
      var canvas1 = document.getElementById("image");
      var ctxImg = canvas1.getContext("2d");
      ctxImg.drawImage(img, 0, 0, img.width, img.height, 0, 0, canvas.width, canvas.height);
  
      /*
      ctx.clearRect(0, 0, canvas.width, canvas.height);
      ctx.save();
      ctx.beginPath();
      ctx.arc(100, 100, radius, 0, 2 * Math.PI, false);
      ctx.clip();
      ctx.drawImage(img, 0, 0, img.width, img.height, 0, 0, canvas.width, canvas.height);
      ctx.restore();
      */
      ctx.moveTo(0,0)
      ctx.lineTo(100,100)
      ctx.lineWidth = 10;
      ctx.stroke()
  
      ctx.clip();
      ctx.drawImage(img, 0, 0, img.width, img.height, 0, 0, canvas.width, canvas.height);
      ctx.restore();
  
      //animate();
  }
  img.src = "http://lh3.ggpht.com/_Z-i7eF_ACGI/TRxpFywLCxI/AAAAAAAAAD8/ACsxiuO_C1g/house%20vector.png";
  </code></pre>