getContext не является функцией

Question

Я работаю над созданием базового веб-приложения, использующего холст, который динамически изменяет размер холста при изменении размера окна. Я получил статическую работу без каких-либо недостатков, но когда я создаю объект для его динамического создания, он выдает ошибку

в хроме ошибка:

Uncaught TypeError: Object [object Object] не имеет метода 'getContext'

и в Firefox это:

this.element.getContext не является функцией

Я искал в Интернете, и это кажется распространенной проблемой, но ни одно из упомянутых исправлений не имеет значения.

Код, о котором идет речь, выглядит следующим образом:

layer['background'] = new canvasLayer("body","background");
function canvasLayer(location,id){
    $(location).append("<canvas id='"+id+"'>unsupported browser</canvas>");
    this.element=$(id);
    this.context = this.element.getContext("2d"); //this is the line that throws the error
    this.width=$(window).width(); //change the canvas size
    this.height=$(window).height();
    $(id).width($(window).width()); //change the canvas tag size to maintain proper scale
    $(id).height($(window).height());
}

Заранее спасибо.

Answer 1

Ваша стоимость:

this.element = $(id);

- это объект jQuery, а не чистый элемент Canvas.

Чтобы повернуть его обратно, чтобы вы могли вызвать getContext(), позвонить this.element.get(0) или, что еще лучше, сохранить реальный элемент, а не объект jQuery:

function canvasLayer(location, id) {

    this.width = $(window).width();
    this.height = $(window).height();
    this.element = document.createElement('canvas');

    $(this.element)
       .attr('id', id)
       .text('unsupported browser')
       .width(this.width)
       .height(this.height)
       .appendTo(location);

    this.context = this.element.getContext("2d");
}

См. Работающий код на http://jsfiddle.net/alnitak/zbaMh/,, в идеале с использованием консоли Chrome Javascript, чтобы вы могли увидеть полученный объект в результатах отладки.

Answer 2

В качестве альтернативы вы можете использовать:

this.element=$(id)[0];

Answer 3

Я получил ту же ошибку, потому что я случайно использовал <div> вместо <canvas> в качестве элемента, на котором я пытаюсь вызвать getContext.