ประกาศ tag canvas ก่อน แล้วค่อยเขียน javascript
https://www.w3schools.com/html/html5_canvas.asp
https://devahoy.com/posts/html5-canvas-tutorial/

แกน x, y 
- ระบบ Cartesian coordinate system กำหนดจุด x, y จากการลากเส้นแกนทั้งสองตัดกันเป็นมุมฉาก
- ระบบ Canvas coordinate system กำหนดจุด x, y คือ มุมบนซ้าย

context.arc(x,y,r,sAngle,eAngle,counterclockwise);

Parameter	Description	
x	The x-coordinate of the center of the circle	
y	The y-coordinate of the center of the circle	
r	The radius of the circle	
sAngle	The starting angle, in radians (0 is at the 3 o'clock position of the arc's circle)	
eAngle	The ending angle, in radians	
counterclockwise	Optional. Specifies whether the drawing should be counterclockwise or clockwise. 
False is default, and indicates clockwise, while true indicates counter-clockwise.