Fabric Brushes

A collection of brushes for fabric.js (version 4 and up).

• Crayon
• Fur
• Ink
• Long Fur
• Marker
• Ribbon
• Shaded
• Sketchy
• Spraypaint
• Squares
• Web

Table of contents

• Demo
• Getting started
• Options
• Browser support
• Real world examples
• Donations
• License

Demo

Click here for a live demo of all brushes included in this fabric.js addon.

Getting started

Installation

This is an addon for fabric.js, so... make sure you load fabric.js before you include this addon.

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/4.4.0/fabric.min.js"></script>
<script src="/path/to/dist/fabric.brushes.min.js"></script>

Usage

Choose the brush you want to use and initialize it:

<canvas id="canvas" width="800" height="600">

const fabricCanvas = new fabric.Canvas('canvas', {
	isDrawingMode: true
});

fabricCanvas.freeDrawingBrush = new fabric.WebBrush(fabricCanvas, {width:1, color:'#000', opacity:1});

⬆ back to top

Options

Here are the options for all types of brushes.

CrayonBrush

fabricCanvas.freeDrawingBrush = new fabric.CrayonBrush(fabricCanvas,
{
	width: 30, // Width of brush
	color: '#000', // Color of brush
	opacity: 0.6 // Opacity of brush
});

FurBrush

fabricCanvas.freeDrawingBrush = new fabric.FurBrush(fabricCanvas,
{
	width: 1, // Width of brush
	color: '#000', // Color of brush
	opacity: 1 // Opacity of brush
});

InkBrush

fabricCanvas.freeDrawingBrush = new fabric.InkBrush(fabricCanvas,
{
	width: 30, // Width of brush
	color: '#000', // Color of brush
	opacity: 1 // Opacity of brush
});

LongfurBrush

fabricCanvas.freeDrawingBrush = new fabric.LongfurBrush(fabricCanvas,
{
	width: 1, // Width of brush
	color: '#000', // Color of brush
	opacity: 1 // Opacity of brush
});

MarkerBrush

fabricCanvas.freeDrawingBrush = new fabric.MarkerBrush(fabricCanvas,
{
	width: 1, // Width of brush
	color: '#000', // Color of brush
	opacity: 1 // Opacity of brush
});

RibbonBrush

fabricCanvas.freeDrawingBrush = new fabric.RibbonBrush(fabricCanvas,
{
	width: 1, // Width of brush
	color: '#000', // Color of brush
	opacity: 1 // Opacity of brush
});

ShadedBrush

fabricCanvas.freeDrawingBrush = new fabric.ShadedBrush(fabricCanvas,
{
	width: 1, // Width of brush
	color: '#000', // Color of brush,
	shadeDistance: 1000, // Shade distance
	opacity: 1 // Opacity of brush
});

SketchyBrush

fabricCanvas.freeDrawingBrush = new fabric.SketchyBrush(fabricCanvas,
{
	width: 1, // Width of brush
	color: '#000', // Color of brush
	opacity: 1 // Opacity of brush
});

SpraypaintBrush

fabricCanvas.freeDrawingBrush = new fabric.SpraypaintBrush(fabricCanvas,
{
	width: 30, // Width of brush
	color: '#000', // Color of brush
	opacity: 1 // Opacity of brush
});

SquaresBrush

fabricCanvas.freeDrawingBrush = new fabric.SquaresBrush(fabricCanvas,
{
	width: 1, // Stroke width of squares
	color: '#000', // Stroke color of squares
	bgColor: '#fff', // Background color of squares
	opacity: 1 // Opacity of brush
});

WebBrush

fabricCanvas.freeDrawingBrush = new fabric.WebBrush(fabricCanvas,
{
	width: 1, // Width of brush
	color: '#000', // Color of brush
	opacity: 1 // Opacity of brush
});

⬆ back to top

Browser support

This addon works on the same browsers as fabric.js does:

• Firefox 4+
• Safari 5+
• Opera 9.64+
• Chrome (all versions)
• Edge (chromium based, all versions)
• IE11 and Edge legacy, supported but deprecated.

⬆ back to top

Real world examples

These brushes for fabric.js are used (among others) on the following websites:

• PosterMaker.com

⬆ back to top

Donations

If you like what I've made here, you can sponsor me with a donation. Thank you so much!

⬆ back to top

License

This plugin is released under the MIT license. It is simple and easy to understand and places almost no restrictions on what you can do with the code. More Information.

The development of this component was funded by Zygomatic.

⬆ back to top