brush.js

BrushJS

BrushJS is a tiny library for drawing on a HTML5 canvas, originally created to back the Pencil editor. Its main features are performace, support for nested transformations on contexts and high-quality text rendering.

Features

• DrawingContext2D fully backwards-compatible with CanvasRenderingContext2D and supporting transformation nesting. You can even pass a nested drawing context to other drawing libraries as if it was an ordinary rendering context!
• Uses gl-matrix for ridiculously fast transform operations.
• Supports HiDPI canvas as in HiDPI canvas polyfill. Using DrawingContext2D makes it very trivial to implement it yourself.

Examples

const g = new BRUSH.HQDrawingContext2D() 
g.scale(4, 4) // make everything bigger
g.fillText("Hello, there.", 100, 100) // draws in high-quality

const g2 = g.nest()
g2.translate(100, 100) 
g2.fillRect(0,0,100,50) // hey look, it's still scaled!
g.fillRect(0,0,100,50) // no translation on this one

document.body.appendChild(g.canvas)

Installation

Recommended way is through NPM using something like webpack.

npm i --save brush.js

Alternatively, include one of the releases in your <script/>-tag.

In Chrome, you need to enable the experimental canvas APIs. This can be done on the command line using --enable-experimental-canvas-features or in the about:flags-page.