If you reload your page, you should see the canvas now.
Now that we have something to draw on, we’ll link in Paper.js to help us with the
drawing. Right after we link in jQuery, but before we link in our own main.js, add the
following line:
<
script
src
=
"https://cdnjs.cloudflare.com/ajax/libs/paper.js/0.9.24/
↩
paper-full.min.js"
></
script
>
Note that, as with jQuery, we’re using a CDN to include Paper.js in our project.
You might be starting to realize that the order in which we link
things in is very important. We’re going to use both jQuery and
Paper.js in our own main.js, so we have to link in both of those first.
Neither of them depends on the other, so it doesn’t matter which
one comes first, but I always include jQuery first as a matter of
habit, as so many things in web development depend on it.
Now that we have Paper.js linked in, we have to do a little work to configure Paper.js.
Whenever you encounter code like this—repetitive code that is required before you
do something—it’s often called boilerplate. Add the following to main.js, right after
'use strict'
(you can remove the
console.log
if you wish):
paper
.
install
(
window
);
paper
.
setup
(
document
.
getElementById
(
'mainCanvas'
));
// TODO
paper
.
view
.
draw
();
The first line installs Paper.js in the global scope (which will make more sense in
). The second line attaches Paper.js to the canvas, and prepares Paper.js for
drawing. In the middle, where we put
TODO
is where we’ll actually be doing the inter‐
esting stuff. The last line tells Paper.js to actually draw something to the screen.
Now that all of the boilerplate is out of the way, let’s draw something! We’ll start with
a green circle in the middle of the canvas. Replace the “TODO” comment with the
following lines:
var
c
=
Shape
.
Circle
(
200
,
200
,
50
);
c
.
fillColor
=
'green'
;
Refresh your browser, and behold, a green circle. You’ve written your first real Java‐
Script. There’s actually a lot going on in those two lines, but for now, it’s only impor‐
tant to know a few things. The first line creates a circle object, and it does so with
three arguments: the x and y coordinates of the center of the circle, and the radius of
the circle. Recall we made our canvas 400 pixels wide and 400 pixels tall, so the center
of the canvas lies at (200, 200). And a radius of 50 makes a circle that’s an eighth of
10 | Chapter 1: Your First Application
