Updated March 31, 2023
Introduction to JavaFX Canvas
The Canvas in JavaFX is providing a rich graphic interfaces by using GraphicsContext. Canvas is a class in JavaFX, which is used to draw the images on the JavaFX stage window. The canvas class has specific height and width that are used to decide the boundaries of the canvas. In simple way we can say canvas class is used for painting the images. The canvas class is available in javafx.scene.canvas package, in order to make use of this class we must import it.
Constructors
Given below are the constructors of JavaFX Canvas:
- Canvas(): It is used to create an instance by using new keyword without any argument.
- Canvas(double width, double height): It is used to create an instance by using new keyword with width and height are arguments.
Frequently Used Methods
Given below are the frequently used methods:
- getGraphicsContext2D(): The getGraphicsContext2D() method is used to get the 2d graphics context for the canvas.
- setHeight(double v): The Height() method is used to set the height of canvas class.
- getHeight(): The Height() method is used to get the height of canvas class.
- setWidth(double d): The Height() method is used to set the height of canvas class.
- getWidth(): The Height() method is used to get the width of canvas class.
How does Canvas work in JavaFX?
- Accessing JavaFX features user defined class must extend application class.
- Creating Canvas class is 1st the Canvas class is created by using new keyword.
Canvas canvasRef=new Canvas(width, height);- Creating GraphicsContext is the 2nd step for adding an image to the reference object of graphic context.
GraphicsContext graphicContext = canvasObject.getGraphicsContext2D();- Creating an Image class is the 3rd step for adding an image to the graphic context object by using drwImage() method.
Image image= new Image("image url");- Creating Group element is the 4th It is used to add canvas object.
GroupgroupRef = new Group(canvasRef);- 5th step is creating Scene for apply show method on to it.
Scene screen = new Scene(groupRef, length, width);- Adding Scene reference screen to the Stage object reference is 6th Adding output screen to Stage. We will get this stage object reference from start predefined JavaFX method.
stage.setScene(screen);- 7th step is showing output to the end user by applying show () method on the scene object.
stage.show();Examples of JavaFX Canvas
Given below are the examples:
Example #1
Canvas with Image and Text.
Code:
package com.canvas;
import javafx.application.Application;
import javafx.scene.Group;
import javafx.scene.Scene;
import javafx.scene.canvas.Canvas;
import javafx.scene.canvas.GraphicsContext;
import javafx.scene.image.Image;
import javafx.scene.paint.Color;
import javafx.scene.text.Font;
import javafx.scene.text.FontWeight;
import javafx.stage.Stage;
public class CanvasTextImage extends Application {
public void start(Stage stageOutput) {
// setting the title to the application
stageOutput.setTitle("Canvas Demo");
// creating group object
Group groupRef = new Group();
// creating scene object and add the group
Scene sceneRef = new Scene(groupRef);
stageOutput.setScene(sceneRef);
// Creating canvas object for add an image
Canvas canvasRef = new Canvas(750, 500);
groupRef.getChildren().add(canvasRef);
// adding 2d graphics to the canvas object
GraphicsContext graphicCOntext = canvasRef.getGraphicsContext2D();
// adding color to the graphic
graphicCOntext.setFill(Color.BLUE);
// adding stroke color to graphic
graphicCOntext.setStroke(Color.BROWN);
// adding line width
graphicCOntext.setLineWidth(3);
// setting font
Font theFont = Font.font("Castellar", FontWeight.BOLD, 38);
graphicCOntext.setFont(theFont);
// adding text to the application
graphicCOntext.fillText("This is Text Area for Canvas", 61, 52);
// creating an image object
Image sunFlowerImage = new Image("sf1.jpeg");
// used to drawing sun flower image
graphicCOntext.drawImage(sunFlowerImage, 182, 102);
// Display the output
stageOutput.show();
}
public static void main(String args[]) {
// JVM calls start method automatically
launch(args);
}
}Output:
Example #2 – Drawing different shapes with Canvas.
Code:
package com.canvas;
import javafx.application.Application;
import javafx.scene.Group;
import javafx.scene.Scene;
import javafx.scene.canvas.Canvas;
import javafx.scene.canvas.GraphicsContext;
import javafx.scene.paint.Color;
import javafx.scene.shape.ArcType;
import javafx.stage.Stage;
public class CanvasShapes extends Application {
@Override
public void start(Stage outStageObject) {
//setting the title for canvas application
outStageObject.setTitle("Drawing Different Shapes");
//creating group object for adding canvas object to it
Group groupObject = new Group();
//creating canvas object
Canvas canvasRef = new Canvas(350, 270);
//creating GraphicsContext for drawing the image
GraphicsContext graphicContext = canvasRef.getGraphicsContext2D();
//setting the color to shapes
graphicContext.setFill(Color.DARKKHAKI);
//setting the shadow color to the shape
graphicContext.setStroke(Color.DARKVIOLET);
//setting line width
graphicContext.setLineWidth(6);
//setting oval shape with some values
graphicContext.fillOval(11, 61, 31, 31);
//setting oval shape shadow with some values
graphicContext.strokeOval(61, 61, 31, 31);
//setting rectangle shape with some values
graphicContext.fillRoundRect(111, 61, 31, 31, 11, 11);
//setting rectangle shape shadow with some values
graphicContext.strokeRoundRect(161, 61, 31, 31, 11, 11);
//setting arc shape with some values and open type
graphicContext.fillArc(11, 111, 31, 31, 46, 241, ArcType.OPEN);
//setting arc shape shadow with some values and Open type
graphicContext.strokeArc(11, 111, 31, 31, 46, 241, ArcType.OPEN);
//setting arc shape with some values and Chord type
graphicContext.fillArc(61, 111, 31, 31, 46, 241, ArcType.CHORD);
//setting arc shape shadow with some values and Chord type
graphicContext.strokeArc(61, 111, 31, 31, 46, 241, ArcType.CHORD);
//setting arc shape with some values and round type
graphicContext.fillArc(110, 111, 31, 31, 46, 241, ArcType.ROUND);
//setting arc shape shadow with some values and round type
graphicContext.strokeArc(111, 111, 31, 31, 46, 241, ArcType.ROUND);
groupObject.getChildren().add(canvasRef);
//creating scene object
Scene sceneObject=new Scene(groupObject);
outStageObject.setScene(sceneObject);
//Displaying output to the user
outStageObject.show();
}
public static void main(String[] args) {
// JVM calls start method automatically
launch(args);
}
}Output:
Example #3
Triangle shape with Canvas.
Code:
package com.canvas;
import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.canvas.Canvas;
import javafx.scene.canvas.GraphicsContext;
import javafx.scene.layout.Pane;
import javafx.scene.paint.Color;
import javafx.stage.Stage;
public class CanvasTrainle extends Application {
@Override
public void start(Stage outStageObject) {
// setting the title for canvas application
outStageObject.setTitle("Canvas Traingle Example");
// creating pane object
Pane paneObject = new Pane();
Canvas canvasRef = new Canvas(300, 300);
GraphicsContext graphicsContext = canvasRef.getGraphicsContext2D();
graphicsContext.beginPath();
// Below lines are for shaping Triangle
graphicsContext.moveTo(35, 35);
graphicsContext.lineTo(155, 35);
graphicsContext.lineTo(155, 155);
graphicsContext.lineTo(35, 35);
graphicsContext.stroke();
paneObject.getChildren().add(canvasRef);
Scene sceneObject = new Scene(paneObject, 300, 250, Color.CHARTREUSE);
outStageObject.setScene(sceneObject);
outStageObject.show();
}
public static void main(String[] args) {
// JVM calls start method automatically
launch(args);
}
}Output:
Conclusion
Canvas is just like painting in windows environment. It is used to drawing images by using graphics context object. We can create any number of shapes with canvas class.
Recommended Articles
This is a guide to JavaFX Canvas. Here we discuss the introduction to JavaFX Canvas with frequently used constructors, methods, and how does canvas work in JavaFX. You may also have a look at the following articles to learn more –
