JavaFX Canvas versus HTML5 Canvas

Introduction

In my previous post I stated the evidence for why I consider JavaFX to be a “Golden Goose” for software developers.  Now I’d like to present more evidence as to why JavaFX just rocks.

I will start with the Canvas node.

The JavaFX Canvas is unique in the range of “nodes” supported in the API as it utilises immediate mode as opposed to the retained mode of the other node types.  This means that the programming language itself (i.e. any JVM language such as Java) describes the graphics, text and images and the way they are rendered as opposed to a scene graph.  The rendering happens immediately where as with a scene graph, the definition of the objects to be rendered are retained in memory and then rendered on each pulse.

The concept of a canvas is not new to JavaFX; in fact, the JavaFX version is based on the Canvas element of HTML5 and has a very similar API.  I wanted to determine just how the JavaFX implementation stacks up to the HTML5 version so I devised a simple particle-style demo which renders each particle as either simple graphics (a ball), as text or as an image and then compared the demo running in JavaFX and HTML5.

I have read many times that the JavaFX Canvas is supposed to out perform the HTML5 Canvas so I wanted to find out for myself if this was accurate or just hype.

For those who can’t wait for an analysis of the results, here is a short demo highlighting the differences.  It is worth noting that for both JavaFX and HTML5, the animations when observed in “real life” are much smoother than they appear in the captured video.

It is clear from the video that JavaFX out-performs HTML5 in all particle styles and for the text particle it absolutely blows HTML5 away!

Let’s dig a little deeper…

Comparison of the APIs

As I mentioned, the APIs of the JavaFX Canvas and HTML5 Canvas are very similar.  Both include methods to stroke and fill graphics primitives such as arcs, curves (Bezier & quadratic), lines, rectangles and text as well as drawing images, applying transforms and clipping along with saving and restoring state.

As similar as they are, the following is a summary of some of the differences between the two Canvas implementations:

  • HTML5 Canvas has no explicit methods to fill ovals or polygons
  • JavaFX Canvas has the cool appendSVGPath() method which adds a “path” as used in SVG to the current path
  • HTML5 Canvas has no explicit method to apply an effect (such as a blur etc.)
  • HTML5 Canvas has an extra method isPointInStroke() which is not in JavaFX Canvas (although both support isPointInPath())
  • Some methods (such as arc()) have different parameter lists

There are probably other differences but all-in-all, it’s really very simple to convert your code between JavaFX Canvas and HTML5 Canvas.

Performance

All demos were run on the same machine and OS whose specifications are:

  • Hardware: Dell Precision T7500 Workstation
  • CPU: 2 x Intel Xeon W5590 3.3GHz
  • RAM: 24GB
  • GPU: NVIDIA QuadroFX 5800
  • OS: Windows 7 Ultimate 64-bit SP1
  • JDK: Java 7 Update 25 64-bit
  • Browser: Chrome 28.0.1500.95 m

Note: No thorough quantitative analysis of the performance characteristics was done so I am relying entirely on my observations.  In terms of “performance”, I am referring to the speed of the animations and also their smoothness.

The most obvious conclusion from running the demos and several variations including number of particles and complexity of graphics is that JavaFX really does perform extremely well.  There was never any demo configuration that performed better in HTML5 than it did in JavaFX.  In fact, the text particle demo runs so much slower in HTML5 that I had to limit the time in the video allocated for that demo.

Further, I was able to increase the number of particles in the JavaFX demos to almost ridiculous levels and they still performed well.  In contrast, I wasn’t able to increase the number of particles in the HTML5 demos much beyond a few thousand before the speed and smoothness of the animations degraded significantly.

I encourage you to try out the code below and fiddle around with all attributes of the demos and then report back here with your results.

HTML5 Canvas ain’t HTML5 Canvas!

One of the most important discoveries from these tests was that the performance characteristics of the “standard” HTML5 Canvas element are very different in different browsers.  I tested the demos with Chrome 28, Firefox 22, IE 8 and IE 10.  Overall Chrome performed the best but, as I said, it seems to have major performance issues with text rendering.  Firefox text rendering was much better but the image demo simply didn’t work at all.  IE 10 did surprisingly well with all the demos but IE 8?  Well, just forget it!

This pretty much destroys the argument that is frequently brought up by HTML5 fanboys that HTML5 is a “standard” platform across many devices and operating systems.  While it’s true that the API itself is the same, it is disturbing that my HTML5 app is going to behave quite differently depending on the browser that the end-user is running at the time.  Given that this is usually the primary argument for using HTML5, it’s just another tick in the JavaFX box.

As an aside, the method I used to blur the HTML5 canvas (by setting canvas.style.webkitFilter) only worked in Chrome but given that Chrome is the only WebKit based browser I tested I guess that’s not entirely surprising and I am sure there must be other ways of achieving this effect anyway.

Conclusion

It is patently obvious that JavaFX is more than capable of highly performant animations and in all the tests I have conducted personally, it out-performs its HTML5 cousin, sometimes quite dramatically.  This is another reason why I believe JavaFX is emerging as the best graphics toolkit for developing rich front-end applications on the market today.  Given these performance characteristics and all the other advantages that it provides (especially all those inherent in using the Java platform itself), I am convinced that JavaFX is here to stay and that it will play an ever-growing role in the future of software development.

As I stated in my previous post, JavaFX does not attempt to replace HTML5; both technologies can and will co-exist, each with their own strengths and weaknesses and each filling a different niche in the software ecosystem.

Try It Yourself

You can download all of the source files for these demos (including Java, HTML and the images used) and try them out for yourself.

Note: As anyone who has worked with me will attest, my code is usually erring on the side of “over commenting” rather than “under commenting” and while experienced software developers may consider this noise, I have found that such comments are invaluable for those starting out with a new language or technology.

Download the source here JavaFX Canvas versus HTML5 Canvas Source and give it a bash!  Please leave comments below and let me know how these demos work in  your environment and any other feedback on this topic.

Just my 2 bits

Felix

Posted on August 11, 2013, in JavaFX and tagged , , . Bookmark the permalink. 6 Comments.

  1. This is quite an interesting comparison; increasing the numbers of items to roughly 30’000 still runs quite smoothly on a MacBookPro mid-2010 using JavaFX, while both Safari and Firefox just come to a complete stall. Putting the application into fullscreen [using stage.setFullScreen(true)] makes them significantly slower on my side, though still acceptably fast. It will be interesting to see the performance developments in coming years for HTML5 inside browsers.

  2. Thank you for the demos and the comparison.

  1. Pingback: JavaFX links of the week, August 11 // JavaFX News, Demos and Insight // FX Experience

  2. Pingback: Java desktop links of the week, August 11 « Jonathan Giles

  3. Pingback: JavaFX with Nashorn Canvas example | Just my 2 bits

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Follow

Get every new post delivered to your Inbox.

Join 118 other followers

%d bloggers like this: