Creating a stamp/symbol brush in paper.js

Question

I am trying to create a symbol from an imported .svg that will then be cloned to canvas on every onmousemove. The below code clones the symbol once - but then fires an error.

I'm new to javascript and paper.js so any help would be much appreciated!

function onMouseMove(event) {
  
  var symbol =  new Symbol(project.importSVG("../img/brush.svg"));
      
  var clone = symbol.clone({
        center: event.middlePoint
      });
}

Answer 1

You should definitely create the symbol outside the event handling function, otherwise the svg will be read on each mouse move event and a new symbol will be created each time. And there is no need for cloning, simply placing the symbol should work. The following snipplet works (using a sample svg), but it does not read the svg from file.

var symbol =  new Symbol(project.importSVG('<svg  xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><rect x="10" y="10" height="100" width="100" style="stroke:#ff0000; fill: #0000ff"/></svg>'));

function onMouseMove(event) {      
  symbol.place(event.middlePoint);  
}

Here is the Sketch for testing