Skip to content
✏️ Nice modular interactive 2D drawing library
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.

Pencil.js logo

✏️ Pencil.js

NPM Version Dependencies update Maintainability Test Coverage Inline docs Support me on Patreon

Nice modular interactive 2D drawing library.


You can install the whole package with the following command :

npm install pencil.js

But, each part is a JS module and can be used independently, ex:

npm install @pencil.js/scene


If you want to go old-school, you can fetch the script with unpkg or jsdelivr.

<script src=""></script>
<!-- or -->
<script src=""></script>

    const scene = new Pencil.Scene();


Once you have installed it, you can start to import it using common.js or ES6 syntax.

There's multiple ways to rely on the project for your, pick the one that fits you need or preference :

// The whole package under a namespace
import Pencil from "pencil.js";

const scene = new Pencil.scene();


// Just the part you need
import Scene from "@pencil.js/scene";
// or
import Scene from "pencil.js";

const scene = new Scene();


// Works the same way with common.js syntax
const Scene = require("pencil.js").Scene;
// or
const Scene = require("@pencil.js/scene");

Since today's web browser don't support module requirements yet, you need to use a bundler like webpack or browserify.



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 is great, OOP is almighty, OOP saves lives ! Others library exists, but none with a beautiful OOP syntax. It makes code look natural.


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.


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


import Scene from "pencil.js"; // or "@pencil.js/scene"
import Rectangle from "pencil.js"; // or "@pencil.js/rectangle"
import Position from "pencil.js"; // or "@pencil.js/position"

const scene = new Scene(); // create a new scene

const width = 80;
const height = 50;
const rectangle = new Rectangle(new Position(100, 200), width, height, {
    fill: "red"
}); // Create a new red rectangle
scene.add(rectangle); // Add the rectangle to the scene

scene.render(); // Render the scene once

Take a look at more advanced examples.


Who is using Pencil.js ?


JetBrains logo Gwenaël Provost


You want to help us improve ? Please read the contributing manual.


Guillaume Martigny

All contributions are valued, you can add yourself to this list (or request to be added) whatever your contribution is.



You can’t perform that action at this time.