# FabricJS made canvas drawing easy as pie

If you ever thought to take a hand at Canvas drawing and hesitate to it because geometry is not your subject, you should first start with FabricJS.

Canvas native API could be confusing if you just have started on it.<br/>
Let's take a simple example to draw a rectangle, rotated at 45 degrees.

By using native canvas API.
```javascript
var canvasEl = document.getElementById('c');
var context = canvasEl.getContext('2d');
context.fillStyle = 'red';

context.translate(100, 100);
context.rotate(Math.PI / 180 * 45); //Converts value in radian
context.fillRect(-10, -10, 20, 20);
```

Same thing but by using Febirc.
```javascript
var canvas = new fabric.Canvas('c');

// create a rectangle with angle=45
var rect = new fabric.Rect({
  left: 100,
  top: 100,
  fill: 'red',
  width: 20,
  height: 20,
  angle: 45
});

canvas.add(rect);
```
![Canvas - Rectangle](https://cdn.hashnode.com/res/hashnode/image/upload/v1624070677824/0uM2WT9XX.png)

Drawing with Fabric is self-explanatory, isn't it! Whereas in canvas example, someone probably wonder what is [getContext](https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/getContext) for, what is [translate](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/translate) doing? why extra overhead to convert a value from degree to radian?

[Fabric](http://fabricjs.com/fabric-intro-part-1) abstracts much more complex canvas operations and in addition, it exposes rich [observing events and object events](http://fabricjs.com/events) which makes integration and customization extremely smooth.

I have made one sample using `path:created` observing event and [`freeDrawingBrush` ](http://fabricjs.com/fabric-intro-part-4) API. This event triggers each time when path drawing ends and *** provides full detail of the drawn path***. Using that data, the same path is automatically drawn right beside the canvas on another canvas(Mirror Canvas).

The full sample was originally posted at [http://fabricjs.com/freedrawing](http://fabricjs.com/freedrawing). For the sake of simplicity, I have removed different types of drawing modes and added mirror drawing canvas.

%[https://codepen.io/priyankatgit/pen/RwpddJr]


<br /><br />
Credits:
- Cover photo: [@kellysikkema](https://unsplash.com/@kellysikkema)
- Rectangle draw example taken from [fabric](http://fabricjs.com/fabric-intro-part-1#why_fabric).