Pencil

Live examples

A canvas 2D drawing library, optimized for performance, bundle size and simplicity.

import { Graph, Container, Node, Style } from 'pencil'
import { Circle } from '2d-geometry'

class CustomGraph extends Graph {
  constructor(canvas) {
    super(canvas)

    this.root.add(
      new Container([
        new Node(new Circle(100, 100, 10), Style.from({ fill: 'red' }))
      ])
    )

    this.render()
  }
}

const newGraph = new CustomGraph(document.querySelector('canvas'))

Design

This library is a thin visualization layer on top of 2d-geometry, which provides powerful mathematical primitives. It's canvas-only (no SVG), so it can stay performant, small & simple. The API is inspired & copied from PixiJS when possible.

Why not…

…SVG?

It's great if you can use it, but it performs less well than canvas. If you have graphs with lots of elements, or many small graphs, the UX is going to feel sluggish.

…PixiJS?

It's a gamedev library so the size is huge. WebGL/WebGPU is nice if you need it, but it's also a limitation as browsers only allow a limited number of WebGx contexts in a page (e.g. 16 in chrome).

…Konva or Two.js?

I have replicated the animation stress test from Konva and Pencil is substantially faster than both. Specializing Pencil for canvas 2d context means it can be optimized more easily.

Konva	Two.js	Pencil

License

TBD - Do not use for now