Please explain this code

Question

<canvas id="canvas1" width="400" height="300">
</canvas>
<script>
var c=document.getElementById("canvas1");
var ctx=c.getContext("2d");
ctx.fillRect(20,20,100,100);

especially i want to understand this
var c=document.getElementById("canvas1");
var ctx=c.getContext("2d");
ctx.fillRect(20,20,100,100);

whatvis ctx and
var c=document

Answer 1

It's a way to draw shapes on the screen. You can see in the html canvas tag that it has id="canvas1" so the getElement is 'getting' this tag object. The getContext is getting the 2 dimensional rendering object, and than you ask to create a rectangle at postion x=20 and y=20 size width=100 and height=100. The document object can give you the current page HTML code parsed to objects.

Answer 2

what does ctx means
ctx c =document

Answer 3

u mean ctx is a variable and it is equal to c.getcontext("2d")

Answer 4

thanks

Answer 5

Read again what I wrote, it says clearly the usage of getContext function which its return value assigned as value to ctx.

Answer 6

Correct. var x = 9; initializes a new variable called x and assigns the value 9 to it.