JavaFX Canvas : "fuzzy" lines compared to Swing

Question

Hi,
I would very much like to port my Swing application (that draws on a JComponent) to JavaFX. But to my dismay the JavaFX Canvas does not draw as sharp and thin lines as Swing does.
Lines drawn with the same thickness is noticeably thicker (and "fuzzier") on the JavaFX Canvas than the equivalent Swing lines. I have tested both on Windows (7) and Linux, both 64-bit.
In my JavaFX app, I proceed like this: gc.beginPath() --> gc.moveTo(..) --> gc.lineTo() --> gc.stroke().
Is there a setting or something I am missing?

Answer 1

You need to take into account the coordinate system.
For further explanation of why this works see the answer to the question below and Node's javadoc:
http://stackoverflow.com/questions/11881834/what-are-a-lines-exact-dimensions-in-javafx-2
http://docs.oracle.com/javafx/2/api/javafx/scene/Node.html
At the device pixel level, integer coordinates map onto the corners and cracks between the pixels and the centers of the pixels appear at the midpoints between integer pixel locations. Because all coordinate values are specified with floating point numbers, coordinates can precisely point to these corners (when the floating point values have exact integer values) or to any location on the pixel. For example, a coordinate of (0.5, 0.5) would point to the center of the upper left pixel on the Stage. Similarly, a rectangle at (0, 0) with dimensions of 10 by 10 would span from the upper left corner of the upper left pixel on the Stage to the lower right corner of the 10th pixel on the 10th scanline. The pixel center of the last pixel inside that rectangle would be at the coordinates (9.5, 9.5).
import javafx.application.Application;
import javafx.scene.*;
import javafx.scene.canvas.*;
import javafx.stage.Stage;
/** JavaFX Canvas : "fuzzy" lines compared to Swing JavaFX Canvas : "fuzzy" lines compared to Swing */
public class FuzzyCanvas extends Application {
  public static void main(String[] args) { launch(args); }
  @Override public void start(Stage stage) {
    Canvas canvas = new Canvas(50, 50);
    GraphicsContext gc = canvas.getGraphicsContext2D();
    gc.beginPath();    // fuzzy line.
    gc.moveTo(10, 30);
    gc.lineTo(20, 30);
    gc.stroke();
    gc.beginPath();    // clean line.
    gc.moveTo(10.5, 39.5);
    gc.lineTo(19.5, 39.5);
    gc.stroke();
    stage.setScene(new Scene(new Group(canvas)));
    stage.show();
}