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));
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();
This is the code for the red box below, however the others are similar.
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.