An addon for fabric.js that extends it with 11 new brushes.
View project on GitHub.
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>