DEV Community

Cover image for Pencil.js
Guillaume Martigny
Guillaume Martigny

Posted on • Edited on

Pencil.js

Pencil.js

Today, I want to present you Pencil.js; a nice modular interactive 2D drawing library written in javascript.

Still in building phase, it already has a lots of features to try out.

Purpose

Abstraction

Drawing in a canvas is not trivial.
First of all, the goal is to ease the use of canvas in a browser; allowing anyone to use it with its comprehensible syntax and extensible options.

OOP

OOP is great, OOP is almighty, OOP saves lives !
Others library exists, but none with a beautiful OOP syntax. It makes code look natural.

Modularity

Splitting the whole code into modules make everything cleaner.
It also allow you to grab only what you need or replace what you don't like.

Documentation

A complete documentation goes a long way to help developers.
All functions are assured to have a description and also typed arguments and returns.

Examples

Black triangle

Here's a "hello world" kind example.

Interaction

Based on events, it's easy to build interactivity.

There's a lot more options (rotation, cursor, clip ...) and shapes (Star, Image, Path ...) for you to discover.
I event start to add complexe component like user inputs (button, checkbox, slider ...) and it works well so far.

More ...

There is more example in the Pencil.js codepen collection. If you create something nice, contact me so I can add yours too.

What do you think ?

First of all, I'm looking for feedback. I would like to build an API that's usable by beginners, but I know it too well. If you have any suggestion or encounter any bugs, let me know.

If you liked it, please, take the time to upvote it.
Thanks for your time and see ya.

Top comments (9)

Collapse
 
gmartigny profile image
Guillaume Martigny

Logo build with the library of course ;)

Collapse
 
kayis profile image
K

Somehow the results don't work on mobile :(

(Android/Chrome)

Collapse
 
twigman08 profile image
Chad Smith

I got them working for me on my Android device in chrome. Had to click the rerun button on the bottom right when it showed up.

Though the drag example doesn't let me drag on mobile.

Collapse
 
kayis profile image
K

This button doesn't show, but tapping two times on result solved it.

Collapse
 
gmartigny profile image
Guillaume Martigny

Shoot :/
What were you trying to do ? For my part, examples from gmartigny.github.io/pencil.js/ works.

Collapse
 
tunaxor profile image
Angel Daniel Munoz Gonzalez

Thanks! finally some OOP with all this fuss about Functional stuff, I do miss good OOP libraries from time to time, and as someone that usually stays away from drawing in canvas because it looks too messy, it seems that this could change my opinion!

Collapse
 
gmartigny profile image
Guillaume Martigny

You welcome, and thank you for the nice comment. Please, use it and tell me what you think 😋

Collapse
 
ekimkael profile image
Ekim Kael

Looks good.
I'll try to play with on codepen

Collapse
 
gmartigny profile image
Guillaume Martigny

Please, share what you did I would love to see it.