Why do we need the actual HTML object of a canvas for getContext()?

Hello Simon. How are you?

That has to do with the actual return value of both. The pure JS(vanilla JS, as called):

document.getElementsByTagName('canvas')

will return the array of canvas items and not the actual canvas HTML element. As you can test on your own, by simply printing out the return value to a console, like this:

console.log( document.getElementsByTagName('canvas') )

As you'll soon realise, the actual return value is not an HTML element, but rather it's the array, of comma separated canvas items, in which the actual HTML canvas element is found at the first place. So that's why we're using the array literals with an index value of 0:

console.log( document.getElementsByTagName('canvas')[0] )

Because we actualy want to access the first item (which again is the actual canvas HTML element itself) inside of the array returned (array of canvas items).

Simillar thing applies to using jQuery, but only this time, the value returned is also an array that consists of canvas items, but it's more in the jQuery representation of canvas elements. What I mean by that is, as you can see it yourself by runing it through the console, the return value is again the array, but this time it looks a bit different (do to the nature of jQuery):

console.log( $('canvas') );

But then again, the actual HTML element that we want to access is found as the first item inside of the array, so just as by using the pure javascript, you can access the first item inside of an array by using the array literals and an index value of 0 (don't forget that the arrays are 0 indexed), like this:

console.log( $('canvas')[0] );

So coming to a 2nd question, the .getContext() JS method can only be applied to HTML canvas element, not on the array of canvas items. So that's why we need to access the HTML element first, before applying the .getContext() method, as if we didn't we would be applying the method on the array of canvas items (instead of a HTML canvas element itself) which probably would result with an error .

Hope that clears some of the troubles, if there were any. Feel free to hit back at me, if I missed something out or if you're still having some issues with the code. Cheers!