A javascript port (emsctipten) of the awesome libmypaint brush engine :)

var libmypaint = require("libmypaint"); // libmypaint.js is a UMD module...

var canvas = document.querySelector("#mySurface");
var painter = libmypaint.Painter.fromCanvas(canvas);

//draw a green line :P
painter.setBrush(myBrush).setColor(0,255,0).stroke(100, 100).stroke(200,100);

A brush is just a JSON object. see MyPaint for brush examples.

Download the latest build (or the latest debug build).
libmypaint is a UMD module, and can work with CommonJS, AMD, and script tags:

CommonJS:

var libmypaint = require("libmypaint");

RequireJS:

require([ "libmypaint"], function(libmypaint){ ... });

Script tag

<script src="libmypaint.js"></script>
<script> console.log(window.libmypaint.INFO); </script>

var canvas = document.querySelector("#mySurface");
var painter = libmypaint.Painter.fromCanvas(canvas);

var _lastTime = 0;
var _rect =  canvas.getBoundingClientRect(); // assume no resize

canvas.addEventListener("pointermove", function(e) {
  var dt = (_lastTime ? e.timeStamp - _lastTime : 0) / 1000;
  var x =  e.pageX - _rect.left;
  var y =  e.pageY - _rect.top;

  _lastTime = e.timeStamp;

  painter.stroke(x, y, dt, e.pressure, e.tiltX, e.tiltY);
});

var canvas = document.querySelector("#mySurface");
var painter = libmypaint.Painter.fromCanvas(canvas);

var _lastTime = 0;
var _rect =  canvas.getBoundingClientRect(); // assume no resize

canvas.addEventListener("mousemove", function(e) {
  var dt = (_lastTime ? e.timeStamp - _lastTime : 0) / 1000;
  var x =  e.pageX - _rect.left;
  var y =  e.pageY - _rect.top;

  _lastTime = e.timeStamp;

  if (e.buttons === 1) // left mouse button is pressed?
    painter.stroke(x,y,dt);
  else
    painter.hover(x, y, dt); // same as stroke() with pressure 0
});

var canvas = document.querySelector("#mySurface");
var painter = libmypaint.Painter.fromCanvas(canvas);

var _lastTime = 0;
var _touching = false;
var _rect =  canvas.getBoundingClientRect(); // assume no resize

canvas.addEventListener("touchend", function() { _touching = false});
canvas.addEventListener("touchmove", function(e) {
  var dt = (_lastTime ? e.timeStamp - _lastTime : 0) / 1000;
  var x =  e.touches[0].pageX - _rect.left;
  var y =  e.touches[0].pageY - _rect.top;


  if (_touching)
    painter.stroke(x, y, dt);
  else
    painter.newStroke(x, y);


  _lastTime = e.timeStamp;
  _touching = true;
});

1. make sure you install node, grunt-cli and emscripten SDK.
2. update git sub modules, by running: git submodule update --init --recursive
3. run npm install
4. use one of the following build tasks:

grunt debug     # clean & build a debug version of the library
grunt release   # clean & build a release version of the library

grunt testbed           # build & run the testbed against the debug version
grunt testbed:release   # build & run the testbed against the release version

Painter is a thin wrapper around Bindings, with a simple drawing API that supports method chaining.
It also implements canvas drawing..

Usage:

var painter = Painter.fromCanvas(canvas);

painter.setBrush(brush)
       .stroke(0, 100).stroke(100,100).stroke(100,0)
       .hover(400, 400, 0.5).stroke(500, 400);

@param bindings: Bindings

Use the constructor directly only if your'e implementing your own drawing logic.
For normal usage, see Painter.fromCanvas()

@param canvas: HTMLCanvas or CanvasRenderingContext2D

Create a Painter object that can draw to canvas.

@param brush: Object - a JSON object, with brush settings.
@returns: this

Load all brush settings from a given JSON object...
see https://github.com/mypaint/mypaint/tree/master/brushes for brush examples.

NOTE: the brush parameter object will not be mutated.

@param r,g,b: Number - between 0 and 255, or an Array (e,g [r,g,b])
@returns: this

set current brush color... for example:

    painter.setColor(255,0,0).setColor([255,255,0]);

NOTE: The next call to .setBrush() will reset this value.

@param x,y: Number - stroke position
@param dt: Number - delta time in seconds (optional), defaults to: 0.1
@param pressure: Number - pressure between 0 and 1 (optional), defaults to: 0.5
@param xtilt: Number - (optional), defaults to: 0
@param ytilt: Number - (optional), defaults to: 0
@returns: this

ask the brush engine to perform a stroke...

NOTE: for best results dt should be calculated from the input event (e.timeStamp).

@param x,y: Number - stroke position
@param dt: Number - delta time in seconds (optional), defaults to: 0.1
@returns: this

will perform a stroke with 0 pressure.
use this function when you can get hover events from the input system, but can't get pressure (e,g mouse).

@param x,y: Number - stroke position
@returns: this

resets brush state and renders a "ghost stroke" with pressure 0, and dt of 10 seconds.
use this function only when you can't get pressure & hover events from the input system (mobile touch screens etc..).

The low level bindings to libmypaint, each instance holds it's own emsctipten module. Use this class directly only if you don't want to use the Painter API.

@param drawDab: function(x,y,radius, r,g,b,a, hardness, alpha_eraser, aspect_ratio, angle, lock_alpha, colorize)
@param getColor: function(x, y, radius)

getColor() should return an Array with RGBA values ([r,g,b,a]), where each value is between 0 and 1.
drawDab() will be called to draw stuff...

See Painter for an example implementation of getColor() & drawDab() for canvas.

directly maps to the C function mypaint_brush_stroke_to()

@param brush: Object - a JSON object, with brush settings.

will load all brush settings from a given JSON object...
see https://github.com/mypaint/mypaint/tree/master/brushes for brush examples.

will destroy current brush & allocate new brush, used during .load_brush()

directly maps to the C function mypaint_brush_reset()

@param setting_name: String - the string name of setting e,g "color_h", "color_v" etc...
@param value: Number

used during .load_brush(), and can be used to set color etc... for example:

    my.set_brush_base_value("color_h", 0.0);
    my.set_brush_base_value("color_s", 0.0);
    my.set_brush_base_value("color_v", 1.0);

@param setting_name: String - the string name of setting e,g "color_h", "color_v" etc...
@param input_name: String - the name of the mapping e,g "pressure"...
@param n: Number - number of mapping points.

Used during .load_brush(), and maps to the C function mypaint_brush_set_mapping_n().
Should be called before any .set_brush_mapping_point() calls to this mapping...

@param setting_name: String - the string name of setting e,g "color_h", "color_v" etc...
@param input_name: String - the name of the mapping e,g "pressure"...

Used during .load_brush(), and maps to the C function mypaint_brush_set_mapping_point().