I'm having a huge perf issue when using EaselJS vs Canvas native method : 2.2 s vs 0.01 s (although EaselJS do map canvas native methods...).
I wrote a canvas app which draws a tree*. In order to animate the growth af the tree, it seems cleaner and handier to tween an EaselJS graphics object than writing a custom drawing function. *(actually it'll look more like a virginia creeper)
1) I must have done something wrong, as the perf with EaselJS are awfull.
The significant piece of the code :
var g=new createjs.Graphics();
g.bs(branchTexture);
for (var i=0; i < arbre.length; i++) {
var step=arbre[i];
for (var t=0; t < step.length; t++){
var d=step[t];
var c=d[5];
var s=new createjs.Shape(g);
s.graphics.setStrokeStyle(7*(Math.pow(.65,d[7]-1)),'round').mt(c[0],c[1]).qt(c[2],c[3],c[4],c[5]);
}
mainStage.addChild(s);
}
}
mainStage.update();
Here's a jsfiddle showing the comparison : http://jsfiddle.net/xxsL683x/29/
I tried removing texture, simplifying moveTo() operations, but the result si still very slow. Caching doesn't apply, as it's the first rendering pass. What have I done wrong ?
2) Additionally, I need to find a way to orient the filling pattern in the direction of the growth, so I think i'll get rid of the vector shapes and interpolate some bitmap between two "growth states". If anyone has a better idea, i would be glad to read it.
(But it would be nice to have an answer to the first question though, it's probably not the last time I'll be attempting to tween complex objects.)
3) Another reason for getting rid of EaselJS is that the antialiasing doesn't apply. Why ? Also has to be investigated...
Hope this question will help others to avoid some errors, if I've done some, or at least lead to a better understanding of the way easeljs handles vector shapes.
PS : The tree do have leaves ;)... but I pulled them out for obvious clarity reasons.
I've update your Fiddle, it's now much faster. The problem is that you're creating a new Shape in each loop, which is pretty slow.
for (var t=0; t < step.length; t++){
// loop
g.setStrokeStyle(7*(Math.pow(.65,d[7]-1)),'round').mt(c[0],c[1]).qt(c[2],c[3],c[4],c[5]);
}
// then just create a Shape after all your graphic commands are built
var s = new createjs.Shape(g);
mainStage.addChild(s);