Question

I have made simple example of using canvas and then I saw that my code doesn’t work when I use jQuery selector.

Examples:

Javascript

    window.onload = function() {
        var canvas = document.getElementById('myCanvas');
        var ctx = canvas.getContext('2d');

        ctx.fillRect(10,50,100,200);
    };

JQuery

   window.onload = function() {
        var canvas = $('#myCanvas');
        var ctx = canvas.getContext('2d');

        ctx.fillRect(10,50,100,200);
    };

So I have no idea why it happened. Is there any limitations about it?

Answer 1

Check this updated version of your jQuery fiddle: http://jsfiddle.net/techfoobar/46VKa/3/

The problem was:

var canvas = $('#myCanvas') gets you a jQuery extended object and not a native DOM element object that has member functions like getContext etc. For this, you need to get the canvas element using var canvas = $('#myCanvas')[0]

NOTE: var canvas = document.getElementById('myCanvas'); is equivalent to var canvas = $('#myCanvas')[0]