I have some code that allows me to toggle between text objects. I'd like to have the text objects include some styling, like Bold, Italic, etc for titles and such. text, however, am not sure how to acplish this. Here's my current code:

var canvas = this.__canvas = new fabric.Canvas('c');
 canvas.setHeight(300);
 canvas.setWidth(500);
  
 function textOne() {
   canvas.clear();
   canvas.add(new fabric.IText('Regular Font', {
     left: 50,
     top: 100,
     fontFamily: 'arial',
     fill: '#333',
     fontSize: 50
   }));
 }
 
  function textTwo() {
   canvas.clear();
   canvas.add(new fabric.IText('Bold Font', {
     left: 50,
     top: 100,
     fontFamily: 'arial',
     fontWeight: 'bold',
     fill: '#333',
     fontSize: 50
   }));
 }

canvas {
  border: 1px solid #dddddd;
  border-radius: 3px;
  margin-top: 5px;
}

  <script src=".js/1.7.20/fabric.min.js"></script>
<button onclick="textOne()">One</button>
<button onclick="textTwo()">Two</button>
<canvas id="c"></canvas>

I have some code that allows me to toggle between text objects. I'd like to have the text objects include some styling, like Bold, Italic, etc for titles and such. text, however, am not sure how to acplish this. Here's my current code:

var canvas = this.__canvas = new fabric.Canvas('c');
 canvas.setHeight(300);
 canvas.setWidth(500);
  
 function textOne() {
   canvas.clear();
   canvas.add(new fabric.IText('Regular Font', {
     left: 50,
     top: 100,
     fontFamily: 'arial',
     fill: '#333',
     fontSize: 50
   }));
 }
 
  function textTwo() {
   canvas.clear();
   canvas.add(new fabric.IText('Bold Font', {
     left: 50,
     top: 100,
     fontFamily: 'arial',
     fontWeight: 'bold',
     fill: '#333',
     fontSize: 50
   }));
 }

canvas {
  border: 1px solid #dddddd;
  border-radius: 3px;
  margin-top: 5px;
}

  <script src="https://cdnjs.cloudflare./ajax/libs/fabric.js/1.7.20/fabric.min.js"></script>
<button onclick="textOne()">One</button>
<button onclick="textTwo()">Two</button>
<canvas id="c"></canvas>

• javascript
• html
• css
• fabricjs

Share Improve this question Follow asked Dec 11, 2017 at 15:43 anonymooseanonymoose 1,24344 gold badges2525 silver badges6464 bronze badges 1

• Possible duplicate of How to edit a FabricJS IText and apply new styles (e.g. highlighting, etc...) – Durga Commented Dec 12, 2017 at 5:56

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 7

You can use the styles property to style individual characters

http://fabricjs./docs/fabric.IText.html#styles

var canvas = this.__canvas = new fabric.Canvas('c');
 canvas.setHeight(300);
 canvas.setWidth(500);
  
 function textOne() {
   canvas.clear();
   canvas.add(new fabric.IText('Regular Font', {
     left: 50,
     top: 100,
     fontFamily: 'arial',
     fill: '#333',
     fontSize: 50,
     styles:{
     0:{
      0:{fontWeight: 'bold'},
      1:{fontWeight: 'bold'}
     }
     }
   }));
 }
 
  function textTwo() {
   canvas.clear();
   canvas.add(new fabric.IText('Bold Font', {
     left: 50,
     top: 100,
     fontFamily: 'arial',
     fontWeight: 'bold',
     fill: '#333',
     fontSize: 50,
     styles:{
     0:{
      0:{fontSize: 40},
      1:{fontSize: 30}
     }
     }
   }));
 }

canvas {
  border: 1px solid #dddddd;
  border-radius: 3px;
  margin-top: 5px;
}

<script src="https://cdnjs.cloudflare./ajax/libs/fabric.js/1.7.20/fabric.min.js"></script>
<button onclick="textOne()">One</button>
<button onclick="textTwo()">Two</button>
<canvas id="c"></canvas>

If you want to also update the styles dynamically, you can use setSelectionStyles method like this:

const text = new fabric.TextBox('Regular Font', {
  left: 50,
  top: 100,
  fontFamily: 'arial',
  fill: '#333',
  fontSize: 50,
});
const start = 0
const end = 5
text.setSelectionStyles({fontWeight: 'bold'}, start, end);