Codementor Events

Pencil.js

Published Jun 27, 2018
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.

black triangle

Interaction

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

interaction demo

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

If you want to see more examples built with Pencil.js, check the collection on codepen.
Don't hesitate to share what you've made.

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.

Discover and read more posts from Guillaume Martigny
get started
post commentsBe the first to share your opinion
Guillaume Martigny
6 years ago
Show more replies