jQuery odpowiednik pobierania kontekstu Canvas

Mam następujący działający kod:

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

Czy jest jakiś sposób, aby ponownie napisać go do użytku $? Nie udaje się to:

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

Próbować:

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

jQuery ujawnia rzeczywisty element DOM w indeksach numerycznych, w których można wykonywać normalne funkcje JavaScript / DOM.

Zauważyłem również, że często preferowane jest użycie .get (0) do odniesienia do celu jquery jako elementu HTML:

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

Być może w celu uniknięcia potencjalnych odwołań do obiektów o wartości null, ponieważ jquery zwraca wartość null jako obiekt, ale praca z elementem z .get (0) może nie zawieść tak cicho ... Możesz łatwo sprawdzić, czy płótno zostało znalezione najpierw przed .get (0 ) lubić

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

lub...

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

Użycie setTimeout to łatwy sposób na upewnienie się, że nie próbujesz wywoływać elementu canvas, zanim zostanie w pełni utworzony i zarejestrowany w DOM.

Skrypt działa, zanim znajdzie „płótno”

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