title: getContext is not a function
body: <p>I'm working on making a basic web application using canvas that dynamically changes the canvas size when the window resizes. I've gotten it to work statically without any flaws but when I create an object to make it dynamically it throws an error</p>
  
  <p>in chrome the error is:</p>
  
  <blockquote>
    <p>Uncaught TypeError: Object [object Object] has no method 'getContext'</p>
  </blockquote>
  
  <p>and in firefox it is:</p>
  
  <blockquote>
    <p>this.element.getContext is not a function</p>
  </blockquote>
  
  <p>I've searched the web and it seems like a common problem but none of the fixes mentioned make any difference.</p>
  
  <p>The code is in question is as follows:</p>
  
  <pre><code>layer['background'] = new canvasLayer("body","background");
  function canvasLayer(location,id){
      $(location).append("&lt;canvas id='"+id+"'&gt;unsupported browser&lt;/canvas&gt;");
      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());
  }
  </code></pre>
  
  <p>Thanks in advance.</p>