Blurry Text in HTML (Full example)

Question

I have this very simple text centered inside the canvas.

My problem is that it looks terrible and blurry. How can I improve this?

// Fill The signature canvas with information
var canvas = document.getElementById("signatureCanvas");
var ctx = canvas.getContext("2d");
ctx.font = "12px sans-serif";
ctx.fillStyle = "black";
ctx.textAlign = "center";
ctx.fillText("Signature 1", canvas.width / 2, canvas.height / 2);

.signatureCanvas {
  border: 1px solid #027C8C;
  width: 100%;
  max-height: 200px;
}

<canvas id="signatureCanvas" class="signatureCanvas"></canvas>

Perhaps this will help: https://stackoverflow.com/questions/5262174/poor-anti-aliasing-of-text-drawn-on-canvas — Patrick Hund, Sep 14 '18 at 09:43
the text isn't actually blurry, but because you resize the canvas out of it's dimensions (`width: 100%`) it will become blurry. Basically what you're doing is creating an image and resizing it (enlarging in this case). — giorgio, Sep 14 '18 at 09:59

Zakaria Acharki · Answer 1 · 2018-09-14T10:02:16.317

Set the width and height attributes of canvas dynamically inside your JS code instead of using the style rules width/height :

// Fill The signature canvas with information
var canvas = document.getElementById("signatureCanvas");
canvas.width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;;
canvas.height = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;

var ctx = canvas.getContext("2d");
ctx.font = "12px sans-serif";
ctx.fillStyle = "black";
ctx.textAlign = "center";
ctx.fillText("Signature 1", canvas.width / 2, canvas.height / 2);

.signatureCanvas {
  border: 1px solid #027C8C;
}

<canvas id="signatureCanvas" class="signatureCanvas"></canvas>

Blurry Text in HTML (Full example)

1 Answers1