Chika Okereke Chika has written much of the JavaFX converter and also helps with the HTML5 converter. When not experimenting with the new features of JavaFX, 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));
path_4.setStrokeWidth(2);
path_4.setStroke(Color.rgb(255,0,0));

JavaFX implementation

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

pdf_context.beginPath();
pdf_context.moveTo(50,50);
pdf_context.lineTo(150,50);
pdf_context.lineTo(150,150);
pdf_context.lineTo(50,150);;
pdf_context.lineTo(50,50);
pdf_context.lineWidth = '2';
pdf_context.strokeStyle = 'rgb(255,0,0)';
pdf_context.stroke();
pdf_context.closePath();

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.

IDRsolutions develop a Java PDF Viewer and SDK, an Adobe forms to HTML5 forms converter, a PDF to HTML5 converter and a Java ImageIO replacement. On the blog our team post anything interesting they learn about.

Chika Okereke Chika has written much of the JavaFX converter and also helps with the HTML5 converter. When not experimenting with the new features of JavaFX, he is a keen basketball player (he is the tall guy you might see at Devoxx).

Converting your PDF files to HTML5 with BuildVu 

Recently we announced our updated product range for 2018 and are rebranding some existing products, like JPDF2HTML5 which has been renamed to BuildVu. It...
Georgia Ingham
2 min read

Favourite resources from our HTML development team

As the web progresses and grows, so do the technologies that come along with it. Trying to keep on top of everything you need...
Ovidijus Okinskas
1 min read

How HTML5 Javadocs in Java 9 will make your…

Here at IDRsolutions we are very excited about Java 9 and have written a series of articles explaining some of the main features. In...
Rob
1 min read

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 *