Drawing on Canvases

How to draw

  • Create a canvas object
  • Get a graphics context from the canvas
  • Use the graphics context to draw

Canvases.java

// Canvases.java
//    A program to demonstrate drawing on a canvas.

import java.io.*;
import javafx.application.*;
import javafx.embed.swing.*;
import javafx.scene.*;
import javafx.scene.canvas.*;
import javafx.scene.control.*;
import javafx.scene.image.*;
import javafx.scene.layout.*;
import javafx.scene.paint.*;
import javafx.stage.*;
import javax.imageio.*;

public class Canvases extends Application {
  Canvas canvas;
  
  public void save() {
    WritableImage image = canvas.snapshot(null, null);
    try {
      ImageIO.write(SwingFXUtils.fromFXImage(image, null), "png", new FileOutputStream("canvas.png"));
    }
    catch (IOException ex) {
      System.out.println(ex.getMessage());
    }
  }
    
  public void start(Stage stage) {
    // Create a Canvas
    canvas = new Canvas(600, 600);
    GraphicsContext gc = canvas.getGraphicsContext2D();
    gc.setStroke(Color.BLUE);
    gc.setLineWidth(2);
    gc.beginPath();
    gc.moveTo(100, 100);
    gc.lineTo(100, 200);
    gc.lineTo(200, 200);
    gc.lineTo(200, 100);
    gc.closePath();
    gc.stroke();
      
    // Create a button to trigger saving the canvas.
    Button button = new Button("Save");
    button.setOnAction(e -> save());

    // Create a pane to hold the canvas.
    BorderPane pane = new BorderPane();
    pane.setCenter(canvas);
    pane.setBottom(button);

    // Create a scene.
    Scene scene = new Scene(pane);

    // Set up the stage and make it visible.
    stage.setTitle("Canvas");
    stage.setScene(scene);
    stage.show();
  }

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

Rubber Banding

// RubberBand.java
//    Demonstrates Rubberbanding for drawing shapes.

import javafx.application.*;
import javafx.scene.*;
import javafx.scene.canvas.*;
import javafx.scene.control.*;
import javafx.scene.effect.*;
import javafx.scene.input.*;
import javafx.scene.layout.*;
import javafx.scene.paint.*;
import javafx.scene.shape.*;
import javafx.stage.*;

public class RubberBand extends Application {
  Canvas bottom;
  Canvas top;
  GraphicsContext bgc;
  GraphicsContext tgc;
  double startX;
  double startY;
  
  void startRubber(MouseEvent e) {
    startX = e.getX();
    startY = e.getY();
    tgc.strokeRect(startX, startY, 0.1, 0.1);
    //    tgc.strokeLine(startX, startY, startX, startY);
  }

  void continueRubber(MouseEvent e) {
    tgc.clearRect(0, 0, 600, 600);
    double x = Math.min(startX, e.getX());
    double y = Math.min(startY, e.getY());
    double w = Math.abs(startX - e.getX());
    double h = Math.abs(startY - e.getY());
    tgc.strokeRect(x, y, w, h);
    //    tgc.strokeLine(startX, startY, e.getX(), e.getY());
  }

  void finishRubber(MouseEvent e) {
    tgc.clearRect(0, 0, 600, 600);
    double x = Math.min(startX, e.getX());
    double y = Math.min(startY, e.getY());
    double w = Math.abs(startX - e.getX());
    double h = Math.abs(startY - e.getY());
    bgc.strokeRect(x, y, w, h);
    // bgc.strokeLine(startX, startY, e.getX(), e.getY());
  }
  
  public void start(Stage stage) {
    // Create a Canvas
    bottom = new Canvas(600, 600);
    top = new Canvas(600, 600);
    bgc = bottom.getGraphicsContext2D();
    tgc = top.getGraphicsContext2D();
    top.setOnMousePressed(e -> startRubber(e));
    top.setOnMouseDragged(e -> continueRubber(e));
    top.setOnMouseReleased(e -> finishRubber(e));
    
    // Create a pane to hold the canvas.
    StackPane pane = new StackPane();
    pane.getChildren().addAll(bottom, top);

    // Create a scene.
    Scene scene = new Scene(pane);

    // Set up the stage and make it visible.
    stage.setTitle("Canvas");
    stage.setScene(scene);
    stage.show();
  }

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

ToolBars

// ToolBars.java
//    Demonstrates building a toolbar.

import java.util.function.*;
import javafx.application.*;
import javafx.geometry.*;
import javafx.scene.*;
import javafx.scene.canvas.*;
import javafx.scene.control.*;
import javafx.scene.image.*;
import javafx.scene.input.*;
import javafx.scene.layout.*;
import javafx.stage.*;

public class ToolBars extends Application {
  final static int ICON_SIZE = 48;
  
  Button drawIcon(Consumer<GraphicsContext> draw) {
    Canvas canvas = new Canvas(ICON_SIZE, ICON_SIZE);
    GraphicsContext gc = canvas.getGraphicsContext2D();
    draw.accept(gc);
    Button button = new Button("", canvas);
    return button;
  }
  
  ToolBar createToolBar() {
    ToolBar toolBar = new ToolBar();
    Button circleButton = drawIcon(gc -> gc.strokeOval(5, 5, ICON_SIZE - 10, ICON_SIZE - 10));
    Button diskButton = drawIcon(gc -> gc.fillOval(5, 5, ICON_SIZE - 10, ICON_SIZE - 10));
    Button folderButton = new Button("", new ImageView("folder.png"));
    Button trashButton = new Button("", new ImageView("trash.png"));
    toolBar.getItems().addAll(circleButton, diskButton, folderButton, trashButton);
    toolBar.setOrientation(Orientation.VERTICAL);
    return toolBar;
  }
  
  public void start(Stage stage) {
      
    // Create a pane to hold the canvas.
    BorderPane pane = new BorderPane();
    pane.setRight(createToolBar());

    
    // Create a scene.
    Scene scene = new Scene(pane);

    // Set up the stage and make it visible.
    stage.setTitle("Toolbars");
    stage.setScene(scene);
    stage.show();
  }

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