✔ JavaScript: Prüfung ob canvas oder explorercanvas unterstützt wird

Shakie

Shakie

Erfahrenes Mitglied
Ich benutze für eine HTML-Seite <canvas> und um IE zu unterstützen habe ich explorercanvas eingebunden. Das funktioniert soweit sehr gut.
Das lade ich im HTML via
HTML: 
<!--[if IE]><script src="js/excanvas.compiled.js"></script><![endif]-->
Ich will jetzt mit JavaScript prüfen, ob ich canvas tatsächlich verwenden kann. Es gibt ja noch weitere Browser die kein Canvas können.
Das wollte ich mit JavaScript so machen:
Code: 
var supported = Boolean(document.getElementById('blabla').getContext)
wobei "blabla" ein canvas-Element ist.
Allerdings funktioniert diese Prüfung nicht mehr, wenn ich explorercanvas geladen habe. Ich verstehe leider die Magie hinter explorercanvas nicht. supported ist im IE immer auf FALSE.
Trotzdem liefert mir
Code: 
document.getElementById('blabla').getContext('2d')
den richtigen Context, mit dem ich zeichnen kann.
Frage:
Wie kann ich jetzt prüfen, ob der Browser Canvas-Unterstützung hat oder nicht bzw. excanvas geladen wurde?

Ich habe mir überlegt dem excanvas-script eine id zu geben und dann zu prüfen, ob das script-element existiert, aber dann müsste ich in meinem JavaScript immer wissen, wie ich im HTML das Element genannt habe:
HTML: 
<!--[if IE]><script id="explorercanvas" src="js/excanvas.compiled.js"></script><![endif]-->
Code: 
var obj = document.getElementById('blabla');
canvasSupport = Boolean(obj.getContext);
if (!canvasSupport) {
    var test = document.getElementById('explorercanvas');
    canvasSupport = Boolean(test);
};
if (canvasSupport) {
    // jetzt kann ich tatsächlich mit canvas zeichnen!
};
Wie würdet ihr das machen?
 
Zuletzt bearbeitet:
Hi,

eigentlich sollte es reichen, mit getElementById das canvas-Element zu ermitteln und anschliessend in einer if-Bedingung zu prüfen, ob ein Objekt erstellt werden konnte, das die Methode getContext kennt.
Code: 
<html>
<head>
<title>www.tutorials.de</title>
<meta name="author" content="Quaese">
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<!--[if IE]><script src="excanvas.compiled.js" type="text/javascript"></script><![endif]-->
<script type="text/javascript">
function drawIt(){
  var objCanvas = document.getElementById("canvas_id");
  // Falls das Objekt unterstützt wird
  if(objCanvas.getContext){
    // ab hier nur noch Browser mit Canvas- bzw. explorercanvas-Unterstützung
  }else{
    // Sonstiger Code
  }
}

window.onload = drawIt;
</script>
</head>
<body>
<canvas id="canvas_id"></canvas>
</body>
</html>

Ciao
Quaese
 
Hi Quaese,

deine Pruefung ob beim Objekt die getContext-Methode existiert habe ich ja selber schon in meinem Post erwaehnt, die hat bei mir aber nicht funktioniert. Trotzdem bin ich jetzt drauf gekommen, woran es liegt (dank deinem Post). Du hast drawIt in window.onload gepackt, waehrend ich jQuery und
Code: 
$(document).ready(function(){drawIt();});
verwendet habe.
Seltsamer Weise funktioniert der Weg ueber jQuery und $.ready() nicht, waehrend window.onload keine Probleme macht.

Wie gesagt, das Problem besteht nur im Zusammenhang mit explorercanvas. Weiss jemand wie das Ding funktioniert? Anscheinend werden die canvas-Methoden erst zu einem spaeteren Zeitpunkt erstellt und noch nicht dann, wenn $.ready() bereits ausgefuehrt wird.

Versteht das einer, wieso ich hier jQuery nicht verwenden kann?
 
Hi,

ich kann das von dir beschriebene Phänomen nur dann beobachten, wenn ich jQuery nach dem explorercanvas-Script einbinde. Sonst funktioniert es bei mir auch im ready-Event.

Ciao
Quaese
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück