Skip to main content

JavaFX drawing performance

3 replies [Last post]
Joined: 2005-02-27


I am trying to develop a simple hand drawing tool as my first JavaFX application. The Polyline class seemed to be the handy solution to for the task.
I realized that the code quoted below gets pretty slow when the number of points in Polyline grows beyond some hundreds. On my PC (1200MHz Athlon) it is about 200 points where the drawing slows down.
I guess it slows down because of the frequent repainting calls of all the points (lines) of Polyline.

My question is whether JavaFX programming/scripting language and its ready made classes could provide better performance to support a hand drawing tool or any vector graphic like application? Or shall I dig deeper and implement my own canvas class or similar which does fast painting of the content when drawing on it?


The hand drawing prototype listed below:

<br />
package test.draw;</p>
<p>import javafx.ui.*;<br />
import javafx.ui.canvas.*;<br />
import java.lang.System;</p>
<p>var drawing = new Polyline();</p>
<p>{<br />
    drawing.stroke = Color.RED;<br />
<p>Frame {<br />
    title: "Polyline test"<br />
    width: 500<br />
    height: 500</p>
<p>    content:<br />
        Canvas {<br />
            content: bind drawing</p>
<p>            onMousePressed: function(event) {<br />
                insert [event.x, event.y] into drawing.points;<br />
<p>            onMouseReleased: function(event) {<br />
                System.out.println("number of lines: " + sizeof drawing.points);<br />
<p>            onMouseDragged: function(event) {<br />
                insert [event.x, event.y] into drawing.points;<br />
            }<br />
<p>  visible: true<br />
}<br />

Reply viewing options

Select your preferred way to display the comments and click "Save settings" to activate your changes.
Joined: 2003-06-10

It is often faster to draw 10 polylines with 100 points each, than to draw 1 polyline with 1000 points.

Joined: 2005-02-27

yes, I would have expected so. I have slightly modified the code to "improve" the drawing speed, however, it seems to be as slow as the first version.

here the new code comes:

package test.draw;

import javafx.ui.*;
import javafx.ui.canvas.*;
import java.lang.System;

var layers: Polyline[];

Frame {
title: "Polyline test"
width: 500
height: 500

Canvas {
var drawing: Polyline
var numLines: Integer

content: bind layers

onMousePressed: function(event) {
drawing = new Polyline();
drawing.stroke = Color.RED;

insert drawing into layers;
insert [event.x, event.y] into drawing.points;

onMouseReleased: function(event) {
numLines += sizeof drawing.points;
System.out.println("number of lines: " + numLines);

onMouseDragged: function(event) {
insert [event.x, event.y] into drawing.points;

visible: true

Joined: 2007-12-19

There is an issue at
You might want to add to that.

In my case, my temporary work around was to draw my own Polyline as an image. But that runs into aliasing issues. In general, any graphical object or even images that have samples that crowd the number of pixels will need anti-aliasing filters, which would be compute-intensive for interactive scenarios.