How do I make a or bullet in fabric.Text()?

Question

I am looking for an example application that takes user input and inserts it into a inside canvas with fabric.js. Is this possible? I haven't been able to find a lists in fabric.js example.

Answer 1

canvas.fillText does not accept HTML markup. A Canvas is a bitmap, it has nothing to do with HTML markup. You can control font style as described here.

There are libraries that convert XML markup into canvas.fillText calls, maybe you could adapt one.

Answer 2

I realized a better way to solve this issue was to draw a circle at the same height as the text, at radius 2, to emulate a bullet point. for anybody interested its easy as:

var EDU1 = new fabric.IText("SOME TEXT GOES HERE", {fontSize: 20, fontStyle:                        
'italic',fontFamily: 'Hoefler Text', left: 149, top: 390});

var bullet = new fabric.Circle({
radius: 2, fill: 'black', left: 135, top: 400
});

then group them together and you have a bullet point.

Answer 3

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();
}

ListStyle (canvas.getObjects()[0],'diamond',canvas);