jQuery еквівалент отримання контексту Canvas

У мене є такий робочий код:

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

Чи є спосіб переписати його для використання $? Це зробити не вдається:

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

Спробуйте:

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

jQuery розкриває фактичний елемент DOM в числових індексах, де ви можете виконувати звичайні функції JavaScript / DOM.

Я також бачив, що часто вважають за краще використовувати .get (0) для позначення цілі jquery як HTML-елемента:

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

Можливо, щоб уникнути будь-яких потенційних посилань на нульові об’єкти, оскільки jquery повертає null як об’єкт, але робота з елементом з .get (0) може не вийти з ладу настільки мовчки ... Ви можете легко перевірити, чи не було знайдено полотно раніше .get (0 ) подібно до

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

або ...

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

Використання setTimeout - це простий спосіб переконатися, що ви не намагаєтеся викликати елемент полотна, перш ніж він повністю створений та зареєстрований у DOM.

Сценарій працює, перш ніж знайде "полотно"

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