jQuery equivalente di ottenere il contesto di una tela

Ho il seguente codice di lavoro:

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

C'è un modo per riscriverlo per usarlo $? In questo modo non riesce:

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

Provare:

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

jQuery espone l'elemento DOM effettivo in indici numerici, dove è possibile eseguire le normali funzioni JavaScript / DOM.

Ho anche visto che spesso è preferito usare .get (0) per fare riferimento a un target jquery come elemento HTML:

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

Forse per evitare potenziali riferimenti a oggetti null poiché jquery restituisce null come oggetto ma lavorare con l'elemento da .get (0) potrebbe non fallire così silenziosamente ... Puoi facilmente verificare se il canvas è stato trovato prima di .get (0 ) piace

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

o...

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

L'uso di setTimeout è un modo semplice per assicurarti di non provare a chiamare l'elemento canvas prima che sia completamente creato e registrato nel DOM.

La sceneggiatura funziona prima di trovare "canvas"

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