Member Avatar for McLaren

hello,

what is that?

everytime it works, but this time it does not

$(function() {  //jquery doc ready

    world = createWorld(); // box2DWorld  
    ctx = $('#game').getContext('2d'); // 2  
    var canvasElm = $('#game');  

    return;

    canvasWidth = parseInt(canvasElm.width);  
    canvasHeight = parseInt(canvasElm.height);  
    initGame(); // 3  
    step(); // 4  
// 5  
    window.addEventListener('keydown',handleKeyDown,true);  
    window.addEventListener('keyup',handleKeyUp,true);  
});

What is wrong here? WHy no get context?
and html:

<html>
    <body>


<head>
<!--[if IE]><script src="lib/excanvas.js"></script><![endif]-->  
 <!--<script src="libs/prototype-1.6.0.2.js"></script>  -->

 <!-- <script src="//ajax.googleapis.com/ajax/libs/prototype/1.7.1.0/prototype.js"></script> -->
 <script type="text/javascript" src="libs/jquery-1.7.1.min.js"></script>
<!-- box2djs -->  
  <script src="libs/Box2dWeb-2.1.a.3.min.js"></script>  

  <script src='js/box2dutils.js'></script>  
  <script src='js/game.js'></script>  
</head>

  <canvas id="game" width="600" height="400"></canvas>  
  </body>
 </html>
  • 2 Contributors
  • 4 Replies
  • 113 Views
  • 2 Days Discussion Span
  • Latest Post Latest Post by McLaren

Dani AI

Generated

A concise diagnosis and a few practical checks.

The error happens because the jQuery selector returns a jQuery collection (a wrapper object), not the raw canvas DOM node. As noted, calling DOM-only methods on that wrapper triggers the "Object [object Object] has no method 'getContext'" error. confirmed that the native DOM lookup worked, which is consistent with that cause.

A safe pattern is to obtain the underlying element and guard the call with a quick feature test. Example:

var elm = $('#game').get(0);
if (elm && typeof elm.getContext === 'function') {
  // ok to call the canvas API here
}

Additional pitfalls to watch for:

  • Canvas sizing: the element's width/height attributes set the drawing buffer size; CSS width/height only scale the bitmap and can cause blurring. Use DOM properties or attributes when setting the canvas resolution (see MDN on canvas sizing).
  • Selection checks: confirm the jQuery selection is not empty (check .length) before operating on it, and inspect objects in the console to see whether a jQuery wrapper or a plain element is present.
  • Markup and script order: malformed HTML (for example a head placed inside body) or loading scripts in the wrong place can produce inconsistent DOM timing across browsers. When supporting old IE, ensure any canvas polyfill (excanvas) is loaded early enough to initialize before canvas elements are used.

References: MDN documentation for the canvas API and the HTMLCanvasElement width property:
getContext (MDN)
HTMLCanvasElement.width (MDN)

Recommended Answers

All 4 Replies

Member Avatar for McLaren 
var canvasElm = document.getElementById('game');  
    ctx = canvasElm.getContext('2d'); // 2

Found out that without jqueyr it works. This does not make sence. What is the differecnec between

document.getElementById('game');

and

$('#game')

?

Member Avatar for GliderPilot

When using jQuery, the $('#game') selector selects ALL elements with the game ID and does not give you the actual DOM element to allow you to do this. jQuery exposes the actual DOM elements by numeric index to allow regular DOM/Javascript functions:

var canvasElm = $('#game')[0];

Member Avatar for GliderPilot

Sorry just looked at the rest of your code and noticed you use the cavasElm for other things as well so you'd be better off using the index in your actual getContext call:

ctx = $('#game')[0].getContext('2d');
var canvasElm = $('#game');

or

var canvasElm = $('#game');
ctx = canvasElm[0].getContext('2d'); // 2
Member Avatar for McLaren

thanks. now how to not forget this next time :D but at least I will maybe remember this thread :)

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.