jQuery-Äquivalent zum Abrufen des Kontexts eines Canvas

Ich habe den folgenden Arbeitscode:

ctx = document.getElementById("canvas").getContext('2d');

Gibt es eine Möglichkeit, es neu zu schreiben, um es zu verwenden $? Dies schlägt fehl:

ctx = $("#canvas").getContext('2d');

Versuchen:

$("#canvas")[0].getContext('2d');

jQuery macht das eigentliche DOM-Element in numerischen Indizes verfügbar, in denen Sie normale JavaScript / DOM-Funktionen ausführen können.

Ich habe auch gesehen, dass es oft bevorzugt wird, .get (0) zu verwenden, um ein jquery-Ziel als HTML-Element zu referenzieren:

var myCanvasElem = $("#canvas").get(0);

Vielleicht, um mögliche Null-Objektreferenzen zu vermeiden, da jquery null als Objekt zurückgibt, die Arbeit mit dem Element aus .get (0) jedoch möglicherweise nicht so unbeaufsichtigt fehlschlägt ... Sie können leicht überprüfen, ob die Zeichenfläche zuerst vor .get (0) gefunden wurde ) mögen

if( $("#canvas").length ) ctx = $("#canvas").get(0).getContext('2d');
else console.log('Error: Canvas not found with selector #canvas');

try{ 
   ctx = $('#canvas').get(0).getContext('2d');
}catch(e){ 
    console.log('We have encountered an error: ' + e);
}

oder...

if( typeof $('#canvas') === 'undefined'){ 
    var canvas = '<canvas id="canvas"><\/canvas>';
    $('body').append(canvas);
}
setTimeout( function(){ ctx = $('#canvas').get(0).getContext('2d'); }, 500);

Mit setTimeout können Sie auf einfache Weise sicherstellen, dass Sie das Canvas-Element nicht aufrufen, bevor es vollständig erstellt und im DOM registriert wurde.

Das Skript funktioniert, bevor es "canvas" findet.

 $(document).ready(function() {
   ctx = $("#canvas");
});