Chika Okereke Chika is a Java developer. When not experimenting with the new features of Java, he is a keen basketball player (he is the tall guy you might see at Devoxx).

JavaFx and HTML5 differences – Shapes work differently

1 min read

Over the past few months I have been working on a couple of projects, involving HTML5 and JavaFX. There are many similarities and as you can imagine some differences as well. In these series I will concentrate mainly on the differences.

The first one I noticed, and the subject of today’s article, was the moveTo command. This is available in both the HTML5 and JavaFX as a method used to draw shapes. This a class in JavaFX which means a new instance of it has to be created whereas on HTML5 its a method which can be accessed from the canvas object.

Path path_4 = new Path();
ObservableList shape_4 = path_4.getElements();
shape_4.add(new MoveTo(50,50));
shape_4.add(new LineTo(150,50));
shape_4.add(new LineTo(150,150));
shape_4.add(new LineTo(50,150));
shape_4.add(new LineTo(50,50));

JavaFX implementation

var pdf_canvas=document.getElementById("pdf6");
var pdf_context=pdf_canvas.getContext("2d");

pdf_context.lineWidth = '2';
pdf_context.strokeStyle = 'rgb(255,0,0)';

HTML5 implementation

This is the code for the red box below, however the others are similar.

Colored shapes

When the MoveTo command is omitted for any reason, be it a mistake or an attempt for a short-cut or lazy programming, the result is rather interesting…

On the HTML5 output the first line after where the moveTo command is meant to be does not get drawn, however the other lineTo commands are executed producing an awkward shape. For example the red square below is drawn in a clockwise manner from the top left to top right, top right to bottom right, bottom right to bottom left and finally from the bottom left to the top left. By comparison the green is drawn in an anti-clockwise manner.

The JavaFx does the complete opposite, where the HTML5 displays the proceeding lines JavaFx compiles and runs with an error stating the initial MoveTo is missing. Regardless of this fact the program still runs BUT with the whole shape missing.

Not sure which you prefer?? I would rather the shape does not show up so that I know I have omitted something i.e. MoveTo as opposed to being deceived that is still there. What do you think?

Stay tuned as no doubt I will encounter some more interesting differences. Which I am going to document for you.

Watch how to use our PDF Viewer JPedal

Chika Okereke Chika is a Java developer. When not experimenting with the new features of Java, he is a keen basketball player (he is the tall guy you might see at Devoxx).

4 Replies to “JavaFx and HTML5 differences – Shapes work differently”

  1. Thanks for the link to your great post. It make the JavaFx code much more compact. We also have an issue with some PDFs generating large JavaFx files (which will not work if too big) so any reduction in size is good.

Leave a Reply

Your email address will not be published. Required fields are marked *

IDRsolutions Ltd 2022. All rights reserved.