Fabric JS and React, an Unholy Union

Hello everyone! It's been a while since I posted on this blog. How are you doing? Who are you? Why am I asking questions? Anyways, it has been an eventful couple of weeks for me. Somehow, I made it to the last leg of my coding boot camp, and I have about five weeks until I finish and move forward to the job hunt phase. It's very exciting, but also very nerve wracking! One of the things I have been working on these past few weeks is creating an app from scratch with a team in y school. We settled on creating a social media app that allows users to upload photos and let them and their friends draw on the photo and post their creations (appropriately named Doodle Society).

I was tasked with creating the actual page that allows you to doodle on your friends pictures, and I had my work cut out for me. We decided to use Fabric JS because Fabric has so much more than just free drawing, and we thought it would be nice to possible insert more features into the drawing page. There's was just one problem: I couldn't find anything about using Fabric with React! So maybe this article will help some poor soul who decides to do something similar to what I did.

So the first thing you'll need to do is import fabric, this can be done by running the command below, and destructure fabric just to make things easier.

Now that you have access to fabric and all its wonderful features, let's get started on creating a canvas. For the app I made with my team we set up our canvas so that you were drawing on a picture that was selected, but for this example we'll just create a basic white canvas.

If you're using Hooks (which I recommend you do) you can put your canvas in useEffect, but if you're using React JS you should be able to do it in componentDidMount, but don't quote me on that! Let me show you my example and then I'll try to break it down.

The first and most important thing that needs to be done is our canvas needs to be created! This is being done of the second line with new fabric.Canvas. This takes two arguments a string that you can name the canvas, and an object that will let you give the canvas different attributes. The most important attribute it isDrawingMode which needs to be set to a boolean, this allows you to actually draw on the canvas. You can also assign other keys like height and width to the canvas.

The first and most important thing that needs to be done is our canvas needs to be created! This is being done of the second line with new fabric.Canvas. This takes two arguments a string that you can name the canvas, and an object that will let you give the canvas different attributes. The most important attribute it isDrawingMode which needs to be set to a boolean, this allows you to actually draw on the canvas. You can also assign other keys like height and width to the canvas.

What's so great about fabric is that the canvas has tons of different methods that you can use to create different patterns, shapes and further customize your canvas. For example, canvas.freeDrawingBrush has many different methods that let you customize your brush's width, color, and many other options. Here's an example of just one of the many ways you can utilize fabric canvas.