jQuery équivalent d'obtenir le contexte d'un Canvas

J'ai le code de travail suivant:

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

Existe-t-il un moyen de le réécrire pour l'utiliser $? Faire cela échoue:

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

Essayer:

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

jQuery expose l'élément DOM réel dans des index numériques, où vous pouvez exécuter des fonctions JavaScript / DOM normales.

J'ai également vu qu'il est souvent préférable d'utiliser .get (0) pour référencer une cible jquery en tant qu'élément HTML:

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

Peut-être pour aider à éviter toute référence potentielle d'objet nul puisque jquery renvoie null en tant qu'objet mais travailler avec l'élément de .get (0) peut ne pas échouer si silencieusement ... Vous pouvez facilement vérifier si le canevas a été trouvé avant .get (0 ) comme

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

ou...

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

L'utilisation de setTimeout est un moyen facile de vous assurer que vous n'essayez pas d'appeler l'élément canvas avant qu'il ne soit entièrement créé et enregistré dans le DOM.

Le script fonctionne avant de trouver "canvas"

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