Flemming Flemming - 1 month ago 21
CSS Question

fabricjs IText: overlapping character background-color making lines when semitransparent

I got a problem with ovelapping characters in my itext objects.enter image description here
As shown in the image, the letter-backgrounds are somehow having a wrong offset or/and width.
I can't trace down the error. Maybe it's some css on my site, but i don't know how the css could affect the itext object.
With object padding set to 0
This is how it looks like with object padding set to 0. The width exceeds the right boundary!

I have tried to reproduce the error in a fiddle, but off course with no success.
https://jsfiddle.net/FlemmingH/z74whhtn/

var canvas=new fabric.Canvas('canv');

var iTextSample = new fabric.IText('BOX', {
left: -200,
top: 20,
fontFamily: 'Helvetica',
fill: '#333',
lineHeight: 1.1,
styles: {
0: {
0: { textBackgroundColor: 'rgba(0,0,255,0.3)' , fontSize: 420 },
1: { textBackgroundColor: 'rgba(0,255,0,0.3)', fontSize: 420 },
2: { textBackgroundColor: 'rgba(255,0,0,0.3)', fontSize: 420 }

}
}
});
canvas.add(iTextSample);


EDIT 1 - Rounding-error in fabric.js ???
Ok, now the error is reproducible! Try to manually scale up this IText object: IText fiddle
It seems like there's kind of a rounding error getting visible when scaling up from a small font size (in the fiddle i used fontSize:20).

As shown in the picture below there's still an error even with a fontSize:120.enter image description here

So is the only option to get around this by initializing the IText object with a big fontsize and then force the user to scale it down ?

Answer

Thank you for bringing this issue to the fabricjs issue tracker. This is a bug. I'm pushing a fix to solve it. There is an extra 1px calculation in the width of the character.

Comments