Textbox Render ovverride

FabricJS

by Eugene Vilder

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.2.2/fabric.min.js"></script>
<canvas id="paper" width="400" height="400" style="border:1px solid #ccc"></canvas>

JavaScript

const canvas = new fabric.Canvas('paper', {
  preserveObjectStacking: true,
  enableRetinaScaling: false,
  imageSmoothingEnabled: false
});
canvas.setHeight(500);
canvas.setWidth(700);


const paragraphOne = new fabric.Textbox('This is the first paragraph text aligned left.\nThis is the second paragraph text aligned right.', {
  left: 10,
  width: 500,
  top: 10
});

canvas.add(paragraphOne);

/* paragraphOne.set({
  isEditing: true,
  selectionStart: 0,
  selectionEnd: 1
}); */
 
const styles = [{},{},{},{
  fill: 'red'
}];

for (let i=0; i<paragraphOne.text.length; i++) {
paragraphOne.setSelectionStyles(styles[i], i, i+1);
}




canvas.renderAll();