Retina-Display: HTML-Canvas optimieren
Viele HTML-Elemente von mobilen Websites werden automatisch auf Geräten mit Retina-Display optimal dargestellt. Nicht jedoch das canvas
-Element.
Das HTML-Element canvas
(vom engl. Wort für Leinwand) ist eine Fläche, auf der mit JavaScript gezeichnet werden. So werden beispielweise Grafiken, Linien, Kreise, Bèzierkurven oder Farbverläufe unterstützt. Wie auch Website-Bilder (PNG, JPG) für das Retina-Display optimiert werden müssen, so ist dies auch für canvas
-Elemente auf iOS-Geräten erforderlich.
Es folgt ein Überblick, wie man das Canvas
-Element für iOS optimiert — und dabei auch bereits die neuen MacBooks mit Retina-Display berücksichtigt.
Optimale Darstellung, wenn Canvas-Pixel = Device-Pixel
Wie bereits im Artikel Unterschiede zwischen CSS-, Bild- und Device-Pixel erklärt, ist es wichtig, dass die Bild- und Device-Pixel übereinstimmen. Man muss also dafür sorgen, dass die Größe des Canvas (= Bild-Pixel) mit dem Display übereinstimmt. Konkret bedeutet dies, dass der Canvas z.B. statt 320x240px eine Auflösung von 640x480px besitzen muss, um scharf auszusehen.

Unterschiede zwischen iOS und OS X
Ein wichtiger Unterschied zwischen iOS und Mac OS X liegt darin, dass OS X diese Pixelverdopplung des Canvas automatisch erledigt. Auf einem Desktop ist genügend Leistung vorhanden, so dass ohne jegliche Veränderung des Website-Codes automatisch alle Canvas-Elemente auf einem neuen Macbook mit Retina Display scharf sind.
Auf mobilen Endgeräten soll der Website-Entwickler jedoch aus Performance-Gesichtpunkten selbst entscheiden können, ob er die Verdopplung der Auflösung (= 4-fache Anzahl an Pixeln) anbieten möchte oder nicht.
Daraus ergibt sich folgende Aufgabe:
- Herausfinden, ob es sich um ein Retina-Display handelt oder nicht.
- Herausfinden, ob es der Canvas bereits vom Betriebssystem verdoppelt wird oder nicht. Wenn ja, dann darf nichts mehr verdoppelt werden (sonst erhielte man die 4-fache Canvas-Größe). Wenn nein, muss die Canvas-Größe verdoppelt werden.
Canvas
Retina-Display erkennen (windows.devicePixelRatio
)
Als erstes stellt sich die Frage, woran erkennt mit die Devices mit hochauflösendem Bildschirm? Dies lässt sich in JavaScript über die Eigenschaft windows.devicePixelRatio
herausfinden.
- windows.devicePixelRatio ==
1
oderundefined
→ normaler Screen - windows.devicePixelRatio ==
2
→ Retina-Display
Automatische Pixel-Verdopplung bei Canvas erkennen (context.webkitBackingStorePixelRatio
)
Im Anschluss muss geprüft werden, ob die Canvas-Pixel vom Betriebssystem bereits verdoppelt werden. Hier gibt es eine neue Eigenschaft (var ctx = canvas.getContext('2d'); ctx.webkitBackingStorePixelRatio
).
- webkitBackingStorePixelRatio ==
1
oderundefined
→ keine automatische Verdopplung der Canvas-Pixel (also iOS-Gerät) - webkitBackingStorePixelRatio ==
2
→ automatische Verdopplung der Pixel (also zwangsläufig OS X mit Retina-Display)

devicePixelRatio
und webkitBackingStorePixelRatio
Beispiele
Das erste Beispiel dient zur Betrachtung auf einem iPhone mit Retina-Display. Es zeigt lediglich die Unterschiede, zwischen einem nicht-optimierten und einem optimierten Canvas-Element (Screenshot siehe oben).
Wie man die beiden Erkennungen (Retina-Display und automatische Verdopplung) nun als generische Lösung implementieren kann, zeigt das zweite Beispiel. Auf diese Weise wird die Canvas-Verdopplung nur auf iOS-Geräten mit Retina-Display durchgeführt, auf anderen Geräten und Desktop-Rechner nicht.
if (canvas.getContext) { var ctx = canvas.getContext('2d'); var factor = 1; // retina display? var isRetina = (window.devicePixelRatio > 1); // iOS? (-> no auto double) var isIOS = ((ctx.webkitBackingStorePixelRatio < 2) || (ctx.webkitBackingStorePixelRatio == undefined)); if (isRetina && isIOS) { factor = 2; } canvas.setAttribute('width', 350*factor); canvas.setAttribute('height', 120*factor); ctx.scale(factor, factor); |
4 Kommentare zu: Retina-Display: HTML-Canvas optimieren