Les dessins sur toile, comme les lignes, sont flous

Question

J'ai un <div style="border:1px solid border;" /> et le canevas, qui est dessiné en utilisant :

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

Le dessin est assez flou (une largeur de ligne inférieure à un crée une image encore pire), et rien n'est proche de la bordure de la division. Est-il possible d'obtenir la même qualité de dessin que le HTML en utilisant canvas ?

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>

Answer 1

HTML :

<canvas class="canvas_hangman"></canvas> 

JS :

function setUpCanvas(){
      canvas = document.getElementsByClassName("canvas_hangman")[0];
      ctx = canvas.getContext('2d');
      ctx.translate(0.5, 0.5);

      // Set display size (vw/vh).
      var sizeWidth = 80 * window.innerWidth / 100,
          sizeHeight = 100 * window.innerHeight / 100 || 766; 

      // console.log(sizeWidth, sizeHeight);
      //Setting the canvas site and width to be responsive 
      canvas.width = sizeWidth;
      canvas.height = sizeHeight;
      canvas.style.width = sizeWidth;
      canvas.style.height = sizeHeight;
 }
 window.onload = setUpCanvas();

Cela configure parfaitement votre toile HTML sur laquelle vous pouvez dessiner, de manière réactive également :)