Question

107

getContext is not a function

rated 0 times [ 110] [ 3] / answers: 1 / hits: 171033 / 13 Years ago, wed, april 27, 2011, 12:00:00

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

in chrome the error is:

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

and in firefox it is:

this.element.getContext is not a function

I've searched the web and it seems like a common problem but none of the fixes mentioned make any difference.

The code is in question is as follows:

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

}

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

devlin

Add To Favorites

Follow

Total Points: 474

Total Questions: 113

Total Answers: 100

Location: Sweden

Member since Fri, Apr 16, 2021

3 Years ago

answered 13 Years ago albert · Accepted Answer

Your value:

this.element = $(id);

is a jQuery object, not a pure Canvas element.

To turn it back so you can call getContext(), call this.element.get(0), or better yet store the real element and not the jQuery object:

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");

}

See running code at http://jsfiddle.net/alnitak/zbaMh/, ideally using the Chrome Javascript Console so you can see the resulting object in the debug output.