Make a grid in paper.js

1. Create Ref for the canvas element

const myCanvas = useRef();
...
<canvas ref={myCanvas}/>

2. Import Paper.js and setup the canvas

pass in the canvas ref from the first step

import Paper from 'paper';

Paper.setup(canvas)

3. Create the makeGrid function and pass arguments

const makeGrid(cols, rows) {
  //we create the grid cells here
} 

4. Calculate the cell size from the arguments

We can get the size of the current project by access Paper.view.bounds.size.width

let canvasSize = Paper.view.bounds.size
let cellWidth = canvasSize.width / columns
let cellHeight = canvasSize.height / rows

5. Create two loops one for columns and another for rows

for(let i=0; i < columns; i++) {
  //creating column
  for(let j=0; j<rows; j++) {
    //creating rows
  }
}

Create a single point that we will use ....