Why canvas doesn't work with jQuery selector?

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

<

Answer 1

window.onload = function() {
     var canvas = $('#myCanvas');
     var ctx = canvas[0].getContext('2d'); // not canvas.getContext('2d')
            
     ctx.fillRect(10,50,100,200);
};

in your code you're using canvas.getContext('2d');, but it should be canvas[0].getContext('2d');.

Because getContext('2d') works on DOM element, where var canvas = $('#myCanvas'); return a jQuery object but node a DOM element.

And to retrieve a DOM element (here, canvas element) from jQuery object you need to use canvas[0].

---

In you JavaScript code you're using:

document.getElementById('myCanvas'); which returns a DOM element. So,

var canvas = $('#myCanvas');

canvas[0] and document.getElementById('myCanvas'); are same.

---

You can also change the jQuery code like:

 window.onload = function() {
     var canvas = $('#myCanvas')[0]; // get the element here
     var ctx = canvas.getContext('2d');
            
     ctx.fillRect(10,50,100,200);
};