Sharp edges on lines and curves in JavaFX FXML-based application

Question

Lines drawn on JavaFX canvas has sharp minecrafty edges.

For example, I took demo code from JavaFX Canvas documentation. Here is the result from demo application:

And here is the result from FXML-based application:

Canvas is being created manually from code. At the moment of drawing it is on the stage already.

Blur effect, round line cap and round line joins doesn't help.

gcProgress.setEffect(blur);
gcProgress.setStroke(Color.ROYALBLUE);
gcProgress.setLineCap(StrokeLineCap.ROUND);
gcProgress.setLineJoin(StrokeLineJoin.ROUND);
gcProgress.setLineWidth(3);

PS Maybe it's important, the same problem with fonts: anti-aliasing seems not working. Tested on Windows and Mac.

Answer 1

You need to set smooth="true" on your elements.

---

This can also be done in the scene builder: Arc->Properties-> "Smooth" checkbox when using SceneBuilder (v8.2.0).

The result:

Here is a snippet from generated FXML file:

<Arc fill="WHITE" layoutX="71.0" layoutY="61.0" length="270.0" radiusX="30.0" radiusY="30.0" startAngle="45.0" stroke="#1500ff" strokeLineCap="ROUND" strokeType="INSIDE" strokeWidth="4.0" type="ROUND" />
<Arc fill="WHITE" layoutX="138.0" layoutY="61.0" length="270.0" radiusX="30.0" radiusY="30.0" startAngle="45.0" stroke="#1500ff" strokeLineCap="ROUND" strokeType="INSIDE" strokeWidth="4.0" type="CHORD" />
<Arc fill="WHITE" layoutX="201.0" layoutY="61.0" length="270.0" radiusX="30.0" radiusY="30.0" startAngle="45.0" stroke="#1500ff" strokeLineCap="ROUND" strokeWidth="4.0" />

<Arc fill="WHITE" smooth="false" layoutX="71.0" layoutY="133.0" length="270.0" radiusX="30.0" radiusY="30.0" startAngle="45.0" stroke="#1500ff" strokeLineCap="ROUND" strokeType="INSIDE" strokeWidth="4.0" type="ROUND" />
<Arc fill="WHITE" smooth="false" layoutX="138.0" layoutY="133.0" length="270.0" radiusX="30.0" radiusY="30.0" startAngle="45.0" stroke="#1500ff" strokeLineCap="ROUND" strokeType="INSIDE" strokeWidth="4.0" type="CHORD" />
<Arc fill="WHITE" smooth="false" layoutX="201.0" layoutY="133.0" length="270.0" radiusX="30.0" radiusY="30.0" startAngle="45.0" stroke="#1500ff" strokeLineCap="ROUND" strokeWidth="4.0" />