Pourquoi utiliser devicePixelRatio ne fonctionne pas en contexte

Question

Ma question concerne l'utilisation de devicePixelRatio. Prenons l'exemple suivant :

const canvas = document.getElementById("canvas");
  const ctx = canvas.getContext("2d");
  const size = 5;

  canvas.style.width = `${size}px`;
  canvas.style.height = `${size}px`;

  const scale = window.devicePixelRatio;
  canvas.width = Math.floor(size * scale);
  canvas.height = Math.floor(size * scale);
  canvas.style.backgroundColor="red";
  ctx.fillStyle = "black";
  ctx.fillRect( 3, 3, 1,1 );

Ce que je veux, c'est ceci :

Le DevicePixelRatio de mon écran est égal à 2.

Mon objectif est d'afficher des points de taille 1x1 dans un canevas de taille 5x5.

J'ai appliqué ce que j'ai compris, j'ai doublé la taille du buffer de dessin par rapport à la taille du buffer d'affichage.

Pour une taille de point : 1x1, les résultats sont bons.

Mais la toile est toujours deux fois plus grande. 10x10 Pour quoi ? L'explication est bien sûr évidente...

---

Ma question a été réécrite le 1er mai, elle n'est pas claire

Mon écran renvoie une valeur window.devicePixelRatio égale à 2

Mon objectif est d'écrire du code qui affiche les pixels dans un carré.

La taille du carré est de 5x5 pixels.

J'ai essayé d'utiliser le code suivant :

  const canvas = document.getElementById("canvas");
  const ctx = canvas.getContext("2d");
  const size = 5;

  canvas.style.width = `${size}px`;
  canvas.style.height = `${size}px`;

  const scale = window.devicePixelRatio;
  canvas.width = Math.floor(size * scale);
  canvas.height = Math.floor(size * scale);
  canvas.style.backgroundColor="red";
  ctx.fillStyle = "black";
  ctx.fillRect( 3, 3, 1,1 );

Voici le résultat : j'ai copié et collé la capture d'écran

C'est sous Gimp, j'ai zoomé et ajouté une grille

Point noir, le résultat de ctx.fillRect(3, 3, 1,1) est exactement la taille que je veux.

Mais la taille du fond rouge est de 10 x 10. J'aurais aimé que ce soit 5x5

Answer 1

D'après ce que j'ai compris, ce que veut l'OP, c'est un canevas avec des pixels physiques de 5x5px et des points de 1x1px, voici un autre essai sans utiliser .scale :

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
const size = 5;
const scale = window.devicePixelRatio;

canvas.style.width = `${size}px`;
canvas.style.height = `${size}px`;
canvas.style.transform = `scale(${1 / scale })`;
canvas.style.transformOrigin = 'top left';

canvas.width = size;
canvas.height = size;
canvas.style.backgroundColor = 'red';
ctx.fillStyle = 'black';
ctx.fillRect(3, 3, 1, 1);

<canvas id="canvas" />

---

Solution originale

Par défaut, le contexte et le canevas maintiennent deux logiques différentes, le contexte est le tampon de dessin et le canevas est uniquement responsable de la mise à l'échelle des résultats du tampon de dessin à la bonne taille.

Pour dessiner sur le canevas pour les appareils à ratio de pixels élevé tout en garantissant que le canevas conserve le même tampon de dessin, vous pouvez utiliser ctx.scale 方法，该方法应根据您传入的值（例如 devicePixelRatio) :

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
const size = 5;

canvas.style.width = `${size}px`;
canvas.style.height = `${size}px`;

const scale = window.devicePixelRatio;
canvas.width = Math.floor(size * scale);
canvas.height = Math.floor(size * scale);
canvas.style.backgroundColor = 'red';
ctx.scale(scale, scale);
ctx.fillStyle = 'black';
ctx.fillRect(3, 3, 1, 1);

<canvas id="canvas" />