javascript - html5キャンバスstrokeStyle？

Question

私は、strokeStyleとcanvasを使用して布をシミュレートする「3d」グリッドに画像をマッピングしようとしています。画像は含まれていますが、現在は背景画像として機能しており、波紋のように「布」と実際には流れていません。グリッドが流れるとき、画像は静的です。これが自明のjsfiddleです（Chromeでのみ機能します）。どんな助けでも大歓迎です。これが画像を背景にレンダリングするJavaScriptです。背景画像としてのレンダリングを停止し、グリッド全体にのみ表示するにはどうすればよいですか？：

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);
    }
}

彼女は私が働いているオリジナルのcodepenです。`関数update（）の外部の画像で更新されたフィドル：現在、実際にセルを埋めるだけでなく、背景画像として適用しているようです。背景画像になるのを止めて、グリッドを埋めるためだけに適用する方法はありますか？私はこれを試しました：
ctx.fillStyle = ptrn; 行260を削除します：
ctx.strokeStyle = ptrn; しかし、背景画像が黒いグリッドとして表示されているだけで削除されているようです...しばらくお待ちいただきますようお願いいたします。

Answer 1