For those seeking only lines:
function createGridLines(num_columns, num_rows, boundingRect) {
var width_per_column = boundingRect.width / num_columns;
var height_per_row = boundingRect.height / num_rows;
for (var i = 0; i <= num_columns; i++) {
var xPos = boundingRect.left + i * width_per_column;
var topPoint = new paper.Point(xPos, boundingRect.top);
var bottomPoint = new paper.Point(xPos, boundingRect.bottom);
var aLine = new paper.Path.Line(topPoint, bottomPoint);
aLine.strokeColor = 'black';
}
for (var i = 0; i <= num_rows; i++) {
var yPos = boundingRect.top + i * height_per_row;
var leftPoint = new paper.Point(boundingRect.left, yPos);
var rightPoint = new paper.Point(boundingRect.right, yPos);
var aLine = new paper.Path.Line(leftPoint, rightPoint);
aLine.strokeColor = 'black';
}
}
createGridLines(4, 4, paper.view.bounds);
If you prefer each rectangle as an individual Path to allow hit testing on each one:
function createGridRectangles(num_columns, num_rows, boundingRect) {
var width_per_column = boundingRect.width / num_columns;
var height_per_row = boundingRect.height / num_rows;
for (var i = 0; i < num_columns; i++) {
for (var j = 0; j < num_rows; j++) {
var aRect = new paper.Path.Rectangle(boundingRect.left + i * width_per_column, boundingRect.top + j * height_per_row, width_per_column, height_per_row);
aRect.strokeColor = 'white';
aRect.fillColor = 'black';
}
}
}
createGridRectangles(4, 4, paper.view.bounds);