[解決済み] getContext は関数ではありません。

質問

キャンバスを使った基本的なWebアプリケーションを作っているのですが、ウィンドウのサイズが変わるとキャンバスのサイズも動的に変更されます。静的には何の欠陥もなく動作していますが、動的にそれを行うためにオブジェクトを作成すると、エラーがスローされます。

chromeではエラーは

Uncaught TypeError: オブジェクト [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());
}

よろしくお願いします。

どのように解決するのですか？

あなたの価値

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')
       .attr('width', this.width)       // for pixels
       .attr('height', this.height)
       .width(this.width)               // for CSS scaling
       .height(this.height)
       .appendTo(location);

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

実行中のコードを見る http://jsfiddle.net/alnitak/zbaMh/ デバッグ出力で結果のオブジェクトを見ることができるように、Chrome Javascript Consoleを使用するのが理想的です。