Hacktoberfest 2026: le issue che i maintainer hanno segnato per ottobre, aperte e adatte ai principianti. Sfoglia le issue Hacktoberfest

Support for high density monitors with devicePixelRatio

Aperta
  • Qualcosa non va?
#306 0 commenti 0 reazioni 1 assegnatario Vedi su GitHub

@Absulit ci sta già lavorando.

Dal 2/6/2026.

Valutazione

Difficoltà
3/5
Tempo stimato
1-2 giorni
Idoneità per principianti
65/100
Tipo di issue
Funzionalità
Chiarezza
Abbastanza chiara
Stato di attività
Tranquilla
Stack tecnologico
javascript
Ambito
computer-graphics, frontend

Direzione di ricerca

La issue riguarda il ridimensionamento del canvas per monitor ad alta densità. Esamina l’utilizzo di ResizeObserver nel frammento di codice, probabilmente in un modulo di gestione del canvas. Inizia individuando dove il canvas viene inizializzato e ridimensionato, quindi integra il supporto per devicePixelRatio come mostrato. Esegui il test avviando la libreria su un display High-DPI e verificando che il rendering del canvas sia nitido.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Descrizione

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()
    }
}
Lingua principale
JavaScript
Stelle
56
Fork
5
Nessuna PR unita negli ultimi 30g

Preparare l'ambiente

Questo progetto non fornisce container di sviluppo, Dockerfile né guida per i contributori, quindi l'ambiente è a tuo carico: parti dal suo README e consulta la nostra guida al primo contributo per i passaggi generali.

Come iniziare

  1. Leggi tutta la issue e poi la guida ai contributi del progetto.
  2. Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
  3. Fai un fork del repository e lavora su un branch.
  4. Apri una pull request che faccia riferimento al numero della issue.

Altre issue di Absulit/points

Tutte le issue di Absulit/points

Issue simili

Altre issue su JavaScript

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.