fabric.js - text underline and lineHeight

Question

I've added underline to the text in fabric.js, and it works as following image. But the underline is a bit far from the text, I changed lineHeight attribute, the underline could be more closer text, but the problem is the selection control height also changed too. See the pictures below.

This first one, I changed lineHeight = 0.2, and added underline, nice, but the selection control got be strange. The second, I used default lineHeight, but the underline is a bit far from text. So how to add an underline to text closely without selection problem?

I tested, find out this issue is because of originX = 'left', and originY = 'top', if originX = 'center' it's ok.

Answer 1

Try this code hope it will work better for you.

<input type="button" id="undrline" value="Underline" class="underline"  >

$("#undrline").click(function() {
alert("underline");
var obj = canvas.getActiveObject();
if (!obj) return;
obj.setTextDecoration('underline');
canvas.renderAll();
});