The Text on The Canvas Looks Pretty Blurry

Question

There is no blur when I run the code in the compilers on the internet, but it seems quite blurry when I run it on my project. What could be the reason for this? Photos and codes are below.

.ts code

    public DrawTheTree() {
    var canvas: HTMLCanvasElement = document.getElementById("tree_canvas") as HTMLCanvasElement;
    var context: CanvasRenderingContext2D = canvas.getContext("2d") as CanvasRenderingContext2D;
        context.beginPath();
        context.font = "16px Comic Sans MS";
        context.fillStyle = "white";
        context.textAlign = "center";
        context.fillText("Animals", 150, 15);
        context.closePath();    
    }

.html code

<canvas id="tree_canvas" class="tree_canvas_class"></canvas>

.css code

.tree_canvas_class {
background-color: darkblue;
width: 936px;
height: 435px;
}

BlurryPhoto:https://www.dropbox.com/s/mle8vepnyesapip/Capture.JPG?dl=0 DesiredPhoto: https://www.dropbox.com/s/g0fwn46ibrgascy/ss.JPG?dl=0

Possible duplicate of [Why the wordcloud in the canvas is blurry?](https://stackoverflow.com/questions/47010056/why-the-wordcloud-in-the-canvas-is-blurry) — helb, Jan 04 '18 at 13:43
Add to the canvas. `canvas.width = 936; canvas.height = 435;` — Blindman67, Jan 04 '18 at 15:02
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:37

Lazar Ljubenović · Accepted Answer · 2018-01-04T14:18:03.877

2

What could be the reason for this?

That's how canvas works. It's a raster image, not a vector.

You create a text using 16px font (context.font = "16px Comic Sans MS") and then enlarge it by using CSS (width: 936px; height: 435px;).

There are a few possible solutions to make the text non-blurry.

Do not use canvas.
Do not resize canvas.

edited Jan 04 '18 at 14:18

answered Jan 04 '18 at 13:38

Lazar Ljubenović

18,976
10
56
91

Will I first create the text, then expand the canvas? – osmnfrkn61 Jan 04 '18 at 13:43
Updated answer. – Lazar Ljubenović Jan 04 '18 at 13:45
I have to use canvas unfortunately. – osmnfrkn61 Jan 04 '18 at 13:46
That's why the second option says, "do not resize [it]". – Lazar Ljubenović Jan 04 '18 at 13:46
To clarify the "do not resize", if you want a large canvas don't scale it with CSS, simply create a bigger canvas to begin with and fill it with a larger font size. – DBS Jan 04 '18 at 13:50
I have to do that too, boss. – osmnfrkn61 Jan 04 '18 at 13:50
Then you cannot expect it to not be blurry. HTML5 is not a crime investigation TV show. Images cannot be enlarged without loss of quality or guessing.its content. – Lazar Ljubenović Jan 04 '18 at 13:52
It's a very weird situation where you *have* to use a css-scaled canvas to display this text... If that's the case, I'm afraid I don't believe you can make the text any clearer. – DBS Jan 04 '18 at 13:52
Friends, the size of my canvas has to be 936px-435px and I want to print text on this canvas. This text does not have to be 16 px, of course. However, this text should be readable and clear on canvas. That's all I want. – osmnfrkn61 Jan 04 '18 at 14:00
Then create the canvas `936px` by `435px` from the start, do not resize it via CSS. – Lazar Ljubenović Jan 04 '18 at 14:17
Okay, now I see. Thank you for your contribution – osmnfrkn61 Jan 04 '18 at 15:00

The Text on The Canvas Looks Pretty Blurry

1 Answers1