CODEWITHSUNDEEP
textcanvasfontshtml5-canvas
Nikhil
Nikhil

Reputation: 1151

Canvas text looks horrible

I have the following code to draw text

                ctx.fillStyle="red";
                ctx.fillRect(player.x, player.y, 10, 10);
                ctx.fillStyle="white";
                ctx.font="bold 20px sans-serif"
                ctx.fillText(player.name,player.x,player.y)

Unfortunately, it looks horrible. Really blocky.

enter image description here

I attempted to shrink it down to 10px, which is the size of the red box, but then it looks even worse. What am I doing wrong?

enter image description here

Upvotes: 0

Views: 314

Answers (1)

probablyup
probablyup

Reputation: 8134

Is the canvas getting scaled by CSS by any chance? If so, that would stretch the text because it is being written to an on-screen bitmap vs directly embedded.

Upvotes: 4

Related Questions