Support for high density monitors with devicePixelRatio

Ouverte
  • Quelque chose ne va pas ?
#306 0 commentaires 0 réactions 1 personne assignée Voir sur GitHub

@Absulit y travaille déjà.

Depuis le 2/6/2026.

Évaluation

Difficulté
3/5
Temps estimé
1-2 jours
Accessibilité débutants
65/100
Type d'issue
Fonctionnalité
Clarté
Plutôt claire
Activité
Calme
Stack technique
javascript
Domaine
computer-graphics, frontend

Piste de recherche

L’issue concerne le redimensionnement du canvas pour les moniteurs à haute densité. Examinez l’utilisation de ResizeObserver dans l’extrait de code, probablement dans un module de gestion du canvas. Commencez par trouver où le canvas est initialisé et redimensionné, puis intégrez la prise en charge de devicePixelRatio comme indiqué. Testez en exécutant la bibliothèque sur un écran haute résolution (High-DPI) et en vérifiant que le rendu du canvas est net.

Rédigé par le modèle d'indexation à partir du texte de l'issue.

Description

enhancement

This is related to #299

Required for high density monitors and the HTML in Canvas to not look blurry, it needs to support the device pixel ratio


const observer = new ResizeObserver(this.#resizeCanvasToFitWindow);

const supportsDevicePixelContentBox =
    typeof ResizeObserverEntry !== 'undefined' &&
    'devicePixelContentBoxSize' in ResizeObserverEntry.prototype;
const options = supportsDevicePixelContentBox ? { box: 'device-pixel-content-box', signal } : { signal };
observer.observe(this.#canvas, options);



#resizeCanvasToFitWindow = (entries) => {
    // there are some calls of this function that do not have entries
    // because of this, clientWidth and clientHeight values are used
    const entry = entries?.[0];

    this.#screenResized = true;
    if (this.#fitWindow) {
        const width = entry?.contentRect?.width || this.#canvas.clientWidth;
        const height = entry?.contentRect?.height || this.#canvas.clientHeight;
        const dpc = entry?.devicePixelContentBoxSize;
        this.#canvas.width = dpc ? dpc[0].inlineSize : Math.round(width * window.devicePixelRatio);
        this.#canvas.height = dpc ? dpc[0].blockSize : Math.round(height * window.devicePixelRatio);
        this.#setScreenSize();
        this.#frame()
    }
}
Langage dominant
JavaScript
Étoiles
56
Forks
5
Aucune PR mergée en 30 j

Préparer son environnement

Ce projet ne fournit ni conteneur de développement, ni Dockerfile, ni guide de contribution : l'installation est à votre charge. Commencez par son README, et consultez notre guide de la première contribution pour les étapes générales.

Par où commencer

  1. Lisez l'issue en entier, puis le guide de contribution du projet.
  2. Signalez en commentaire que vous la prenez — cela évite que deux personnes fassent le même travail.
  3. Forkez le dépôt et travaillez sur une branche.
  4. Ouvrez une pull request qui référence le numéro de l'issue.

Autres issues de Absulit/points

Toutes les issues de Absulit/points

Issues similaires

Plus d'issues JavaScript

Recevez les nouvelles issues par e-mail

Un résumé court des issues GitHub adaptées aux débutants.