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?](https://stackoverflow.com/questions/15661339/how-do-i-fix-blurry-text-in-my-html5-canvas) — AncientSwordRage, Feb 13 '21 at 17:35

score 0 · Answer 1 · answered Feb 12 '18 at 09:01

0

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));

answered Feb 12 '18 at 09:01

Mr. Reddy

1,073
6
8

Thanks for that, I have made sure to use parseInt() but still if I rotate my shape to 90 or 270 degrees my text becomes blurry (it seems like the text is being squashed when I resize the shape after rotating it) but if I rotate back to 0 or 180 degrees then my text is crisp again. – Eddie Feb 12 '18 at 12:50
I don't have much experience with rotating text in canvas yet I have a bucket load with CGI in various Windows OS's. Rotating text almost always gives a worse result than non-rotated. Your best option might be to convert the shape to an image and use that instead of the raw shapes. – Vanquished Wombat Feb 13 '18 at 11:35
My 'shape' is actually an Konva.Image (if that's what you mean) which I create and set a canvas as its image when added to stage. I then draw a rectangle and width and height in this canvas in my fillRectangle function above. At the moment I am just swapping the position of where I draw the width and height values in the canvas if it has been rotated. Should it be done differently? – Eddie Feb 14 '18 at 10:45
I have added an image to my post in case it better explains the issue. The middle item is the one rotated and with the problem. The right most item has also been rotated to the same angle but I have stretched it out and this gets rid of the blurry text. – Eddie Feb 14 '18 at 11:05

Blurry text still in canvas

1 Answers1

Linked