我有一个<div style="border:1px solid border;" />和画布，使用以下方式绘制：

context.lineWidth = 1;
context.strokeStyle = "gray";

绘图看起来很模糊（lineWidth小于1会产生更差的图片），并且在div的边界附近没有任何内容。是否可以使用画布获得与HTML相同的绘图质量？

var ctx = document.getElementById("canvas").getContext("2d");

ctx.lineWidth = 1;

ctx.moveTo(2, 2);

ctx.lineTo(98, 2);

ctx.lineTo(98, 98);

ctx.lineTo(2, 98);

ctx.lineTo(2, 2);

ctx.stroke();


div {

  border: 1px solid black;

  width: 100px;

  height: 100px;

}

canvas, div {background-color: #F5F5F5;}

canvas {border: 1px solid white;display: block;}


<table>

<tr><td>Line on canvas:</td><td>1px border:</td></tr>

<tr><td><canvas id="canvas" width="100" height="100"/></td><td><div>&nbsp;</div></td></tr>

</table>