✏️ Pencil.js

Nice modular interactive 2D drawing library.

Installation

You can install Pencil.js with the following command :

npm install pencil.js

CDN

On capable browsers, the easiest way is to import the ESM package.

<script type="module">
    import { Scene } from "https://unpkg.com/pencil.js/dist/pencil.esm.js";
    
    const scene = new Scene();
</script>

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

<script src="https://unpkg.com/pencil.js"></script>
<!-- or -->
<script src="https://cdn.jsdelivr.net/npm/pencil.js"></script>

<script>
    const scene = new Pencil.Scene();
</script>

Usage

Once you have installed the library using NPM, you can start to import it.

You can either import everything under a namespace or only the package you're going to use. Pick the way that fit your style.

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

const scene = new Pencil.scene();

/***/

// Just the part you need (recommended)
import { Scene } from "pencil.js";

const scene = new Scene();

In that case, you will need to use a bundler like webpack or browserify.

Documentation

The official documentation .

What Pencil.js do best

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 allows 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 typed arguments and returns.

Performance

Pencil.js is able to draw thousands of shapes pretty smoothly without tanking your memory. Even more if you use the Particles generator.

Size

With , Pencil.js is fairly lightweight. Furthermore, with no side effect, it's fully tree-shakable. So, any decent bundler can further reduce its footprint.

Examples

import { Scene, Rectangle } from "pencil.js";

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

const position = [100, 200];
const width = 80;
const height = 50;
const options = {
    fill: "red",
};
const rectangle = new Rectangle(position, width, height, options); // 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.

Modules

Core modules

Core modules refer to all classes and methods you'll get within Pencil.js library.

EventEmitter
- Container
  - OffScreenCanvas
    - Scene
  - Component
    - .draggable()
    - .rotatable()
    - Particles
    - Path
    - Heart
    - Line
      - Spline
    - Polygon
      - RegularPolygon
        
        Star
        
        Triangle
    - Rectangle
      - .resizable()
      - Square
      - Image
        
        Sprite
    - Arc
      - Pie
      - Ellipse
        
        Circle
    - Text
- Input
  - Button
  - Checkbox
  - Knob
  - ProgressBar
  - ProgressPie
  - Select
  - Slider
Position
Vector
Math
Navigation
Color
LinearGradient
RadialGradient
ConicGradient
Pattern
BaseEvent

Non-core modules

Non-core modules refer to packages made by us and not part of Pencil.js library. We find them useful, so maybe you will too...

spritesheet (CLI)
Pack a set of images into a single spritesheet along its json description file.
vue-pencil.js
Build reactive 2D graphics scene in your Vue project.
gif
Turn any Pencil.js scene into an animated GIF.
text-direction
Gives the rendering text direction (left to right or right to left) of a node.
test-environment
Set a Node.js environment suitable for testing Pencil.js and Pencil.js applications.
canvas-gif-encoder
Create a GIF stream frame by frame from a canvas rendering context.