getContext no es una función

Question

Estoy trabajando en la creación de una aplicación web básica utilizando un lienzo que cambia dinámicamente el tamaño del lienzo cuando la ventana cambia de tamaño. He conseguido que funcione de forma estática sin ningún tipo de defectos, pero cuando se crea un objeto para que sea dinámica que genera un error

en cromo el error es:

Uncaught TypeError: Object [object Object] has no method 'getContext'

y en Firefox es:

this.element.getContext is not a function

He buscado en la web y parece ser un problema común, pero ninguno de los arreglos mencionados hace una diferencia.

El código está en cuestión es la siguiente:

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

Gracias de antemano.

Answer 1

Su valor:

this.element = $(id); 

es un objeto jQuery, no un elemento Canvas puro.

para volver a lo que puede llamar getContext(), llame this.element.get(0), o mejor aún almacenar el elemento real y no el objeto 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"); 
} 

Ver la ejecución de código en http://jsfiddle.net/alnitak/zbaMh/, a ser posible mediante la consola de Chrome Javascript por lo puede ver el objeto resultante en la salida de depuración.

Answer 2

Alternativamente, puede utilizar:

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

Answer 3

me dieron el mismo error porque había utilizado accidentalmente <div> en lugar de <canvas> como el elemento en el que intento llamar getContext.