Le canevas HTML devient flou en plein écran

Question

Je veux peindre des rectangles sur ma toile. Cette toile doit avoir une taille plein écran.

La vue correcte sans redimensionnement de la toile :

$(document).ready(() => {
  const canvas = $('#c')[0];
  const ctx = canvas.getContext('2d');
  ctx.lineWidth = 1;

  for (let i = 0; i < 10; i++) {
    const rectHeight = 100;
    const verticalPosition = i * rectHeight + (i + 1) * 10;
    ctx.strokeRect(10, verticalPosition, 200, rectHeight);
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<canvas id="c"></canvas>

La vue avec une toile redimensionnée :

$(document).ready(() => {
  const canvas = $('#c')[0];
  const ctx = canvas.getContext('2d');
  ctx.lineWidth = 1;

  for (let i = 0; i < 10; i++) {
    const rectHeight = 100;
    const verticalPosition = i * rectHeight + (i + 1) * 10;
    ctx.strokeRect(10, verticalPosition, 200, rectHeight);
  }
});

#c {
  width: 100%;
  height: 100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<canvas id="c"></canvas>

Je ne veux pas que les éléments grossissent. Le canevas doit simplement avoir une plus grande surface pour dessiner. Les éléments sur la toile doivent garder leur taille. Sinon, ils deviennent flous.

Answer 1

Vous pouvez déclarer le canevas width y height dans votre JavaScript. Définissez les dimensions à la width y height de la fenêtre.

$(document).ready(() => {
  const canvas = $('#c')[0];
  // Set the canvas size
  canvas.width = window.innerWidth;
  canvas.height = window.innerHeight;
  const ctx = canvas.getContext('2d');
  ctx.lineWidth = 1;

  for (let i = 0; i < 10; i++) {
    const rectHeight = 100;
    const verticalPosition = i * rectHeight + (i + 1) * 10;
    ctx.strokeRect(10, verticalPosition, 200, rectHeight);
  }
});

body {
  margin: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<canvas id="c"></canvas>

Answer 2

J'ai eu le même problème, je l'ai résolu simplement en définissant width y height les propriétés à offsetWidth y offsetHeight propriétés de l'élément de toile. Les dimensions intérieures du canevas sont calculées à partir de width y height et il est surprenant qu'ils ne soient pas définis en les fixant à 100 % dans le CSS. Le code de travail pour vous est donc le suivant :

$(document).ready(() => {
  const canvas = $('#c')[0];
  const ctx = canvas.getContext('2d');
  canvas.width = canvas.offsetWidth;
  canvas.height = canvas.offsetHeight;
  ctx.lineWidth = 1;

  for (let i = 0; i < 10; i++) {
    const rectHeight = 100;
    const verticalPosition = i * rectHeight + (i + 1) * 10;
    ctx.strokeRect(10, verticalPosition, 200, rectHeight);
  }
});

#c {
  width: 100%;
  height: 100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<canvas id="c"></canvas>

Passez une bonne journée.

Answer 3

Je pense que c'est un problème courant avec les CSS. Je préfère utiliser JS :

canvas.width = document.body.clientWidth; 
canvas.height = document.body.clientHeight;