fabric.js setSelectionStyles issue
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.9/fabric.min.js"></script>
<canvas id="my-canvas"></canvas>
<button id="fill-color">SET FILL COLOR</button>
<button id="selection-color">SET SELECTION COLOR</button>
<button id="selection-font">SET FONT</button>
<div id="log"></div>
CSS
#log {
margin-top: 10px;
color: red;
}
JavaScript
const el = document.getElementById('my-canvas');
const fillColor = document.getElementById('fill-color');
const selectionColor = document.getElementById('selection-color');
const log = document.getElementById('log');
// Init the Canvas via fabricJS
const canvas = new fabric.Canvas(el, {
backgroundColor: '#fff',
enableRetinaScaling: true,
preserveObjectStacking: true,
controlsAboveOverlay: false,
selectionCompatibility: true,
width: 500,
height: 500
}).renderAll();
const text = new fabric.Textbox('Double click me to edit!',{
left: canvas.width / 2,
top: canvas.height / 2,
originX: 'center',
originY: 'center',
width: 200,
fontSize: 30,
strokeWidth: 0,
fill: '#333333',
textAlign: 'center',
charSpacing: 0,
objType: 'text'
});
canvas.add(text).renderAll();
const text1= new fabric.Textbox('Doublegvfgvfvgvf bgvf',{
left: canvas.width / 3,
top: canvas.height / 3,
originX: 'center',
originY: 'center',
width: 200,
fontSize: 30,
strokeWidth: 0,
fill: '#333333',
textAlign: 'center',
charSpacing: 0,
objType: 'text'
});
canvas.add(text1).renderAll();
const setFillColor = (color) => {
const textLayer = canvas.getObjects()[0];
textLayer.set({fill:'red'});
const textLayer1 = canvas.getObjects()[1];
textLayer1.set({fill:'red'});
log.innerHTML = '';
canvas.renderAll();
}
const setSelectionColor = (color) => {
const textLayer = canvas.getObjects()[0];
const textLayer1 = canvas.getObjects()[1];
if(textLayer.isEditing) {
textLayer.setSelectionStyles({fill: 'blue'});
textLayer1.setSelectionStyles({fill: 'blue'});
log.innerHTML = '';
} else {
log.innerHTML = 'please select a word!';
}
canvas.renderAll();
}
fillColor.addEventListener('click', setFillColor);
selectionColor.addEventListener('click', setSelectionColor);