title: html5 canvas strokeStyle?
body: <p>I am trying to map an image to a "3d" grid that simulates cloth using strokeStyle and canvas, i have the image included but it is currently acting as a background image and not actually flowing with the "cloth" as is ripples, I.E the image is static as the grid flows.
  here's the <a href="http://jsfiddle.net/S7nBq/" rel="noreferrer">jsfiddle</a> which is self explanatory ( only works in Chrome). 
  any help is much appreciated.
  here is the javascript that renders the image into the background, How do i stop from rendering as a background image and only make it fill the grid?: </p>
  
  <pre><code>function update() {
  
      var img = new Image();
      img.src = 'http://free-textures.got3d.com/architectural/free-stone-wall-   textures/images/free-stone-wall-texture-002.jpg';
      img.onload = function() {
  
          // create pattern
          var ptrn = ctx.createPattern(img, 'repeat');
  
          ctx.clearRect(0, 0, canvas.width, canvas.height);
  
          physics.update();
  
          ctx.strokeStyle = ptrn;
          ctx.beginPath();
          var i = points.length;
          while (i--) points[i].draw();
          ctx.stroke();
  
          requestAnimFrame(update);
      }
  }
  </code></pre>
  
  <p>Hers's the original <a href="http://codepen.io/stuffit/pen/KrAwx" rel="noreferrer">codepen</a> I'm working from.
      `updated <a href="http://jsfiddle.net/S7nBq/" rel="noreferrer">fiddle</a> with image outside function update():
  It currently seems to actually fill the cells as well as applying it as a background image. is there any way to stop it becoming a background image and only apply it to fill the grid? I've tried this:<br>
     ctx.fillStyle = ptrn;
  and removing line 260:<br>
  ctx.strokeStyle = ptrn;
  but it  seems to remove the background image just displaying it as a black grid... thank you again for the patience</p>