Blurry text still in canvas

Question

I am using Konva and creating a html canvas object and setting it as my shape's image.

I am drawing the width and height of this image shape inside its canvas (across the top and down the left) and this image is also scalable so I am trying to solve blurry text problems which arise when my shape (canvas) is rotated or scaled using Konva transformer.

By reading up on this problem I have come up with the following code which has nearly fixed the problem for me but I am still not getting crisp text when the shape is resized out of its initial ratio - so if I drag to resize only width or height then my text starts getting blurry again but if I scale by dragging the corner of Transformer or resize some width and then some height my Font is crisp.

Can anyone explain why this is still happening please?

function fillRectangle(isHover)
{

    if(lastItem)//last touched or last added shape
    {
        var lastWidth = ""+parseInt(lastItem.getClientRect().width);
        var lastHeight = ""+parseInt(lastItem.getClientRect().height);

        if(parseInt(lastItem.getClientRect().width) != lastItem.originalWidth)
        {
            var oldWidth = lastItem.getClientRect().width;
            var oldHeight = lastItem.getClientRect().height;

            lastItem.actual_canvas.width = oldWidth ;//* ratio;
            lastItem.actual_canvas.height = oldHeight ;//* ratio;   

        }
        var ctx = lastItem.canvas; //canvas contains the ctx
        ctx.clearRect(0, 0, lastItem.actual_canvas.width, lastItem.actual_canvas.height);
        ctx.fillStyle="#fff";

        if(lastItem.isColliding)
        ctx.fillStyle = 'red';
        else if(isHover)
        ctx.fillStyle = 'black';

        ctx.fillRect(0,0,lastItem.originalWidth * (lastItem.actual_canvas.width / lastItem.originalWidth), lastItem.originalHeight * (lastItem.actual_canvas.height / lastItem.originalHeight));
        ctx.stroke();
        ctx.save();

        if( isHover || lastItem.isColliding)
        ctx.fillStyle = 'red';
        else
        ctx.fillStyle = 'black';


        var posX = (lastItem.actual_canvas.width/2);
        var posY = (lastItem.actual_canvas.height/2); 

        if(lastItem.rotation() == 90 || lastItem.rotation() == 270)
        {
        var fontSize = 12 * (lastItem.actual_canvas.width / lastItem.originalWidth);
        ctx.font = fontSize+"px sans-serif";
        ctx.textBaseline = 'top';
        ctx.textAlign = 'center';

        ctx.fillText(lastWidth,posX, 2);
        ctx.translate( 0, 0 );
        ctx.save();
        ctx.rotate(Math.PI/2 );
        ctx.textBaseline = 'middle';
        ctx.textAlign = 'center';
        ctx.fillText(lastHeight,posY,-(lastItem.actual_canvas.width/15));
        ctx.save();
        ctx.restore();
        }
        else//roation must be 0 or 180
        {
        var fontSize = 12 * (lastItem.actual_canvas.width / lastItem.originalWidth);
        ctx.font = fontSize+"px sans-serif";
        ctx.textBaseline = 'top';
        ctx.textAlign = 'center';
        ctx.fillText(lastWidth,posX, 2);
        ctx.translate( 0, 0 );
        ctx.save();
        ctx.rotate(Math.PI/2 );
        ctx.textBaseline = 'middle';
        ctx.textAlign = 'center';
        ctx.fillText(lastHeight,posY,-(lastItem.actual_canvas.width/15));
        ctx.save();
        ctx.restore();
        }
        layer.draw();
    }
    else
    console.log("lastitem is null");


}

image of blurry text problem

Does this answer your question? How do I fix blurry text in my HTML5 canvas? — Pureferret

Mr. Reddy Mr. Reddy · Accepted Answer · 2018-02-12T09:01:02

The canvas will automatically blur graphics that are given coordinates that are decimals.

Try rounding/casting them to the nearest integer.

ctx.fillText("Text",xPos | 0,yPos | 0);
ctx.fillText("Text",parseInt(xPos),parseInt(yPos));

Blurry text still in canvas

1 Answers