Impossible to multiply point in paperjs

Question

Description/Steps to reproduce

When using PaperJS in React I cannot multiply Point as it is in this example.

Link to reproduction test-case

My code:

import Paper from 'paper'


  useEffect(() => {
    let size = (circleRadius * 2 + (spacing - circleRadius * 2)) * boardSize
    canvasRef.current.height = size
    canvasRef.current.width = size
    Paper.setup(canvasRef.current)
  }, [])


function generateImage() {
    const raster = new Paper.Raster(imgRef.current) 
    raster.visible = false 
    raster.position = Paper.view.center 
    raster.on('load', function () {
      raster.size = new Paper.Size(boardSize, boardSize)

      for (let x = 0; x < raster.width; x++) {
        for (let y = 0; y < raster.width; y++) {
          const color = raster.getPixel(x, y)

         var path = new Paper.Path.Circle({
              center: new Paper.Point(x, y) * spacing,
              radius: 9,
            })
...
}

The result i get is ´NaN´

Expected result

I should get Point with updated x, y points.

Any ideas what might have gone wrong? What am I missing?

Answer 1

Use paperPoint.multiply(otherPoint) instead of paperPoint * otherPoint.