I miss ya, MS Paint

After recently buying a MacBook, I discovered quite quickly that iOS does not come with its own paint application. MS Paint comes included in every version of Microsoft Windows, it is a simple application, that allowed its users to express a creative outlet. Take master MS Paint artist Pat Hines, creator of the “Camp Redblood” comic series for example.

A snippet from Camp Redblood. Image credits

As a child I fiddled around with the application doing nothing more than playing with shapes and colors when I got bored of playing 3D Pinball Space Cadet. Life without internet was rough. Now as a student, learning how to code, I realized I could just make my own paint application with JavaScript, boy what an easy solution, with no foreseeable difficulties.

Enter Paper.js

What is Paper.js?

Paper.js is a vector graphics framework for JavaScript that allows the user to create shapes, art and animations. Utilizing vector geometry, shapes are easy to make and draw. Mathematical operations on vectors are also made easy; allowing users to subtract, add, multiply, and divide vectors with a single line of code. Knowledge and a good understanding of vector math will greatly benefit users of paper.js.

But what is a vector? And what is … ? And other terms.

A vector is, as defined by the Merriam-Webster dictionary:

“a quantity that has magnitude and direction and that is commonly represented by a directed line segment whose length represents the magnitude and whose orientation in space represents the direction;”
A and B are points, v is a vector. Image credits

A vector can be found by subtracting the difference (displacement) between two points.

A point describes a specific location in a 2d field.

A segment is a point with two handles that define the location and direction of curves. Represents the curve between two points.

A path is a sequence of segments connected by curves.

An super basic Paint app

After following the docs for Paper.js and properly installing, my index.html file looked like this:

an older version of my html file, updated version here: repo link

some of my index.js file:

repository link

And after some Paper.js magic …

Everything is displayed through an aptly named canvas tag html item. You can also create shapes like squares and circles, use things like fill color or shadow but this was enough for me, for now. I was close to getting the shapes to animate by changing colors and rotating through the onFrame function but I wasn’t quite there yet. There are still many bugs that need to be fixed like the clear button and the colors only change the last line drawn. I will be updating this app and taking it even further soon but thats it for now!