A collection of Brushes for Fabric.js

An addon for fabric.js that extends it with 11 new brushes.
View project on GitHub.

Crayon Brush

<canvas id="canvas" width="800" height="600">
<script>
const fabricCanvas = new fabric.Canvas('canvas', {
	isDrawingMode: true
});

fabricCanvas.freeDrawingBrush = new fabric.CrayonBrush(fabricCanvas, {width:30, color:'#f00', opacity:0.6});
</script>

Fur Brush

<canvas id="canvas" width="800" height="600">
<script>
const fabricCanvas = new fabric.Canvas('canvas', {
	isDrawingMode: true
});

fabricCanvas.freeDrawingBrush = new fabric.FurBrush(fabricCanvas, {width:1, color:'#000', opacity:1});
</script>

Ink Brush

<canvas id="canvas" width="800" height="600">
<script>
const fabricCanvas = new fabric.Canvas('canvas', {
	isDrawingMode: true
});

fabricCanvas.freeDrawingBrush = new fabric.InkBrush(fabricCanvas, {width:30, color:'#00f', opacity:1});
</script>

Long Fur Brush

<canvas id="canvas" width="800" height="600">
<script>
const fabricCanvas = new fabric.Canvas('canvas', {
	isDrawingMode: true
});

fabricCanvas.freeDrawingBrush = new fabric.LongfurBrush(fabricCanvas, {width:1, color:'#000', opacity:1});
</script>

Marker Brush

<canvas id="canvas" width="800" height="600">
<script>
const fabricCanvas = new fabric.Canvas('canvas', {
	isDrawingMode: true
});

fabricCanvas.freeDrawingBrush = new fabric.MarkerBrush(fabricCanvas, {width:30, color:'#ff7f50', opacity:1});
</script>

Ribbon Brush

<canvas id="canvas" width="800" height="600">
<script>
const fabricCanvas = new fabric.Canvas('canvas', {
	isDrawingMode: true
});

fabricCanvas.freeDrawingBrush = new fabric.RibbonBrush(fabricCanvas, {width:1, color:'#cb3232', opacity:1});
</script>

Shaded Brush

<canvas id="canvas" width="800" height="600">
<script>
const fabricCanvas = new fabric.Canvas('canvas', {
	isDrawingMode: true
});

fabricCanvas.freeDrawingBrush = new fabric.ShadedBrush(fabricCanvas, {width:1, color:'#000', opacity:0.1, shadeDistance:1000});
</script>

Sketchy Brush

<canvas id="canvas" width="800" height="600">
<script>
const fabricCanvas = new fabric.Canvas('canvas', {
	isDrawingMode: true
});

fabricCanvas.freeDrawingBrush = new fabric.SketchyBrush(fabricCanvas, {width:1, color:'#000', opacity:1});
</script>

Spraypaint Brush

<canvas id="canvas" width="800" height="600">
<script>
const fabricCanvas = new fabric.Canvas('canvas', {
	isDrawingMode: true
});

fabricCanvas.freeDrawingBrush = new fabric.SpraypaintBrush(fabricCanvas, {width:30, color:'#4598a9', opacity:1});
</script>

Squares Brush

<canvas id="canvas" width="800" height="600">
<script>
const fabricCanvas = new fabric.Canvas('canvas', {
	isDrawingMode: true
});

fabricCanvas.freeDrawingBrush = new fabric.SquaresBrush(fabricCanvas, {width:1, color:'#000', bgColor:'#fff', opacity:1});
</script>

Web Brush

<canvas id="canvas" width="800" height="600">
<script>
const fabricCanvas = new fabric.Canvas('canvas', {
	isDrawingMode: true
});

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