JSFiddle - React, Tailwind, and code Playground

by Vijay Gujar

HTML

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/fabric.js"></script>
<canvas id="c" width="600" height="400"></canvas>

JavaScript

var canvas = new fabric.Canvas('c');
canvas.renderOnAddition = true;
            
var textObject = new fabric.IText("Sample Text\nasdad", {
    left: 250,
    top: 100,
    width: 150,
    height: 100,     
    fontSize:16,    
    fill: '#000000',
    /* direction: 'rtl', */
    textAlign: 'left',
    /* originX: 'right', */
    fontFamily: 'Arial,Notdef'
 }); 
               
function ListStyle (textObject,type,canvas) {
  var styles=['\u25CF','\u25C8','\u25D8','\u25BA','\u25CB','\u25A0','-'];
  var allStyles={'bullet':'\u25CF','diamond':'\u25C8','invertedBullet':'\u25D8','triangularBullet':'\u25BA','disced':'\u25CB','squared':'\u25A0','dashed':'-','none':''};
  var text = textObject.text;
  var textArray = text.split('\n')
  var tempStr = [];
  textArray.forEach((text, i) => {
    if(styles.includes(text.substr(0,1))){
      tempStr.push(text.replace(text.substr(0,1),allStyles[type]));
    }else{
      tempStr.push(allStyles[type]+''+text);
    }
  })
  textObject['text'] = tempStr.join('\n');
  canvas.renderAll();
}

canvas.add(textObject);  
ListStyle(textObject, 'bullet', canvas)