FabricJS made canvas drawing easy as pie

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.
Let's take a simple example to draw a rectangle, rotated at 45 degrees.

By using native canvas API.

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.

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

Drawing with Fabric is self-explanatory, isn't it! Whereas in canvas example, someone probably wonder what is getContext for, what is translate doing? why extra overhead to convert a value from degree to radian?

Fabric abstracts much more complex canvas operations and in addition, it exposes rich observing events and object events which makes integration and customization extremely smooth.

I have made one sample using path:created observing event and freeDrawingBrush 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. For the sake of simplicity, I have removed different types of drawing modes and added mirror drawing canvas.

https://codepen.io/priyankatgit/pen/RwpddJr

Credits:

Cover photo: @kellysikkema
Rectangle draw example taken from fabric.