Drawing layers with jcanvas: performance optimization <p>)</p> <p>I have a small web-application which uses jquery and jcanvas (<a href="http://calebevans.me/projects/jcanvas/" rel="nofollow">http://calebevans.me/projects/jcanvas/</a>) to print some shapes onto a canvas.</p> <p>It's basically a map. The user can zoom into it and drag it around and whenever he does so everything has to be drawn again.</p> <p>As you may see in the code below I remove and recreate layers pretty often (whenever the user drags the map, zooms or resizes his window). I need the layers to handle hover- and click-events. My question is whether there is a big performance impact of this way to handle events in comparison to other solutions. If this is the case, how could I optimize my performance?</p> <pre><code>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); } }); }); } </code></pre> <p>Thank you for your time :-)</p>