Canvas not working

Question

What's the problem? It is giving an error.
https://code.sololearn.com/Wp5kyuy1e458/?ref=app

Answer 1

Debug:
var canvas =
$(".canvas")[0].getContext("2d");

Answer 2

Thanks Vasiliy , but can you explain me what's happening in the code you gave me? Thanks

Answer 3

The $ symbol refers to the jQuery library, which in turn refers to the canvas selector, which has many built-in function arguments with its own methods.
We are interested in the html element, which is the first in the list and has a getContext() method that gives us tools for working with canvas.

For the sake of curiosity, check out this code in the playground:
for(let i in $(".canvas")) console.log(i);

Answer 4

Vasiliy omg, the for loop......😱

Answer 5

☺️
Compare how much simpler this code looks in ES6:
<canvas width="200" height="100" id="canvas">
Your brower does not support canvas
</canvas>
onload=()=>{
const c = canvas.getContext("2d");
c.moveTo(0, 0);
c.lineTo(200, 100);
c.stroke();
}