Object model for HTML5 canvas, and SVG-to-canvas parser. Backed by jsdom and node-canvas.
Fabric.js is a framework that makes it easy to work with HTML5 canvas element. It is an interactive object model on top of canvas element. It is also an SVG-to-canvas parser.
Using Fabric.js, you can create and populate objects on canvas; objects like simple geometrical shapes — rectangles, circles, ellipses, polygons, or more complex shapes consisting of hundreds or thousands of simple paths. You can then scale, move, and rotate these objects with the mouse; modify their properties — color, transparency, z-index, etc. You can also manipulate these objects altogether — grouping them with a simple mouse selection.
Contributions are very much welcome!
Note: to properly make old IE work, you will need to add html5shiv as a conditional comment in your HEAD, particularly
html5shiv-printshiv.js to allow for children elements:
<!--[if lt IE 9]><script src="path/to/your/html5shiv-printshiv.js"></script><![endif]-->
Remember to add Explorer Canvas as well.
You can run automated unit tests right in the browser.
$ bower install fabric
Build distribution file [~77K minified, ~20K gzipped]
$ node build.js
2.1 Or build a custom distribution file, by passing (comma separated) module names to be included.
$ node build.js modules=text,serialization,parser // or $ node build.js modules=text // or $ node build.js modules=parser,text // etc.
By default (when none of the modules are specified) only basic functionality is included. See the list of modules below for more information on each one of them. Note that default distribution has support for static canvases only.
To get minimal distribution with interactivity, make sure to include corresponding module:
$ node build.js modules=interaction
2.2 You can also include all modules like so:
$ node build.js modules=ALL
2.3 You can exclude a few modules like so:
$ node build.js modules=ALL exclude=gestures,image_filters
Create a minified distribution file
# Using YUICompressor (default option) $ node build.js modules=... minifier=yui # or Google Closure Compiler $ node build.js modules=... minifier=closure
Enable AMD support via require.js (requires uglify)
$ node build.js requirejs modules=...
Create source map file for better productive debugging (requires uglify or google closure compiler).
More information about source maps.
$ node build.js sourcemap modules=...
If you use google closure compiler you have to add
sourceMappingURL manually at the end of the minified file all.min.js (see issue https://code.google.com/p/closure-compiler/issues/detail?id=941).
Lint source code (prerequisite:
npm -g install jshint)
$ jshint src
Ensure code guidelines are met (prerequisite:
npm -g install jscs)
$ jscs src
Install NPM packages
$ npm install
Run test suite
$ npm test
Documentation is always available at http://fabricjs.com/docs/.
These are the optional modules that could be specified for inclusion, when building custom version of fabric:
Additional flags for build script are:
dist/fabric.js. Note: an unminified, requirejs-compatible version is always created in
sourceMappingURL(only if uglifyjs is used) to
node build.js modules=ALL exclude=json no-strict no-svg-export
Questions, suggestions — fabric.js on Google Groups.
Fabric on LibKnot.
Get help in Fabric's IRC channel — irc://irc.freenode.net/#fabric.js
Copyright (c) 2008-2015 Printio (Juriy Zaytsev, Maxim Chernyak)
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.