HTML5 Canvas: Optimierung für Retina Displays

Sobald man einmal Apple’s Retina Display genutzt hat, will man nicht zurück zu den normalen Displays. Damit auch die Canvas-Elemente in HTML5 auf diesen Displays gut aussehen, muss man jedoch einige Vorkehrungen treffen. In diesem Beitrag zeige ich, wie man das erreicht.

Retina Displays haben eine grössere Pixel-Dichte, womit sie mehr Details darstellen können. Um mehr über Retina Displays zu erfahren, verweise ich auf diesen guten Beitrag von techfacts.de:

Was ist ein Retina Display?

Unten sind zwei Links, die auf ein nicht optimiertes Canvas-Element und ein optimiertes Canvas-Element verweisen. Um den Unterschied zu sehen, braucht man jedoch ein Retina-Display.

• Nicht optimiertes HTML5-Canvas

• Optimiertes HTML5-Canvas

Um diese Verbesserungen auch auf seiner eigenen Canvas umzusetzen, kann man den unteren Code verwenden.