JavaFx and HTML5 differences – Shapes work differently

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.

Related Posts:

The following two tabs change content below.
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).
Chika Okereke

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).

4 thoughts on “JavaFx and HTML5 differences – Shapes work differently

  1. Nice blog, I felt the JavaFX code could be made less verbose with a extended version of our PathBuilder class and posted a rebound blog on my thoughts. Extending PathBuilder.

  2. 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.

    • Leon Atherton

      Hi Oswald,
      Thanks for sharing, they look very interesting.
      Leon

Leave a Reply

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

You may use these HTML tags and attributes:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>