brush.js
v0.0.1
Published
A tiny but efficient library for drawing graphics
Downloads
19
Maintainers
Readme
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.