Für ein aktuelles Projekt muss ich in der Applikation prüfen, ob HTML5 Canvas zur Verfügung steht und genutzt werden kann. Ist dies nicht der Fall, soll dem Anwender eine entsprechende Rückmeldung gegeben werden, mit der Bitte doch bald einmal seinen Browser zu aktualisieren.
Der übliche Weg, der auch in den meisten Frameworks verwendet wird, ist ein entsprechendes Canvas Element zu erzeugen und das Ergebnis zu überprüfen.
Beispiel:
var canvasSupport = !!document.createElement("canvas").getContext;Leider ist dieser Ansatz, gerade im Internet Explorer, aber auch in anderen Browsern recht performance hungrig. Ein anderer Weg ist es das im HTML Standard und im W3C Working Draft definierte Interface anzusprechen. Eine Dokumentation dazu ist auch im Mozilla Developer Network zu finden.
Beispiel:
var canvasSupport = !!window.HTMLCanvasElement;Wie vermutet und durch einen jsPerf Test belegt, ist diese Methode in vielen Browsern deutlich schneller. Der Grund hierfür ist recht schnell klar: Bei der zweiten Methode muss nicht erst ein entsprechendes Element erzeugt werden.
Dass dieser Weg deutlich schneller sein muss, ist daher nur logisch. Überrascht hat mich jedoch das Ergebnis. Bei eigens durchgeführten Tests im sogar recht aktuellen Internet Explorer 11 lag der unterschied bei ca 200%!
Den Entsprechenden Test könnt ihr auch selbst durchführen. die URL lautet:
http://jsperf.com/htmlcanvaselement-vs-getcontext-checks
