JavaFX Canvas versus HTML5 Canvas
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.
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.
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