JQuery эквивалент получения контекста Canvas

Я также видел, что часто предпочитает использовать .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 - это простой способ убедиться, что вы не пытаетесь вызвать элемент canvas до его полного создания и регистрации в DOM.

script работает до того, как он найдет "холст"

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