jQuery setara dengan mendapatkan konteks Kanvas

Saya memiliki kode kerja berikut:

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

Apakah ada cara untuk menulis ulang untuk digunakan $? Melakukan ini gagal:

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

Mencoba:

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

jQuery memperlihatkan elemen DOM yang sebenarnya dalam indeks numerik, di mana Anda dapat melakukan fungsi JavaScript / DOM yang normal.

Saya juga telah melihat bahwa lebih sering menggunakan .get (0) untuk merujuk target jquery sebagai elemen HTML:

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

Mungkin untuk membantu menghindari referensi objek null potensial karena jquery mengembalikan null sebagai objek tetapi bekerja dengan elemen dari .get (0) mungkin tidak gagal begitu saja ... Anda dapat dengan mudah memeriksa apakah kanvas ditemukan terlebih dahulu sebelum .get (0) ) Suka

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

atau...

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

Menggunakan setTimeout adalah cara mudah untuk memastikan Anda tidak mencoba memanggil elemen kanvas sebelum sepenuhnya dibuat dan terdaftar ke DOM.

Script berfungsi sebelum menemukan "kanvas"

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