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

在JS代码中动态设置width的height和canvas属性，而不是使用样式规则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>