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 volver a escribirlo para usar $ ? Haciendo 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 objective jquery como elemento HTML:

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

Quizás para ayudar a evitar cualquier posible referencia de objeto nulo, ya que jquery devuelve null como un objeto, pero trabajar con el elemento de .get (0) no puede fallar tan silenciosamente … Puede verificar fácilmente si el canvas se encontró primero antes .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>'; $('body').append(canvas); } setTimeout( function(){ ctx = $('#canvas').get(0).getContext('2d'); }, 500); 

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

El script funciona antes de encontrar “canvas”

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