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

var canvas = ctx = textLines = chars = newText = '';
var spaceHTML = betweenSpace = activeObject = lineLength = resultText = '';
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\ntext\nLOG', {
	fill: 'red',
  left: 50,
  top: 50,  
  textAlign: "left",
});

canvas.add(newText).renderAll().setActiveObject(newText);
activeObject = canvas.getActiveObject();
lineLength = activeObject.text.split('\n').length;
line = activeObject.text.split('\n');

$(document).on('change', '#letterSpacing', function(e) {
  e.preventDefault();
  spacing = $(this).val();
  betweenSpace = '';
  setLetterSpacing(spacing);
})

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

fabric.Object.prototype.toObject = (function (toObject) {
    return function () {
        return fabric.util.object.extend(toObject.call(this), {
            letterSpace: this.letterspace
        });
    };
})(fabric.Object.prototype.toObject);