Understanding of the path

In the two-dimensional world, a moving point will form a line, and the process of moving this point is the path, which can be straight or curved. The process of drawing the path in canvas is roughly as follows:

1. Create a path start point
2. Create a path from the starting point to the specified point
3. Render the path with strokes

Method used:

//Start a path, or reset the current path
context.beginPath()

//Move the path to the specified point (x, y) in the canvas without creating a line
context.moveTo(x, y)

//Add a new point and create a line from that point to the last specified point in the canvas
context.lineTo(x, y)

//Create arc / curve
//x: X coordinate of the center of the circle.
//y: Y coordinate of the center of the circle.
//r: radius of the circle.
//sAngle: starting angle, in radians. (the three o'clock position of the circle of the arc is 0 degrees.).
//eAngle: end angle in radians.
//counterclockwise: optional. Specifies whether to plot counterclockwise or clockwise. false = clockwise, true = counter clockwise.
context.arc(x, y, r, sAngle, eAngle, counterclockwise);

//Create an arc / curve between two tangents
//x1: X coordinate of the starting point of the arc
//y1: Y coordinate of the starting point of the arc
//x2: X coordinate of the end point of the arc
//y2: Y coordinate of the end point of the arc
//r: radius of arc
context.arcTo(x1, y1, x2, y2, radius)

//Draw defined path
context.stroke()

Draw path

Draw a line

var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext("2d");
ctx.beginPath(); 
ctx.moveTo(50, 50); 
ctx.lineTo(150, 50); 
ctx.stroke();

Draw arc / curve

var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.arc(50, 50, 40, 0, Math.PI / 2, false);
ctx.stroke(); 

var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext("2d");
ctx.beginPath();
ctx. Moveto (20,20); // create start point
ctx.lineto (50,20); // create horizontal line
ctx.arcto (150,20150,70,50); // create arc
ctx.lineto (150150); // create vertical line
ctx.stroke();