javascript - jcanvas を使用したレイヤーの描画: パフォーマンスの最適化

Question

)

jquery と jcanvas ( http://calebevans.me/projects/jcanvas/ ) を使用していくつかの形状をキャンバスに印刷する小さな Web アプリケーションがあります。

基本的に地図です。ユーザーはズームインしてドラッグすることができますが、そうするたびにすべてを再描画する必要があります。

以下のコードでわかるように、私はかなり頻繁にレイヤーを削除して再作成します (ユーザーがマップをドラッグしたり、ウィンドウをズームまたはサイズ変更したりするたびに)。ホバーイベントとクリックイベントを処理するレイヤーが必要です。私の質問は、他のソリューションと比較して、イベントを処理するこの方法がパフォーマンスに大きな影響を与えるかどうかです。この場合、パフォーマンスを最適化するにはどうすればよいですか?

var posX = 0, posY = 0;
var zoom = 100;
var points = []; //array of up to 1000 points retrieved by ajax

function draw(){
    $("canvas").removeLayers();
    $("canvas").clearCanvas();


    var xp, yp, ra;
    var name;

    $.each(points, function(index) {
        xp = (this["x"]-posX)/zoom;
        yp = (this["y"]-posY)/zoom;
        ra = 1000/zoom;
        $("#map").drawArc({
            layer:true,
            fillStyle: "black",
            x: xp, 
            y: yp,
            radius: ra,
            mouseover: function(layer) {
                $(this).animateLayer(layer, {
                      fillStyle: "#c33",
                      scale: 1.0
                    },200);
            },
            mouseout: function(layer) {
                $(this).animateLayer(layer, {
                      fillStyle: "black",
                      scale: 1.0
                    },200);
            },
            mouseup: function(layer){
                context(index,layer.x,layer.y);
            }
        });
    }); 

}

お時間をいただきありがとうございます:-)