JSFiddle - React, Tailwind, and code Playground

by MULLAINATHAN MANICKAM

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.5.0/fabric.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<canvas id="canvas" width="400" height="300"></canvas>
<br>
<select id="letterSpacing"></select>

CSS

#canvas {
  border: 1px solid;
}

#letterSpacing {
  width: 300px;
}

JavaScript

// Fabric.js - LetterSpacing - Multile Objects

var canvas = ctx = textLines = chars = newText = '';
var spaceHTML = betweenSpace = activeObject = lineLength = resultText = '';
var multiLineText = false;
var spacedText = [];
var spacing = 0;

for (var j = 1; j <= 5; j++) {
  spaceHTML += '<option value=' + j + '>' + j + '</option>';
}
$("#letterSpacing").html(spaceHTML);

console.clear();
canvas = new fabric.Canvas('canvas');
ctx = canvas.getContext('2d');

newText = new fabric.Text('Sample', {
  fill: 'red',
  left: 0,
  top: 50,
  textAlign: "left",
  letterSpace: 0,
});

canvas.add(newText).renderAll().setActiveObject(newText);

var newText1 = new fabric.Text('BES\nIT', {
  fill: 'green',
  left: 150,
  top: 50,
  textAlign: "left",
  letterSpace: 0,
});

canvas.add(newText1).renderAll().setActiveObject(newText1);

$(document).on('change', '#letterSpacing', function(e) {
  activeObject = canvas.getActiveObject();
  lineLength = activeObject.text.split('\n').length;
  var spaceRemovedText = activeObject.text.split(' ').join('');
  if (lineLength > 1) {
    line = spaceRemovedText.split('\n');
    multiLineText = true;
  } else {
    line = spaceRemovedText;
    multiLineText = false;
  }

  e.preventDefault();
  spacing = $(this).val();
  betweenSpace = '';
  setLetterSpacing(spacing);
})

function setLetterSpacing(spacing) {
  if (!spacing) return false;
  if (spacing <= 1) {
    betweenSpace = '';
  } else {
    for (var j = 2; j <= spacing; j++) {
      betweenSpace += ' ';
    }
  }
  if (multiLineText && multiLineText == true) {
    spacedText = [];
    for (var k = 0; k < lineLength; k++) {
      spacedText[k] = String.prototype.split.call(line[k], '').join(betweenSpace);
    }
    resultText = spacedText.join('\n');
  } else {
    resultText = line.split('').join(betweenSpace);
  }
  activeObject.setText(resultText);
  activeObject.set('letterSpace', spacing);
  //  console.log(JSON.stringify(canvas.toJSON()));
  //  console.log(canvas.toSVG());
 ...