jQuery equivalente a obtener el contexto de un Canvas

Tengo el siguiente código de trabajo:

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

¿Hay alguna forma de reescribirlo para usarlo $? Hacer esto falla:

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

Tratar:

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

jQuery expone el elemento DOM real en índices numéricos, donde puede realizar funciones normales de JavaScript / DOM.

También he visto que a menudo se prefiere usar .get (0) para hacer referencia a un objetivo jquery como elemento HTML:

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

Quizás para ayudar a evitar posibles referencias a objetos nulos, ya que jquery devuelve nulo como un objeto, pero trabajar con el elemento de .get (0) puede no fallar tan silenciosamente ... Puede verificar fácilmente si el lienzo se encontró primero antes de .get (0 ) me gusta

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

Usar setTimeout es una manera fácil de garantizar que no intente llamar al elemento de lienzo antes de que esté completamente creado y registrado en el DOM.

El script funciona antes de encontrar "lienzo"

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