How to add large number of circles without losing performance?

Question

As I am building my simulator using createljs, I will need to have thousands of little circles ( 3 pixels diameter ). I can draw a circle on a shape graph, is this a recommended approach? or shall I use a bitmap?

Any idea about the best way in terms of performance?

Also, is it possible to set text antialias on or off?

Are the circles static once drawn? – WiredPrairie Apr 14 '13 at 12:00 — WiredPrairie, Apr 14 '13 at 12:00

gartox · Answer 1 · 2013-04-14T09:18:32.600

1

You can check the following article to read about optimizing the canvas.

http://www.html5rocks.com/en/tutorials/canvas/performance/

In this paper, we show different rendering techniques with canvas

About easeljs adobe has a guide for developers who are transitioning from AS3 to HTML5:

http://blogs.adobe.com/digitalmedia/2011/01/getting-started-with-the-canvas-element-and-easeljs/

In this article shows how to create a new Shape instance from a previous object definition.

edited Apr 14 '13 at 09:18

answered Apr 14 '13 at 08:06

gartox

891
10
6

Thanks, but as I am using EaselJS framework, I need an advice via EaselJS, as I am not directly playing with canvas, I am a migrating action script 3 developer .. – simo Apr 14 '13 at 08:39
I have found a great example here http://banners.aquafadas.com/yann/testWebkit/EaselJS_v0_3_2/examples/cache.html – simo Apr 14 '13 at 09:56
1

The example @simo posted is an old version that comes with EaselJS. The latest can be seen here on the CreateJS site: http://createjs.com/#!/EaselJS/demos/cache – Lanny Apr 15 '13 at 17:10

score 0 · Accepted Answer · answered Apr 15 '13 at 00:54

0

If you are looking for performance, consider caching your shapes using Shape.cache(x,y,w,h), which provides some benefits in most browsers. Check out the cache demo that is in the EaselJS Git repo. Note that Safari 6 has the opposite effect (caching is slower) in that example because Safari does awesome optimizations on Graphics already, and handles lots of small objects on the GPU poorly.

If you shapes change a lot over time, then caching may not be a good option.

answered Apr 15 '13 at 00:54

Lanny

11,244
1
22
30

Thanks, but how would I know if my app is running on Safari 6 so that I avoid caching? – simo Apr 15 '13 at 05:55
I wouldn't say you should "avoid caching".. This is a pretty specific edge case where lots of small bitmaps and good performance of vectors has the opposite effect - but you will usually get a net-gain when caching (as long as you do it smartly). You could always just check the user-agent to check for Safari. – Lanny Apr 15 '13 at 17:08

How to add large number of circles without losing performance?

2 Answers2