Getting started with fabricjs
Remarks#
fabric.js is a powerful and quite simple javascript library for HTML5 canvas. It provide a interactive platform to work with the HTML5 canvas. Using fabric you can create object/shapes on canvas from simple geometrical shapes to complex shapes. You can even work with images using fabric.js. fabric.js also supports animations. It provides controls to work with images like dragging them, scaling them rotating them. It allows grouping of shapes/objects that can be manipulated together. it supports events not only limited to the canvas element but with objects as well. It even provide with functionlaity to serialize the canvas to SVG or JSON and reuse it as and when needed. It even supports running fabric under Node.js, with help of jsdom and node-canvas libraries.
Installation or Setup
Fabric.js is just like any other JS library just specific to canvas. Easy to setup and get started. All you need to do is download the fabric.js from HERE and include it in your project just like any other JS library for example the way you do it for jQuery. Then create the html file suppose index.html like:
<head>
<script src="fabric.js"></script>
</head>
<body>
<canvas id="canvas" width="400" height="400" style="border:2px solid #000000</canvas>
<script>
var canvas = new fabric.Canvas('canvas');
canvas.add(new fabric.Circle({ radius: 30, fill: '#f55', top: 100, left: 100 }));
</script>
</body>the src attribute in the script is referring to a file fabric.js kept in the same folder you can keep it in some other folder and give a relative path. And you are good to go. For more about Fabric visit Offcial Page. Here is a very basic Demo
Hello World
<canvas id="c" width="400" height="400"></canvas>
var canvas = new fabric.Canvas("c");
var text = new fabric.Textbox('Hello world From Fabric JS', {
width:250,
cursorColor :"blue",
top:10,
left:10
});
canvas.add(text)The example creates a text 'Hello world From Fabric JS' using fabricjs. Demo