How to edit FabricJS IText and apply new styles (like highlighting, etc.)

I want to edit selected characters in text in canvas using fabric.js like change color, font, style, etc.

just like

to @ user43250937 hey uh. I tried it and it works!: D thanks. I tried Underline, Bold, Italic, but I have a problem with changing the text color, I tried:

// "cinput" is the id of the color picker.

addHandler('cinput', function(obj) {
    var color =  $("#cinput").val();

    var isColor = (getStyle(obj, 'fill') || '').indexOf(color) > -1;

     setStyle(obj, 'fill', isColor ? '' : color);




source to share

1 answer

Usually answers without describing what you tried and what didn't work are completely ignored here, I answer this time because the fabricjs library is quite complex and the documentation is sometimes lacking ...

This page has samples for an IText object , text that can be edited in place (the content of the main fabricjs text object can only be changed externally via javascript).

Constructing a static IText object with different styles is easy to apply:


<canvas id="canv" width="250" height="300" style="border: 1px solid rgb(204, 204, 204); width: 400px; height: 400px; -webkit-user-select: none;"></canvas>



var canvas=new fabric.Canvas('canv');

var iTextSample = new fabric.IText('hello\nworld', {
  left: 50,
  top: 50,
  fontFamily: 'Helvetica',
  fill: '#333',
  lineHeight: 1.1,
  styles: {
    0: {
      0: { textDecoration: 'underline', fontSize: 80 },
      1: { textBackgroundColor: 'red' }
    1: {
      0: { textBackgroundColor: 'rgba(0,255,0,0.5)' },
      4: { fontSize: 20 }



Link to JSFiddle

As you can see, you are simply specifying the style for each character of each for each line (first for the line hello

, then for the line world


If you want something dynamic with the ability to select some text and change the look / style , there is some work to be done , you will need to:

  • Add a button or clickable element for each style (bold, italic, change color, change background, etc.) that you want to apply dynamically;
  • Add a click button for each button with code that changes the style of the selected text inside IText.

You will need a basic function that adds handlers that you will reuse for each style button:

function addHandler(id, fn, eventName) {
  document.getElementById(id)[eventName || 'onclick'] = function() {
    var el = this;
    if (obj = canvas.getActiveObject()) {, obj);


And some helper functions for changing styles:

function setStyle(object, styleName, value) {
  if (object.setSelectionStyles && object.isEditing) {
    var style = { };
    style[styleName] = value;
  else {
    object[styleName] = value;

function getStyle(object, styleName) {
  return (object.getSelectionStyles && object.isEditing)
    ? object.getSelectionStyles()[styleName]
    : object[styleName];

addHandler('underline', function(obj) {
  var isUnderline = (getStyle(obj, 'textDecoration') || '').indexOf('underline') > -1;
  setStyle(obj, 'textDecoration', isUnderline ? '' : 'underline');


Link to a working JSFiddle with a working underline button.

A bit of coding is involved as you can see, but it's not that hard, for a complete list of available style options you can check the fabricjs docs.



All Articles