Размытый текст в HTML (Полный пример)

Question

У меня очень простой текст по центру холста.

Моя проблема в том, что это выглядит ужасно и размыто. Как я могу улучшить это?

// 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>

Answer 1

Установите атрибуты width и height для canvas динамически внутри кода JS вместо использования правил стиля 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>