HTML5 vs Flex – Drawing Curves

We recently finished a first release of a data visualization application. The application was written in Flex and needed to draw curves with up to 250,000 points total between them. To do this in less than a half a second took quite a bit of optimization, to the point where we could have written a 3D real-time video game with our rendering code.

I was curious to see what the performance would be on other browsers with HTML5 Canvas. I put together a simple GWT program to run each browser through it's paces. The target on the Macbook Pro I was using: 400 milliseconds, which is what the Flex app could do for 250,000 points. The results?

  • Opera 10.53 - 160 milliseconds.
  • Safari 5.0 - 180 milliseconds.
  • Firefox 3.6.4 - 180 milliseconds.
  • Chrome 5.0 - 200 milliseconds.
  • iPad - 2500 milliseconds.
  • IE ? - Blech. Don't ask. Minutes. It likely has something to do with the GWT implementation.

For a long time if you suggested using web technologies for complex graphical operations, you would have been laughed out of the room. When the tools and libraries catch up to Flex/Flash, however, these days nobody will be chuckling at HTML5.