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 - Single Object

var canvas = ctx = textLines = chars = newText = '';
var spaceHTML = spacedText = betweenSpace = ActiveObject = originalText = '';
var spacing = 0;

for (var j = 1; j <= 20; 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\ntex', {
  fill: 'red',
  left: 50,
  top: 50,
  textAlign: "left",
});

canvas.add(newText).renderAll().setActiveObject(newText);
ActiveObject = canvas.getActiveObject();
originalText = ActiveObject.text;

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

function setLetterSpacing(spacing) {
  if (!spacing || spacing == 0) return false;
  for (var j = 1; j <= spacing; j++) {
    betweenSpace += ' ';
  }
  spacedText = originalText.split('').join(betweenSpace);
  ActiveObject.setText(spacedText);
  ActiveObject.set('letterspace', spacing);
  canvas.renderAll();
  console.log(canvas.toSVG());
  console.log(JSON.stringify(canvas.toJSON()));
}

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