JavaFX Canvas Examples

In this tutorial we will learn more JavaFX widgets usage via simple examples.

Example 1: Canvas

Let us look at the code

Step 1: Create Project

1. Open your favorite Java IDE.
2. In the menu go to File --> Create New Project.

Step 2: Dependencies

No dependencies are needed for this project.

Step 3: Write Code

Our code will comprise the following java files:

• CanvasExample.java

1. In your editor or IDE, create a file known as CanvasExample.java.
2. Then add the following code:

(a). CanvasExample.java

Like in every program we write, we will need to import functionalities into our project. Add the following imports:

import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.canvas.Canvas;
import javafx.scene.canvas.GraphicsContext;
import javafx.scene.layout.VBox;
import javafx.scene.paint.Color;
import javafx.stage.Stage;

Extend the class as shown below:

public class CanvasExample extends Application {

Our class will have the following methods:

• void main(String[] args)
• void start(Stage primaryStage)

Let’s create a main method as shown below:

    public static void main(String[] args) {

In this particular class we will be overriding our void start(Stage primaryStage) method.
Prepend the code>@Override</code modifier to your method. Then add implementation code as follows:

    @Override
    public void start(Stage primaryStage) {

        Canvas canvas = new Canvas();
        canvas.setHeight(512);
        canvas.setWidth(512);

        GraphicsContext graphicsContext2D = canvas.getGraphicsContext2D();

        graphicsContext2D.setFill(Color.valueOf("#ff0000"));
        graphicsContext2D.fillRect(100, 100, 200, 200);

        graphicsContext2D.setStroke(Color.valueOf("#0000ff"));
        graphicsContext2D.strokeRect(200, 200, 200, 200);

        VBox vbox = new VBox(canvas);
        Scene scene = new Scene(vbox);
        primaryStage.setScene(scene);
        primaryStage.show();
    }

Here is the full code:

package com.jenkov.javafx.canvas;

import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.canvas.Canvas;
import javafx.scene.canvas.GraphicsContext;
import javafx.scene.layout.VBox;
import javafx.scene.paint.Color;
import javafx.stage.Stage;

/**
 * Shows a simple JavaFX Canvas.
 */
public class CanvasExample extends Application {

    public static void main(String[] args) {
        launch(args);
    }

    @Override
    public void start(Stage primaryStage) {

        Canvas canvas = new Canvas();
        canvas.setHeight(512);
        canvas.setWidth(512);

        GraphicsContext graphicsContext2D = canvas.getGraphicsContext2D();

        graphicsContext2D.setFill(Color.valueOf("#ff0000"));
        graphicsContext2D.fillRect(100, 100, 200, 200);

        graphicsContext2D.setStroke(Color.valueOf("#0000ff"));
        graphicsContext2D.strokeRect(200, 200, 200, 200);

        VBox vbox = new VBox(canvas);
        Scene scene = new Scene(vbox);
        primaryStage.setScene(scene);
        primaryStage.show();
    }

}

Download

Download the code using the below links: