For me (Chrome on Linux and Windows) Canvas edged it. Flash had a slightly higher peak framerate (about 42fps) but it varied wildly (dropping to 25fps at times) and also paused a lot on Linux.
Similarly for me, flash varied (from 20 to 50fps) with pauses, in chrome on linux. Canvas & html both around 40fps, svg slighlty lower. Based on my experience, I would rule out flash, but since majority of users are on win or osx I second the author that flash is probably best choice for him.
I actually had the 'pauses' on Windows using Firefox 3.6 as well. So it's not 100% cut and dried - but, I think his conclusion (use Flash, but Canvas is a growing alternative) is good.
I think his conclusion should be taken with a big grain of salt, because, if you look ahead, to the inevitable future, Flash will probably not be anywhere close to as big an actor as it is today, while Canvas will without doubt grow and grow. But I guess if time stood still, which seems to be the case with most Flash protagonists.....
I'm not sure anyone is arguing Flash will be better forever, it's just at the moment everyone is getting excited about Canvas even though it's not a viable replacement in most situations yet.
I'm using Opera 10.51 on Windows 7 (Boot Camp), on a 2006 Macbook Pro, and canvas was competitive with Flash. Canvas started at 30 and Flash at 60, but both quickly converged to 45...and there was some minor stuttering with Flash.
with Opera 10.51 on Vista it was about the same. But there was no difference between flash/canvas/html on the smaller end all 25. But as the numbers grew the difference became noticeable. But the number reported did not reflect how smooth the animations were. so there must have been something wrong with how the numbers were gathered.
I noticed something off - in Chrome on the Mac Flash never dropped below 40 fps while canvas and SVG never went over ~25 fps, but perceptually it seemed things are the other way around - canvas and SVG animations seemed smoother than Flash.
I noticed the same thing. I was getting ~70fps in the flash version, but it looked like it was stuttering and dropping frames. Try the link at the bottom that's rate limited to 25fps. It appears very smooth.
I took a look at his Javascript code, in the "HTML" example, and it was far from as well written as it could be - I could easily do the same effect with a whole lot better framerate. I am not sure how fair a test this is.
I think the general rant I'd throw comes down to the fact that this guy is a "software engineer". He constructs code as if he was designing a mechanical machine, which is just awkward and inefficient. Don't get me wrong on the whole "software engineering vs programming" thing, but I discern good, fast, efficient code from bulky, clunky (but still working) code; you can't "drive car" with a sailing yacht, you can't "breakdance" the Waltz, and you can't go "industrial engineer" on programming - sure, it'll get you somewhere, but it's just not the best way for the end purpose's fullest efficiency - AND EFFICIENCY MATTERS.
1000 plots, averages to 35 fps on my 2.25ghz Macbook on Safari 4.0.3, and this requires more computational power per object plotted than a smart version of the "bouncing balls" effect he tries to do.
Flash does have hardware acceleration support, but it wouldn't be helping in this situation. It actually makes things slower in most cases apart from video playback.
Interesting to see the variety of results people are getting here. If anyone is using the Flash 10.1 beta they'll probably find the tests never get above 60FPS due to alterations in the timing system from previous versions.
The one slightly misleading thing about this test case is I'm pretty sure canvas would fall behind quite quickly with a scene with more complicated shapes (understandably so, you have to call JS functions to redraw everything every frame, whereas in Flash you could draw once and then move objects around and let the renderer deal with it without the overhead of calling the drawing functions every time).
As the comments show, different systems will have different performance benchmarks. Maximizing performance on your dev system doesn't guarantee performance for your users. A full test suite of all platforms and browsers and Flash versions, while possible, seems like a burdensome undertaking for most folk.
I'd spend a lot more time maximizing the performance of my underlying code than benchmarking which platform can edge out the other. If you NEED that edge, you can be sure that some systems out there won't cut it.
23 comments
[ 2.0 ms ] story [ 63.8 ms ] threadCanvas as consistently 38/39fps.
HTML 23 Canvas 25 SVG 13 Flash 50
No contest here :-/
Has anyone else noticed anything similar?
Play with this a bit: http://pastebin.com/wauSARbt
1000 plots, averages to 35 fps on my 2.25ghz Macbook on Safari 4.0.3, and this requires more computational power per object plotted than a smart version of the "bouncing balls" effect he tries to do.
For Chrome, the results are quite different:
With the unadorned links:FF+html: 2.5; +canvas: 4; +svg: 1; +flash: 15fps
The one slightly misleading thing about this test case is I'm pretty sure canvas would fall behind quite quickly with a scene with more complicated shapes (understandably so, you have to call JS functions to redraw everything every frame, whereas in Flash you could draw once and then move objects around and let the renderer deal with it without the overhead of calling the drawing functions every time).
something like this www.audiotools.com would not even be possible in canvas me thinks.
As the comments show, different systems will have different performance benchmarks. Maximizing performance on your dev system doesn't guarantee performance for your users. A full test suite of all platforms and browsers and Flash versions, while possible, seems like a burdensome undertaking for most folk.
I'd spend a lot more time maximizing the performance of my underlying code than benchmarking which platform can edge out the other. If you NEED that edge, you can be sure that some systems out there won't cut it.