Ratgeber: Bei einer unscharfen Canvasgrafik Darstellungsgröße und Zeichenauflösung trennen

Ein großer Bildpunkt ist kein neues Detail

Eine im Canvas gezeichnete Grafik wirkt auf einem hochauflösenden Bildschirm unscharf. Die sichtbare CSS-Größe und die interne Zeichenfläche können unterschiedliche Auflösungen haben. MDN beschreibt devicePixelRatio als Verhältnis physischer Pixel zu CSS-Pixeln und zeigt dessen Bedeutung für Canvasdarstellungen. Die Eigenschaft ist ein technischer Hinweis, keine Aufforderung, jede Grafik ohne Grenze auf maximale Größe zu vergrößern.

Die zwei Größen ausdrücklich notieren

Erfasse an einem kleinen eigenen Beispiel die sichtbare Breite und Höhe sowie die interne Canvasauflösung. Prüfe das Verhältnis auf dem tatsächlich verwendeten Bildschirm. Eine Browservergrößerung kann ebenfalls Einfluss auf den Wert haben; sie ist nicht mit jeder Art von Zoom gleichzusetzen. Wenn die Grafik nach einer Größenänderung neu gezeichnet werden muss, gehört dieser Ablauf zur Umsetzung. Eine reine Änderung des CSS kann eine zu kleine Zeichenfläche nur größer darstellen, ohne zusätzliche Details zu erzeugen.

Speicherbedarf und Bedienung mitdenken

Begrenze die interne Auflösung entsprechend dem tatsächlichen Zweck. Breite und Höhe wachsen gemeinsam, sodass eine unbedachte Vergrößerung erheblich mehr Bildpunkte erzeugen kann. Prüfe außerdem, ob Maus- und Tastaturbedienung weiterhin mit den richtigen Koordinaten arbeiten. Ein scharfes Diagramm darf keine unzugängliche einzige Darstellung wichtiger Zahlen sein. Biete eine verständliche Beschriftung oder passende Textalternative für den Inhalt. Geräteinformationen sind keine verlässliche Aussage über die Fähigkeiten einer einzelnen Person.

Die gleiche Grafik unter mehreren Bedingungen ansehen

Vergleiche eine normale und eine vergrößerte Ansicht sowie nach Möglichkeit einen Bildschirmwechsel. Kontrolliere Schärfe, Größe, Speichergrenze und die relevanten Interaktionen getrennt. Dokumentiere die tatsächlichen Bedingungen der Probe. Ein erfolgreicher Test auf einem Gerät garantiert keine perfekte Darstellung überall. Die nützliche Abnahme zeigt, dass Zeichenauflösung und Layout für den vorgesehenen Einsatz bewusst abgestimmt sind und eine notwendige Neuzeichnung keine alten Zustände oder falschen Eingabepositionen zurücklässt.

Notiere bei der Prüfung neben dem Browser auch die verwendete Anzeigeeinstellung. Ein Bildschirmausschnitt allein erklärt nicht alle Unterschiede der Pixeldichte. Wiederhole die Sichtprobe nach einer Größenänderung des Fensters. Die Grafik soll ihre Information behalten, ohne Schrift oder wichtige Linien unlesbar werden zu lassen.