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:

1. Herausfinden, ob es sich um ein Retina-Display handelt oder nicht.
2. 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 oder undefined → 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 oder undefined → keine automatische Verdopplung der Canvas-Pixel (also iOS-Gerät)
• webkitBackingStorePixelRatio == 2 → automatische Verdopplung der Pixel (also zwangsläufig OS X mit Retina-Display)

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);