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 jsfiddle 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?:
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);
}
}
Hers's the original codepen I'm working from.
`updated fiddle 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:
ctx.fillStyle = ptrn;
and removing line 260:
ctx.strokeStyle = ptrn;
but it seems to remove the background image just displaying it as a black grid... thank you again for the patience