JSFiddle - React, Tailwind, and code Playground

by Mark_1998

HTML

<h1>
Try to erase text from end
</h1>
<canvas id="c" width="400" height="400"></canvas>

JavaScript

var canvas = window._canvas = new fabric.Canvas('c');


var text = new fabric.IText('this is example text', {
    left: 105,
    top: 105,
    fill: 'red',
    scaleX:0.5,
    fontFamily:'verdana'
});
canvas.add(text);
canvas.setActiveObject(text);
canvas.getActiveObject().enterEditing();
canvas.renderAll();

/*  set font size on scaling will solve problem in this fiddle
but this code already apply in my project and still this problem occure*/


/* canvas.on({
  'object:scaling': function(e){
    var modifiedObj = e.target;
    modifiedObj._clearCache();
    var newfontsize = (modifiedObj.fontSize * modifiedObj.scaleX);
    modifiedObj.setFontSize(parseInt("" + newfontsize, 10));
    modifiedObj.setScaleX(1);
    modifiedObj.setScaleY(1);
    modifiedObj.setCoords();
  }
}); */