Skip to content
Canvas markup library using Fabric.js
JavaScript Python Shell
Branch: master
Clone or download
marczych Merge package-json-fixes (#20) into master
package.json: Remove spaces in dependency versions.

Since multiple restrictions can be placed upon the version of a dependency, there shouldn't be a space in '>= 0.1.13'.

Latest commit e94be67 Mar 12, 2015
Type Name Latest commit message Commit time
Failed to load latest commit information.
test Update 9900CC oracle image Feb 13, 2015
validator Move JSON validator to its own subproject Apr 17, 2013
.gitignore Add test image output to gitignore Apr 10, 2013
BuilderJSON.Backend.schema Remove $schema line from Builder schema Apr 17, 2013
ImageMarkupCall.js GraphicsMagick: only require when necessary Jun 28, 2013
ShapeData.schema Improve wording of circle draw instruction Apr 18, 2013
json-input-sample.json Use a more complex instruction set in JSON Apr 9, 2013
markup-string-sample.txt Change shell to bash May 11, 2013
package.json Merge package-json-fixes (#20) into master Mar 12, 2015 Merge remote-tracking branch 'origin/tests-fail-with-exit-code' into … Jul 26, 2013

Node Markup


Node Markup is a helper library for kangax's Fabric.js to make it easier to crop images and add markup such as circles and rectangles. Node Markup has frontend (web site) and backend (Node.js) support for rendering identical images on both sides.



  1. Install Node.js

  2. Install Node Markup dependencies

    $ npm install

  3. From the terminal, you can call ImageMarkupCall.js

    $ node ImageMarkupCall.js --json '[json_string]'


TODO: The JSON schema is mostly undocumented, and the frontend works in a very different way from the backend, so the frontend will be more or less trial-and-error for the user (you) until I've finished documenting it.

  • Do not include sourceFile or destinationFile in the frontend JSON. You can add a source image manually to the Fabric.js canvas, or leave it blank.

Long story short:

  1. Include Fabric.js and ImageMarkupBuilder.js in the HTML

  2. Create a <canvas> DOM object in the HTML

  3. Run that <canvas> object through fabric.Canvas

    var fabric = new fabric.Canvas('canvasid');

  4. Run that fabric object trough ImageMarkupBuilder

    var markupBuilder = new ImageMarkupBuilder(fabric);

  5. Send a JSON object (not string) through for processing


You can’t perform that action at this time.