CODEWITHSUNDEEP
javascripthtmlcanvashtml5-canvasfabricjs
Miron
Miron

Reputation: 1067

Fabric JS IText font fuzzy according to position

I am implementing canvas using Fabric JS, and found an interesting issue.

Font fuzzy or crisp

As can be seen in the picture, left text font is fuzzy and right one is crisp. That is, text becomes fuzzy on some places, while crisp on other places.

Javascript code

var radius = 50;
var circle2 = new fabric.Circle({
    radius: Math.sqrt(3) * radius / 2,
    fill: '#FFF',
    opacity: 0.5
});

var text2 = new fabric.IText('Anant Jadhav ANANT dfds sdss sd...', {
    fontSize: 10,
    textAlign: "center",
    left: Math.sqrt(3) * radius / 2,
    top: Math.sqrt(3) * radius / 2,
    originX: "center",
    originY: "center",
    lineHeight: 12,
    fontFamily: 'SanFrancisco',
    fontWeight: 'bold',
    fill: '#FFF',
    opacity: 0.5
});

var element1 = new fabric.Group([myPoly, formatted], {
    left: 4 * radius,
    top: Math.sqrt(3) * 5 * radius / 2,
    originX: "center",
    originY: "center",
    //hasBorders: false,
    hasControls: false,
    hasRotatingPoint: false
});
canvas.add(element1);
canvas.renderAll();

var element2 = new fabric.Group([myPoly, formatted], {
    left: 2.5 * radius,
    top: Math.sqrt(3) * 6 * radius / 2,
    originX: "center",
    originY: "center",
    //hasBorders: false,
    hasControls: false,
    hasRotatingPoint: false
});
canvas.add(element2);
canvas.renderAll();

JS Fiddle can be seen here. Please anyone suggest me what could be problem.

Thanks in advance.

Upvotes: 1

Views: 2066

Answers (1)

AndreaBogazzi
AndreaBogazzi

Reputation: 14731

The problem could be in object caching for your particular project.

Up to fabricjs 1.6.6 shapes get rendered every frame. Since 1.7.0 this is no more true by default. When text is across pixel is harder to read with small fonts, operating system hinting, and anti aliasing helps a lot. Those affect also canvas. Those smoothed fonts are good for the particualar position they get created.

In your case once you create a group, a cached copy gets created. A small canvas containing a picture of your hexagon and text is saved, later it gets only moved around.

The natural aliasing created for one position could look bad when you move your group in different positions. if you do not position it with mouse ( that moves pixel by pixel ) but with code is likely that you get across 2 pixels and what was antialiase with the first draw gets more and more fuzzy.

Since you are drawing simple shapes, you do not get so much of performance issue disabling it.

try to set up in your project this:

fabric.Object.prototype.objectCaching = false;

and try if something change.

More details here:

Fabric Object Caching

Upvotes: 6

Related Questions