32
Using Canvas in vanilla JavaScript
Canvas is HTML element which you could draw graphic or use it to create some fancy animations.
We need
beginPath()
to set a new path and using MoveTo()
to create a sub-path of beginning of line and LineTo()
to create a sub-path of ending of line. The strokeStyle()
is color of line, the stroke()
to drawing the line 
Similarly, in order to drawing a circle on Canvas, we need
beginPath()
to set a new path, then using the arc()
to create circular arc which require 6 parameters, 1st parameters is x-axis of arc's center, 2nd parameters is y-axis of arc's center, 3rd parameters is radius, 4th parameters is start angle, 5th parameters is end angle (below Math.PI *2 = 360°), the last parameters is determining if drawing the arc counter-clockwise between the start and end angles. The The strokeStyle()
is outline color of circle , the stroke()
to drawing outline of circle
The
fillStyle()
to set to set the color of rectangle and The fillRect()
to create a rectangle 
32