Fabric.js 0.5 is out
Remember that fabulous canvas library that makes working with canvas a breeze? The one that can parse SVG files on the fly and fluently draw them on canvas; that can render complex text in real time; that can morph objects with a touch of a mouse; with sophisticated, programmatically-accessible object model; easy to use animation and event infrastructure?
Why yes, of course I’m talking about Fabric.js ;)
Version 0.5 is out and here’s a quick overview of 3 main changes:
Node.js & NPM support
Fabric can now run on a server, under Node.js, thanks to wonderful jsdom and node-canvas libraries. It’s basically a wrapper on top of node-canvas that’s on top of jsdom that’s on top of node.
Fabric is also registered as NPM package, so can be installed with the usual one-liner:
> npm install fabricHere’s how you would use it:
var fabric = require('fabric').fabric,
canvas = fabric.createCanvasForNode(200, 200);
canvas.add(new fabric.Rect({
top: 100,
left: 100,
width: 100,
height: 50,
angle: 30,
fill: 'rgba(255,0,0,0.5)'
}));
var out = require('fs').createWriteStream(__dirname + '/rectangle.png'),
stream = canvas.createPNGStream();
stream.on('data', function(chunk) {
out.write(chunk);
});
.. and here’s what the resulting image would be — 30° rotated half-transparent, red rectangle.
I’m really excited about Node support in fabric. We’ll be using it in production on Printio.ru shortly.
Custom builder
It’s now possible to create custom fabric build, including only those modules that you need. The build process was rewritten to use Node.js instead of Sprockets. Building can only be done via command line for now. Online interface is likely to come in the future:
> node build.js modules=xxx,yyy,zzz
.. where “xxx”, “yyy”, and “zzz” are the names of the modules. Currently available modules are “text”, “serialization”, “parser”, and “node”. By default none of these modules are included. If you wish to include all of the modules, you can use “ALL” keyword:
> node build.js modules=ALL
Smaller footprint
By moving some of the functionality into optional modules (e.g. “parser” and “serialization”), default minimalistic version of fabric is now ~76KB (~22KB gzipped). There’s still more reduction that can be done, so expect even smaller footprint in the near future.
Enjoy.
Krishanthan said on May 21, 2012 @ 20:54
#3I am very new to fabric.js. I have downloaded the fabric.js. But I don’t know how to start it. For example :
var canvas = new fabric.Canvas(‘c1′);
canvas.add(new fabric.Circle({ radius: 30, fill: ‘#f55′, top: 100, left: 100 }));
canvas.selectionColor = ‘rgba(0,255,0,0.3)’;
canvas.selectionBorderColor = ‘red’;
canvas.selectionLineWidth = 5;
In this script I supposed to see a circle. I followed this : http://fabricjs.com/customization/ . But why I couldn’t see anything; what I am missing.?? . Here my testing link: http://imageedit.netai.net/editor/test.html
thanks.
PP said on May 27, 2012 @ 4:10
#4Beautiful framework, just pure interest, is it possible to have input fields inside the circle or triangle ?
kangax (article author) said on May 27, 2012 @ 7:00
#5@PP
No, we can’t render DOM elements on canvas. You can render fabric objects resembling input fields but then you’d also need to implement all the behavior.
Amr Abosree said on Sep 7, 2012 @ 2:53
#6@kangax ,PP
But I think Canvas can be used in the background below the actual DOM elements with position absolute and lower z-index making it look like its inside.
Internet Marketing said on Oct 14, 2012 @ 6:25
#7Way cool! Some very valid points! I appreciate you penning this
write-up and also the rest of the site is very good.
sukumar said on Nov 20, 2012 @ 1:23
#8Hi Krishanthan,
Example given will below give brief idea how to use fabric.js.
Text Rendering Example
var canvas = new fabric.Canvas(‘canvas’);
var textObj = new fabric.Text(‘Mobisoft Infotech!’, {
//fontFamily: ‘Delicious_500′,
left: 400,
top: 225,
fontSize: 80,
textAlign: “left”,
fill:”#3E87BD” // Set text color to red
});
canvas.add(textObj);
sukumar said on Nov 20, 2012 @ 1:24
#9add this html
/*
Text Rendering Example
*/
Jen said on Apr 14, 2013 @ 21:41
#10I tried to use npm to install fabric, but got this:
Your environment has been set up for using Node.js 0.10.4 (ia32) and npm.
C:\Users\user> npm -v
1.2.18
C:\Users\user> npm install fabric
npm http GET https://registry.npmjs.org/fabric
npm http 200 https://registry.npmjs.org/fabric
npm http GET https://registry.npmjs.org/fabric/-/fabric-1.1.6.tgz
npm http 200 https://registry.npmjs.org/fabric/-/fabric-1.1.6.tgz
npm http GET https://registry.npmjs.org/canvas
npm http GET https://registry.npmjs.org/jsdom
npm http GET https://registry.npmjs.org/xmldom
npm http 200 https://registry.npmjs.org/xmldom
npm http GET https://registry.npmjs.org/xmldom/-/xmldom-0.1.15.tgz
npm http 200 https://registry.npmjs.org/canvas
npm http GET https://registry.npmjs.org/canvas/-/canvas-1.0.2.tgz
npm http 200 https://registry.npmjs.org/jsdom
npm http GET https://registry.npmjs.org/jsdom/-/jsdom-0.5.6.tgz
npm http 200 https://registry.npmjs.org/xmldom/-/xmldom-0.1.15.tgz
npm http 200 https://registry.npmjs.org/canvas/-/canvas-1.0.2.tgz
npm http 200 https://registry.npmjs.org/jsdom/-/jsdom-0.5.6.tgz
> canvas@1.0.2 install C:\Users\user\node_modules\fabric\node_modules\canvas
> node-gyp rebuild
C:\Users\user\node_modules\fabric\node_modules\canvas>node “C:\Program Files (x8
6)\nodejs\node_modules\npm\bin\node-gyp-bin\\..\..\node_modules\node-gyp\bin\nod
e-gyp.js” rebuild
npm http GET https://registry.npmjs.org/htmlparser
npm http GET https://registry.npmjs.org/nwmatcher
npm http GET https://registry.npmjs.org/request
npm http GET https://registry.npmjs.org/cssom
npm http GET https://registry.npmjs.org/cssstyle
npm http GET https://registry.npmjs.org/contextify
npm http 200 https://registry.npmjs.org/cssom
npm http GET https://registry.npmjs.org/cssom/-/cssom-0.2.5.tgz
npm http 200 https://registry.npmjs.org/nwmatcher
npm http GET https://registry.npmjs.org/nwmatcher/-/nwmatcher-1.3.1.tgz
npm http 200 https://registry.npmjs.org/cssstyle
npm http GET https://registry.npmjs.org/cssstyle/-/cssstyle-0.2.3.tgz
npm http 200 https://registry.npmjs.org/htmlparser
npm http GET https://registry.npmjs.org/htmlparser/-/htmlparser-1.7.6.tgz
npm http 200 https://registry.npmjs.org/contextify
npm http GET https://registry.npmjs.org/contextify/-/contextify-0.1.5.tgz
gyp http GET http://nodejs.org/dist/v0.10.4/node-v0.10.4.tar.gz
gyp http 200 http://nodejs.org/dist/v0.10.4/node-v0.10.4.tar.gz
npm http 200 https://registry.npmjs.org/request
npm http GET https://registry.npmjs.org/request/-/request-2.16.6.tgz
npm http 200 https://registry.npmjs.org/nwmatcher/-/nwmatcher-1.3.1.tgz
npm http 200 https://registry.npmjs.org/cssom/-/cssom-0.2.5.tgz
npm http 200 https://registry.npmjs.org/cssstyle/-/cssstyle-0.2.3.tgz
npm http 200 https://registry.npmjs.org/htmlparser/-/htmlparser-1.7.6.tgz
npm http 200 https://registry.npmjs.org/request/-/request-2.16.6.tgz
npm WARN package.json nwmatcher@1.3.1 No README.md file found!
npm http 200 https://registry.npmjs.org/contextify/-/contextify-0.1.5.tgz
npm http GET https://registry.npmjs.org/bindings
npm http GET https://registry.npmjs.org/form-data
npm http GET https://registry.npmjs.org/mime
npm http GET https://registry.npmjs.org/hawk
npm http GET https://registry.npmjs.org/node-uuid
npm http GET https://registry.npmjs.org/cookie-jar
npm http GET https://registry.npmjs.org/aws-sign
npm http GET https://registry.npmjs.org/oauth-sign
npm http GET https://registry.npmjs.org/forever-agent
npm http GET https://registry.npmjs.org/tunnel-agent
npm http GET https://registry.npmjs.org/json-stringify-safe
npm http GET https://registry.npmjs.org/qs
npm http 200 https://registry.npmjs.org/bindings
npm http 200 https://registry.npmjs.org/node-uuid
npm http 200 https://registry.npmjs.org/mime
npm http GET https://registry.npmjs.org/bindings/-/bindings-1.1.0.tgz
npm http GET https://registry.npmjs.org/mime/-/mime-1.2.9.tgz
npm http GET https://registry.npmjs.org/node-uuid/-/node-uuid-1.4.0.tgz
npm http 200 https://registry.npmjs.org/form-data
npm http GET https://registry.npmjs.org/form-data/-/form-data-0.0.7.tgz
npm http 200 https://registry.npmjs.org/cookie-jar
npm http GET https://registry.npmjs.org/cookie-jar/-/cookie-jar-0.2.0.tgz
npm http 200 https://registry.npmjs.org/aws-sign
npm http GET https://registry.npmjs.org/aws-sign/-/aws-sign-0.2.0.tgz
npm http 200 https://registry.npmjs.org/oauth-sign
npm http GET https://registry.npmjs.org/oauth-sign/-/oauth-sign-0.2.0.tgz
npm http 200 https://registry.npmjs.org/forever-agent
npm http GET https://registry.npmjs.org/forever-agent/-/forever-agent-0.2.0.tgz
npm http 200 https://registry.npmjs.org/tunnel-agent
npm http GET https://registry.npmjs.org/tunnel-agent/-/tunnel-agent-0.2.0.tgz
npm http 200 https://registry.npmjs.org/json-stringify-safe
npm http GET https://registry.npmjs.org/json-stringify-safe/-/json-stringify-saf
e-3.0.0.tgz
npm http 200 https://registry.npmjs.org/qs
npm http GET https://registry.npmjs.org/qs/-/qs-0.5.6.tgz
npm http 200 https://registry.npmjs.org/bindings/-/bindings-1.1.0.tgz
npm http 200 https://registry.npmjs.org/node-uuid/-/node-uuid-1.4.0.tgz
npm http 200 https://registry.npmjs.org/mime/-/mime-1.2.9.tgz
npm http 200 https://registry.npmjs.org/form-data/-/form-data-0.0.7.tgz
npm http 200 https://registry.npmjs.org/cookie-jar/-/cookie-jar-0.2.0.tgz
> contextify@0.1.5 install C:\Users\user\node_modules\fabric\node_modules\jsdom\
node_modules\contextify
> node-gyp rebuild
C:\Users\user\node_modules\fabric\node_modules\jsdom\node_modules\contextify>nod
e “C:\Program Files (x86)\nodejs\node_modules\npm\bin\node-gyp-bin\\..\..\node_m
odules\node-gyp\bin\node-gyp.js” rebuild
npm http 200 https://registry.npmjs.org/aws-sign/-/aws-sign-0.2.0.tgz
npm http 200 https://registry.npmjs.org/oauth-sign/-/oauth-sign-0.2.0.tgz
npm http 200 https://registry.npmjs.org/hawk
npm http 200 https://registry.npmjs.org/forever-agent/-/forever-agent-0.2.0.tgz
npm WARN package.json cookie-jar@0.2.0 No README.md file found!
npm http GET https://registry.npmjs.org/hawk/-/hawk-0.10.2.tgz
npm http 200 https://registry.npmjs.org/tunnel-agent/-/tunnel-agent-0.2.0.tgz
npm http 200 https://registry.npmjs.org/json-stringify-safe/-/json-stringify-saf
e-3.0.0.tgz
npm http 200 https://registry.npmjs.org/qs/-/qs-0.5.6.tgz
npm http 200 https://registry.npmjs.org/hawk/-/hawk-0.10.2.tgz
npm WARN package.json forever-agent@0.2.0 No README.md file found!
npm WARN package.json aws-sign@0.2.0 No README.md file found!
npm WARN package.json tunnel-agent@0.2.0 No README.md file found!
npm WARN package.json oauth-sign@0.2.0 No README.md file found!
gyp http GET http://nodejs.org/dist/v0.10.4/node-v0.10.4.tar.gz
gyp http 200 http://nodejs.org/dist/v0.10.4/node-v0.10.4.tar.gz
npm WARN engine hawk@0.10.2: wanted: {“node”:”0.8.x”} (current: {“node”:”v0.10.4
“,”npm”:”1.2.18″})
npm http GET https://registry.npmjs.org/combined-stream
npm http GET https://registry.npmjs.org/async
npm http GET https://registry.npmjs.org/boom
npm http GET https://registry.npmjs.org/hoek
npm http GET https://registry.npmjs.org/cryptiles
npm http GET https://registry.npmjs.org/sntp
npm http 200 https://registry.npmjs.org/combined-stream
npm http 200 https://registry.npmjs.org/cryptiles
npm http 200 https://registry.npmjs.org/boom
npm http GET https://registry.npmjs.org/boom/-/boom-0.3.8.tgz
npm http GET https://registry.npmjs.org/cryptiles/-/cryptiles-0.1.3.tgz
npm http GET https://registry.npmjs.org/combined-stream/-/combined-stream-0.0.4.
tgz
npm http 200 https://registry.npmjs.org/sntp
npm http GET https://registry.npmjs.org/sntp/-/sntp-0.1.4.tgz
npm http 200 https://registry.npmjs.org/hoek
npm http GET https://registry.npmjs.org/hoek/-/hoek-0.7.6.tgz
npm http 200 https://registry.npmjs.org/cryptiles/-/cryptiles-0.1.3.tgz
npm http 200 https://registry.npmjs.org/boom/-/boom-0.3.8.tgz
npm http 200 https://registry.npmjs.org/combined-stream/-/combined-stream-0.0.4.
tgz
npm http 200 https://registry.npmjs.org/async
npm http 200 https://registry.npmjs.org/sntp/-/sntp-0.1.4.tgz
npm http GET https://registry.npmjs.org/async/-/async-0.1.22.tgz
npm http 200 https://registry.npmjs.org/hoek/-/hoek-0.7.6.tgz
npm http 200 https://registry.npmjs.org/async/-/async-0.1.22.tgz
npm WARN engine cryptiles@0.1.3: wanted: {“node”:”0.8.x”} (current: {“node”:”v0.
10.4″,”npm”:”1.2.18″})
npm WARN engine sntp@0.1.4: wanted: {“node”:”0.8.x”} (current: {“node”:”v0.10.4″
,”npm”:”1.2.18″})
npm WARN engine boom@0.3.8: wanted: {“node”:”0.8.x”} (current: {“node”:”v0.10.4″
,”npm”:”1.2.18″})
npm WARN engine hoek@0.7.6: wanted: {“node”:”0.8.x”} (current: {“node”:”v0.10.4″
,”npm”:”1.2.18″})
npm http GET https://registry.npmjs.org/delayed-stream/0.0.5
npm http 200 https://registry.npmjs.org/delayed-stream/0.0.5
npm http GET https://registry.npmjs.org/delayed-stream/-/delayed-stream-0.0.5.tg
z
npm http 200 https://registry.npmjs.org/delayed-stream/-/delayed-stream-0.0.5.tg
z
gyp ERR! UNCAUGHT EXCEPTION
gyp ERR! stack Error: UNKNOWN, open ‘C:\Users\user\.node-gyp.10.4\deps\openssl
\openssl\crypto\seed\seed.h’
gyp ERR! System Windows_NT 6.1.7601
gyp ERR! command “node” “C:\\Program Files (x86)\\nodejs\\node_modules\\npm\\nod
e_modules\\node-gyp\\bin\\node-gyp.js” “rebuild”
gyp ERR! cwd C:\Users\user\node_modules\fabric\node_modules\canvas
gyp ERR! node -v v0.10.4
gyp ERR! node-gyp -v v0.9.5
gyp ERR! This is a bug in `node-gyp`.
gyp ERR! Please file an Issue:
gyp ERR!
gyp http GET http://nodejs.org/dist/v0.10.4/node.lib
gyp http GET http://nodejs.org/dist/v0.10.4/node.lib
gyp http GET http://nodejs.org/dist/v0.10.4/x64/node.lib
gyp http GET http://nodejs.org/dist/v0.10.4/x64/node.lib
gyp http 200 http://nodejs.org/dist/v0.10.4/node.lib
gyp http 200 http://nodejs.org/dist/v0.10.4/node.lib
gyp http 200 http://nodejs.org/dist/v0.10.4/x64/node.lib
gyp http 200 http://nodejs.org/dist/v0.10.4/x64/node.lib
contextify.cc
c:\Program Files (x86)\Microsoft Visual Studio 10.0\VC\include\xlocale(323): wa
rning C4530: C++ exception handler used, but unwind semantics are not enabled.
Specify /EHsc [C:\Users\user\node_modules\fabric\node_modules\jsdom\node_module
s\contextify\build\contextify.vcxproj]
C:\Users\user\.node-gyp.10.4\deps\v8\include\v8.h(184): warning C4506: no def
inition for inline function ‘v8::Persistent v8::Persistent::New(v8::Handl
e)’ [C:\Users\user\node_modules\fabric\node_modules\jsdom\node_modules\conte
xtify\build\contextify.vcxproj]
with
[
T=v8::Object
]
C:\Users\user\.node-gyp.10.4\deps\v8\include\v8.h(184): warning C4506: no def
inition for inline function ‘v8::Persistent v8::Persistent::New(v8::Handl
e)’ [C:\Users\user\node_modules\fabric\node_modules\jsdom\node_modules\conte
xtify\build\contextify.vcxproj]
with
[
T=v8::FunctionTemplate
]
Creating library C:\Users\user\node_modules\fabric\node_modules\jsdom\node
_modules\contextify\build\Release\contextify.lib and object C:\Users\user\nod
e_modules\fabric\node_modules\jsdom\node_modules\contextify\build\Release\con
textify.exp
Generating code
Finished generating code
contextify.vcxproj -> C:\Users\user\node_modules\fabric\node_modules\jsdom\no
de_modules\contextify\build\Release\\contextify.node
npm ERR! canvas@1.0.2 install: `node-gyp rebuild`
npm ERR! `cmd “/c” “node-gyp rebuild”` failed with 7
npm ERR!
npm ERR! Failed at the canvas@1.0.2 install script.
npm ERR! This is most likely a problem with the canvas package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR! node-gyp rebuild
npm ERR! You can get their info via:
npm ERR! npm owner ls canvas
npm ERR! There is likely additional logging output above.
npm ERR! System Windows_NT 6.1.7601
npm ERR! command “C:\\Program Files (x86)\\nodejs\\\\node.exe” “C:\\Program File
s (x86)\\nodejs\\node_modules\\npm\\bin\\npm-cli.js” “install” “fabric”
npm ERR! cwd C:\Users\user
npm ERR! node -v v0.10.4
npm ERR! npm -v 1.2.18
npm ERR! code ELIFECYCLE
npm ERR!
npm ERR! Additional logging details can be found in:
npm ERR! C:\Users\user\npm-debug.log
npm ERR! not ok code 0
C:\Users\user>