# [PaperJS] Draw a Grid of Circles

Wed Developer Bootcamp on Udemy: Lecture 171PaperJS exercise to draw a grid of circles. What is a [paperjs] draw a grid of circles How do you make a [paperjs] draw a grid of circles? This script and codes were developed by Sean Mills on 30 January 2022, Sunday.

How do I make an [paperjs] draw a grid of circles?
[PaperJS] Draw a Grid of Circles Previews

## [PaperJS] Draw a Grid of Circles HTML Codes

``````<!DOCTYPE html>
<html >
<meta charset="UTF-8">
<title>[PaperJS] Draw a Grid of Circles</title>

<body>
<canvas id="myCanvas" resize></canvas>

<script type="text/paperscript" canvas="myCanvas">
//dimensions of grid (e.g. a 5x10 grid)
var rows = 5;
var cols = 10;

//center coordinates of any circle being drawn
var x;
var y;

//center coordinates of first circle being drawn
var xstart = 50;
var ystart = 50;

// distance between center coordinates
var xspacing = 100;
var yspacing = 100;

var fillColor = 'orange';

// create grid and draw circles
for(var row = 1; row <= rows; row++) {
y = ystart + (row - 1) * yspacing;

for(var col = 1; col <= cols; col++) {
x = xstart + (col - 1) * xspacing;
new Path.Circle(new Point(x, y), radius).fillColor = fillColor;
}
}
</script>

<script src="js/index.js"></script>

</body>
</html>``````

## [PaperJS] Draw a Grid of Circles CSS Codes

``````html, body {
height: 100%;
margin: 0;
}

canvas {
width: 100%;
background-color: black;
}``````

## [PaperJS] Draw a Grid of Circles JS Codes

``````/*!
* Paper.js v0.9.25 - The Swiss Army Knife of Vector Graphics Scripting.
* http://paperjs.org/
*
* Copyright (c) 2011 - 2014, Juerg Lehni & Jonathan Puckey
* http://scratchdisk.com/ & http://jonathanpuckey.com/
*
*
*
* Date: Sun Oct 25 11:23:38 2015 +0100
*
***
*
* Straps.js - Class inheritance library with support for bean-style accessors
*
* Copyright (c) 2006 - 2013 Juerg Lehni
* http://scratchdisk.com/
*
*
***
*
* Acorn.js
* http://marijnhaverbeke.nl/acorn/
*
* Acorn is a tiny, fast JavaScript parser written in JavaScript,
* created by Marijn Haverbeke and released under an MIT license.
*
*/