jQuery: HTML 5 элемент холста не может быть найден

Question

В моем HTML у меня есть:

<div id="cowcloud">
 <canvas id="cows" width="1024" height="253">
   <p>Browser doesn't support HTML5 canvas</p>
 </canvas>
</div>

Я загружаю файл javascript, выполняя некоторые разделы jQuery в разделе, используя функцию готовности jQuery. Содержит следующее:

var cattle = [ 
                 {
                      "name" : "klara88",
                      "polygon" : {
                                       "vertices": [
                                          {"x" : "138", "y" : "204"}, 
                                          {"x" : "145", "y" : "201"},
                                          {"x" : "155", "y" : "178"}, 
                                          {"x" : "208", "y" : "177"},
                                          {"x" : "216", "y" : "200"}, 
                                          {"x" : "208", "y" : "192"},
                                          {"x" : "208", "y" : "218"}, 
                                          {"x" : "196", "y" : "219"},
                                          {"x" : "195", "y" : "206"}, 
                                          {"x" : "170", "y" : "202"},
                                          {"x" : "169", "y" : "219"}, 
                                          {"x" : "150", "y" : "217"}
                                       ]
                                }
                  }, 
              ];

$(document).ready(function() {
    $('#cowcloud').click(function(e){
        [..]
        /* Search the cattle */
        $.each(cattle, function(i, cow) {
            [..]
            var context = $("#cows")[0].getContext('2d');
            context.fillStyle = '#0f0';
            context.beginPath();

            $.each(cow.polygon.vertices, function(i, vertex) {
                if(i == 0) {
                    context.moveTo(vertex.x, vertex.y);
                }
                else {
                    context.lineTo(vertex.x, vertex.y);
                }
            });
        context.closePath();
        context.fill();
        });

    });
 });

Я вырезал какой-то код, который не имел отношения к этому вопросу.

Странно то, что даже при использовании функции готовности документа jQuery не может найти холст с идентификатором «коровы». Также пытался использовать простой JavaScript, но тогда элемент является нулевым. Я что-то здесь упускаю?

Answer 1

Хорошо, это был классический случай PEBKAC, в коде, который вы не видели, у меня было:

$('#cowcloud').html('x: ' + point.x + ' y:' + point.y);

Который заменил холст.

Answer 2

изменить эту строку

var context = $("#cows")[0].getContext('2d'); 

на

var context = $("#cows").getContext('2d'); 

Answer 3

Насколько я знаю, вы должны использовать

var context = $("#cows").get(0).getContext('2d');

вместо

var context = $("#cows")[0].getContext('2d');

Это исправит это?