javafx scene builder custom component -

i use custom component in scene builder.
i want embed canvas custom component. try change canvas of attributes .
canvas code this:

    package test;      import javafx.scene.canvas.canvas;     import javafx.scene.canvas.graphicscontext;      public class drawcanvas extends canvas{         public drawcanvas() {             draw();         }          private void draw() {             // todo auto-generated method stub             double width = getwidth();             double height = getheight();             graphicscontext gc = getgraphicscontext2d();             gc.strokeline(0,0,50,50);         }     } 

custom component code this:

    package test;      import java.io.ioexception;     import javafx.fxml.fxmlloader;     import javafx.scene.layout.borderpane;      public class test extends borderpane{          public test() {             super();             fxmlloader fxmlloader = new fxmlloader(getclass().getresource("test.fxml"));             fxmlloader.setroot(this);             fxmlloader.setcontroller(this);             try {                 fxmlloader.load();             } catch (ioexception exception) {                 throw new runtimeexception(exception);             }         }     } 

fxml file:

    <?xml version="1.0" encoding="utf-8"?>      <?import javafx.scene.layout.borderpane?>     <?import javafx.scene.*?>     <?import javafx.scene.control.*?>     <?import javafx.scene.canvas.canvas?>       <fx:root xmlns:fx="http://javafx.com/fxml" type="javafx.scene.layout.borderpane">         <center>         </center>     </fx:root> 

i've tried in way , failed.

    <?import javafx.scene.layout.borderpane?>     <?import javafx.scene.*?>     <?import javafx.scene.control.*?>     <?import javafx.scene.canvas.canvas?>     <?import org.korecky.myjavafx.fxml10.drawcanvas?>     <fx:root xmlns:fx="http://javafx.com/fxml" type="javafx.scene.layout.borderpane">         <center>             <drawcanvas ></drawcanvas>         </center>     </fx:root> 

please give me advice , tips .

your approach working me, need create valid canvas, providing dimensions, otherwise 0x0. instance:

private void draw() {     setwidth(50);     setheight(50);     graphicscontext gc = getgraphicscontext2d();     gc.strokeline(0,0,50,50); } 

now can import drawcanvas component scenebuilder, @jewelsea suggests, , you'll able drag scene:

you add properties class, canvaswidth , canvasheight.

public class drawcanvas extends canvas {      private final graphicscontext gc;      public drawcanvas() {         gc = getgraphicscontext2d();         draw();     }      private void draw() {         setwidth(canvaswidth.get());         setheight(canvasheight.get());         gc.clearrect(0,0,canvaswidth.get(),canvasheight.get());         gc.strokeline(0,0,canvaswidth.get(),canvasheight.get());     }      private final doubleproperty canvaswidth = new simpledoubleproperty(50){         @override         protected void invalidated() {             draw();         }     };      public double getcanvaswidth() {         return canvaswidth.get();     }      public void setcanvaswidth(double value) {         canvaswidth.set(value);     }      public doubleproperty canvaswidthproperty() {         return canvaswidth;     }     private final doubleproperty canvasheight = new simpledoubleproperty(50){         @override         protected void invalidated() {             draw();         }     };      public double getcanvasheight() {         return canvasheight.get();     }      public void setcanvasheight(double value) {         canvasheight.set(value);     }      public doubleproperty canvasheightproperty() {         return canvasheight;     }  } 

this allow set them on inspector panel:

or in fxml files:

<fx:root type="javafx.scene.layout.borderpane" xmlns:fx="http://javafx.com/fxml/1" xmlns="http://javafx.com/javafx/8">    <center>       <drawcanvas canvaswidth="150" canvasheight="250" />    </center> </fx:root>