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)
Logo build with the library of course ;)
Somehow the results don't work on mobile :(
(Android/Chrome)
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.
This button doesn't show, but tapping two times on result solved it.
Shoot :/
What were you trying to do ? For my part, examples from gmartigny.github.io/pencil.js/ works.
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!
You welcome, and thank you for the nice comment. Please, use it and tell me what you think 😋
Looks good.
I'll try to play with on codepen
Please, share what you did I would love to see it.