av01d
commented
2 years ago I cannot reproduce your error. Here's code that works:
<!doctype html>
<html>
<head>
<title>Fabric Brushes Demo</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/521/fabric.min.js"></script>
<script src="dist/fabric.brushes.js"></script>
<style>
body {
background-color: #fff;
color: #000;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
font-size: 16px;
}
.canvas-container {
background-image: url(data:image/gif;base64,R0lGODlhCgAKAIAAAOLi4v///yH5BAAHAP8ALAAAAAAKAAoAAAIRhB2ZhxoM3GMSykqd1VltzxQAOw==);
outline: 1px solid #ccc;
}
</style>
</head>
<body>
<div class="canvas-wrap">
<canvas id="test-canvas" width="800" height="600"></canvas>
</div>
<button id="pencilBtn">Pencil brush</button>
<button id="crayonBtn">Crayon brush</button>
<button id="stopBtn">Stop drawing</button>
<script>
const fabricCanvas = new fabric.Canvas('test-canvas');
document.getElementById('pencilBtn').onclick = () => {
fabricCanvas.isDrawingMode = true;
fabricCanvas.freeDrawingBrush = new fabric['PencilBrush'](fabricCanvas, {});
}
document.getElementById('crayonBtn').onclick = () => {
fabricCanvas.isDrawingMode = true;
fabricCanvas.freeDrawingBrush = new fabric['CrayonBrush'](fabricCanvas, {color:'red'});
}
document.getElementById('stopBtn').onclick = () => {
fabricCanvas.isDrawingMode = false;
}
</script>
</body>
</html>
Hi, I have integrated fabric brushes in my project and i am working with Crayon brush and is working normally but, when i try to select pencil brush from fabric.js, crayon brush is clearing from canvas.
Help is greatly appreciated.
Thanks