This tiny program enables you to draw in a window by using a mouse. Although this is not a full-fledged editor, it is a surprisingly compact program. Look at the few lines of code that provide the drawing function.

var path: Path;
onMousePressed: function(ev: MouseEvent) {
    path = Path {
        stroke: Color.BLUE
        strokeWidth: 2
        elements: MoveTo { x: ev.x, y: ev.y }
    };
    insert path into scene.content;
}
onMouseDragged: function(ev: MouseEvent) {
    insert LineTo { x: ev.x, y: ev.y } into path.elements;
}

In response to a mouse click, a new path is created and added to the scene. This path is invisible so far, as it consists of a single MoveTo element. As the mouse moves, new linear segments are added to the path, which automatically becomes visible onscreen.

Another event handler is added. A double click in the area erases everything that was drawn:

onMouseClicked: function(ev: MouseEvent) {
    if (ev.clickCount == 2) {
        scene.content = scene.content[0];
    } 
} 

In the previous code example, everything is removed from the scene.content but the first element, which is a "canvas" to draw on.

Because the scene.content object is a sequence, the code should have been written as follows.

scene.content = [ scene.content[0] ]; 

But in JavaFX Script language, any object is identical to a sequence consisting of this single object, which makes this abridged notation possible.

Try drawing in the following area. To clear the area, double-click in the interior.

You can find the complete code in Draw.fx.