javascript - KineticJS Image に描画機能を追加する方法

Question

Kinetic JS Image で画像を再描画する関数を作成しようとしています。ワープ/カーブ エフェクトを作成しようとしていますが、画像を再描画する必要があります。

私のアプローチは、画像をスライスし、円の方程式に基づいて Y 座標上で画像の各スライスを移動することです。

画像のコンテキストを取得して再描画できません。これは私が得たものです：

     warp: function(wx, wy){
        var width = this.getWidth(),
        height = this.getHeight(),           
        context = this.getContext(),
        image = this.getImage();

        for(var n=0; n < width; n++){           
            var sx = n,
                sy = 0,
                sWidth = 1,
                sHeight = height,
                dx = 1,
                dy = 200 * Math.cos(n * 2 * Math.PI / width);
            console.log(dy);
            context.drawImage(image, sx, sy, sWidth, sHeight, dx, dy, width, height);
        }           
    }

再描画を実現する方法について何か提案があれば教えてください。ありがとう！