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>