Display cursor line in place of erased character when iText erase in fabric js

Question

I am using fabric js version 1.7.22 I am working on one project in which I need to add text and it's editing. When I add new iText in canvas and write some text and erase it. It shows me old cursor line in place of erased character,

I Can't generate this issue in fiddle So please check GIF. I don't know where I am wrong. Please Help Me.

My Itext added code is like this:

var text = new fabric.IText('Example heading', {
        left: 10,
        top: 10,
        fontFamily: 'Roboto-Regular',
        angle: 0,
        fontSize: fontSize,
        fill: '#000000',
        fontWeight: '',
        charSpacing: 0,
        shadow: {
            "color": "#000000",
            "blur": 0,
            "offsetX": 0,
            "offsetY": 0,
            "affectStroke": false
        },
        hasRotatingPoint: true
    });
    canvas.add(text);

this issue is caused due to text scaling. the solution is also applied in a fiddle. but if the canvas is in zoom-out mode then the issue will regenerate. I have Attach one fiddle for that :

https://jsfiddle.net/Mark_1998/ro8gc3zh/5/

I don't understand what issue you want to figure out through gif. Can you explain more? — Nawaraj, Jan 13 '19 at 18:34
when Itext erase, there are some line visible inplace of erased character this is issue. but it remove when we deselect itext object. This issue is generated when scaling itext either by mouse or by canvas zooming. — Mayur Kukadiya, Jan 16 '19 at 03:08

score 1 · Accepted Answer · answered Jan 13 '19 at 18:37

When the IText cursor moves, fabric calls text._clearTextArea() to clear the canvas that draws the cursor. One possible solution would be to extend this area a little bit - just enough to remove the traces of the blinking cursor in all possible cases - by patching the fabric.IText.prototype._clearTextArea() method:

fabric.IText.prototype._clearTextArea =  function(ctx) {
  // was 'this.width + 4'
  var width = this.width + this.fontSize * this.scaleX, height = this.height + 4;
  ctx.clearRect(-width / 2, -height / 2, width, height);
}

Here's your example with the patch applied:

fabric.IText.prototype._clearTextArea =  function(ctx) {
  var width = this.width + this.fontSize * this.scaleX, height = this.height + 4;
  ctx.clearRect(-width / 2, -height / 2, width, height);
}

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

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.22/fabric.js"></script>
<h1>
  Try to erase text from end
</h1>
<canvas id="c" width="300" height="150"></canvas>

This looks somewhat hacky, but it does the trick, for the lack of a better solution. A better way would be to back-port the IText from fabric v2 - this bug is fixed there.

Display cursor line in place of erased character when iText erase in fabric js

1 Answers1