spray like tool performance in paperjs

Question

I'm trying to code a spray like tool in paperjs because the drawing must be svg exportable.

The code is working but the performance gets bad very quickly. Is there a way to mimic a svg exportable spray like tool with improved performance in paperjs or another library?

<script type="text/paperscript" canvas="canvas">

var path;
var gradient = {
    stops: [
        ['rgba(0,0,0,1)', 0],
        ['rgba(0,0,0,0.5)', 0.5],
        ['rgba(0,0,0,0)', 1]
    ],
    radial: true
};

tool.minDistance = 5;
tool.maxDistance = 5;

function onMouseDown(event) {
}

function onMouseDrag(event) {

    path = new Path.Circle({
        center: event.point,
        radius: 10
    });

    path.fillColor = {
        gradient: gradient,
        origin: path.position,
        destination: path.bounds.rightCenter
    };

}

function onMouseUp(event) {
}

document.getElementById('button').addEventListener('click', function() {

    var svg = project.exportSVG({ asString: true });

    console.log('data:image/svg+xml;base64,' + btoa(svg));

});

</script>

update1: fixed gradient var scope, due to suggestion, but the problem persists.

update2: proper use of tool.

Answer 1

for svg i prefer http://snapsvg.io/
for export svg using paper.js could you disable asString and check the performance , cause may be the string added to the DOM very large which produce this lag

Answer 2

Since all Items have the same shape, you should use Symbols in Paper.js. This reduces overhead significantly, because internally the same path will be used for all displayed items.

Here is a Sketch to try

And here is your code using Symbols:

<script type="text/paperscript" canvas="canvas">

var gradient = {
    stops: [
        ['rgba(0,0,0,1)', 0],
        ['rgba(0,0,0,0.5)', 0.5],
        ['rgba(0,0,0,0)', 1]
    ],
    radial: true
};

tool.minDistance = 5;
tool.maxDistance = 5;

var blurredCircle = new Path.Circle({
    center: [0, 0],
    radius: 10,
    insert: false
});

blurredCircle.fillColor = {
    gradient: gradient,
    origin: blurredCircle.position,
    destination: blurredCircle.bounds.rightCenter
};

var blurredCircleDef = new SymbolDefinition(blurredCircle);


function onMouseDown(event) {
}

function onMouseDrag(event) {
   new SymbolItem(blurredCircleDef, event.point);
}

function onMouseUp(event) {
}

document.getElementById('button').addEventListener('click', function() {

    var svg = project.exportSVG({ asString: true });

    console.log('data:image/svg+xml;base64,' + btoa(svg));

});

</script>