jQuery equivalente a obter o contexto de um Canvas

Eu tenho o seguinte código de trabalho:

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

Existe alguma maneira de reescrevê-lo para usar $? Fazer isso falha:

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

Experimentar:

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

O jQuery expõe o elemento DOM real em índices numéricos, onde você pode executar funções JavaScript / DOM normais.

Também vi que é preferível usar .get (0) para fazer referência a um destino de jquery como elemento HTML:

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

Talvez para ajudar a evitar possíveis referências a objetos nulos, pois jquery retorna nulo como objeto, mas o trabalho com o elemento .get (0) pode não falhar tão silenciosamente ... Você pode verificar facilmente se a tela foi encontrada antes .get (0 ) gostar

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

Usar setTimeout é uma maneira fácil de garantir que você não tente chamar o elemento canvas antes que ele seja totalmente criado e registrado no DOM.

O script funciona antes de encontrar "canvas"

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