What’s new for HTML Canvas in webOS 3.0

2 BY devrel

As you know, we’re big fans of web standards. The Canvas API is a crucial part of HTML 5 web standards, letting you draw complex 2D graphics in the middle of your web content without any plugins. All it takes is some simple JavaScript. I just wanted to go over some of the improvements we’ve made to the Canvas API for webOS 3.0.

Here are some of the highlights:

  • - The Canvas.toDataURL function is now supported – you can manipulate pixels to your heart’s content, getting the results out as a Base64 encoded PNG. From there you can use it as the source to an IMG tag, upload it to a web service, or save it locally.
  • - Line caps and Line Joins are fully implemented. This makes charts and graphs a lot prettier.
  • - More composite modes.
  • - Multi-touch events: While this isn’t specific to Canvas, it’s common for Canvas apps to use multi-touch events.  Now webOS can join the fun.
  • - Bug fixes: Lots and lots of bug fixes, including some around transforms and arc drawing.

Beyond features and bug fixes, one of the biggest changes is speed. We’ve been working hard to improve HTML Canvas performance and I think the results speak for themselves. As a frame of reference, my particle demo previously would reach around 90 or 100 particles before dropping below 20 frames per second. Now, I can get to 200 particles in the same demo, which is a significant bump in basic drawing performance.

 

Others have taken notice as well. Sencha recently reviewed the TouchPad’s HTML support on their blog and they said it had “the fastest Canvas implementation [they've] seen thus far”:

“We had heard good things about the Canvas support so we decided to push the browser further. So, we tried some of the Microsoft mobile performance tests to stress canvas. Here the TouchPad screams—it has the fastest Canvas implementation we’ve seen thus far. For example, on the Mobile Speed Reading test, the TouchPad gets 16 FPS (PlayBook gets 10 FPS, iPad 2 gets 3 FPS, and the Xoom fails to load the test). Even more impressive is the Fish Tank demo, where the TouchPad hovers around 25 FPS. Canvas performance is stellar.”

Of course, we’re not stopping there. We’re already working on making future updates even better.

 

Comments (2)

  1. bob says:

    Correct me if I’m wrong, but didn’t webOS support multitouch events since at least 1.4.5? Or are these different from the gesturestart/gestureend events? I know a few apps that have had multitouch controls since 1.4.5.

  2. Josh Marinacci says:

    We supported specific gestures since 1.4.5. With 3.0 we support the standard DOM touch events, which give you direct access to all (10 i think) touches. This is the same W3C spec that iOS and Android support.