HTML5 Canvas paths

HTML5 Canvas paths are used in HTML5Drawing various types of shapes (lines, circles, polygons, etc.) on the canvas, paths are used in HTML5Drawing various types of shapes on the canvas

HTML5 Canvas paths are a series of points, with drawing instructions between them. For example, there are straight lines between a series of points, or arcs between them.

Paths are used in HTML5Drawing various types of shapes (lines, circles, polygons, etc.) on the canvas is important, therefore understanding this central concept is very important.

to start and end the path - Path

Using2The D context function beginPath() and can start and end the path closePath() as follows:

var canvas = document.getElementById("ex1");
var context = canvas.getContext("2d");context.beginPath();
//　...path drawing operations
context.closePath();

moveTo()

When drawing with paths, you use a virtual 'pen' or 'pointer'. The virtual pointer is always at some point. Use2The D Context function completes the movement of the virtual pointer with moveTo(x, y), as shown below:

context.moveTo(10,10);

This example moves the pointer to the point10,10.

lineTo()

The lineTo() function draws a line from the position of the virtual pointer to the point passed as a parameter to the function. This is an example:

context.beginPath();
context.moveTo(10,10);
context.lineTo(50,50);
context.closePath();

This example moves the pointer to the point10,10and then draws a line from that point to the point50,50.

lineTo() also moves the virtual pointer to the end of that line. Therefore, in the above example, the pointer moves to50,50, while indicating that the canvas draws a line to that point.

stroke() + fill()

at your instruction2By calling2The D context stroke() or fill() does not actually draw any path before drawing the path.2This operation is completed on the D context.
The stroke() function draws the outline of the shape defined by the path operations.
The fill() function fills the shape defined by the path operations.
This is an example of both stroke() and fill() applied to the same shape:

<canvas id="ex1" width="500" height="75" style="border:　1px solid #cccccc;">
HTML5　Canvas not supported
</canvas>
<script>
var canvas = document.getElementById("ex1");var context = canvas.getContext("2d");
context.beginPath();
context.moveTo(10,10);
context.lineTo(60,50);
context.lineTo(110,50);
context.lineTo(10,10);
context.stroke();
context.closePath();
context.beginPath();
context.moveTo(100,10);
context.lineTo(150,50);
context.lineTo(200,50);
context.lineTo(100,10);
context.fill();
context.closePath();</script>

This is the result of running the above code:

LineWidth

You can use lineWidth 2The attribute settings of D context define various pen functions for the width of the lines drawn. This is an example:

context.lineWidth =　10;

The above example sets the line width for all subsequent drawing operations to10pixels.
These are three lines with line widths of1,5and10:

Line width greater than1When the line width is greater than10,10to100,10Draw a line with a line width of10, then the line will actually start from10,5starts and extends to10,15, and then extends horizontally to100,5and100,15From there. Like a rectangle.

Line cap (lineCap)

When drawing lines with a path, you can set the line cap. The line cap defines how the line end is drawn.
The line width is set through lineCap2The attribute setting of D context. It can take the following values:

• butt

• round

• square

The value butt results in a flat line end orthogonal to the line.
The value round produces a rounded line end with a radius equal to half of the line width.
The value square results in drawing a rectangle at the end of the line. The size of the rectangle is line width x line width / 2.
This is a set of examples illustrating line caps. The width of all lines is10. The leftmost line uses the lineCap value butt. The middle line uses the lineCap value round. The rightmost line uses the lineCap value square

It can be a bit difficult to see the difference between the line and the lineCap value of butt and square. Therefore, I created some examples using butt and square lines drawn close to each other so that you can see the differences. Top or left with butt, bottom or right with square.

As you can see, the line square drawn at the end with the lineCap value has an additional rectangle, making the line a little longer.

Line connection (lineJoin)

lineJoin 2The attribute definition of D context determines how to draw the points connecting two lines. The points connecting two lines are called "line join". The lineJoin attribute can have the following values:

• miter

• bevel

• round

These are three code examples for setting line join:

context.lineJoin = "miter";
context.lineJoin = "bevel";
context.lineJoin = "round";

The miter result value leads to drawing straight corners for line connection.
The value of bevel results in drawing straight (line) corners for line connection.
The value of round results in drawing rounded corners for line connection.
These are three examples (starting from the left) miter, bevel, and round used as the value of the lineJoin property.

arc()

2The arc() function in the D context draws an arc on the canvas.

The arc() function adopts6parameters:

• x: The x coordinate of the center point of the arc

• y: The y coordinate of the center point of the arc

• radius: The radius of the arc

• startAngle: The radian angle of the arc's start

• endAngle: The radian angle of the arc's end

• anticlockwise: Set whether the insertion direction is counterclockwise (not clockwise).

This is a code example:

context.lineWidth =　3;
var x =　50;
var y =　50;
var radius =　25;
var startAngle = (Math.PI　/　180)　*　45;
var endAngle = (Math.PI　/　180)　*　90;
var anticlockwise = false;
context.beginPath();
context.arc(x, y, radius, startAngle, endAngle, anticlockwise);
context.stroke();
context.closePath();

This code example draws an arc with its center at50,50, with a radius of25pixels, from45degrees extends to180 degrees. You may have noticed that from 0 to360 degrees will be converted to radians.
This is how the code example looks like when drawn on the canvas:

This is the same code example, but anticlockwise is set to true:

To draw a complete circle, simply set startAngle to 0 and endAngle to2 * Math.PI is equal to (Math.PI / 180) * 360

arcTo()

2The D context has aarcTo()function, but can be usedlineTo()andto mimic its functionarc()Therefore, I will skip it

quadraticCurveTo()

The quadraticCurveTo() function draws a quadratic Bezier curve from one point to another. The curve is controlled by a single control point. This is a code example:

context.lineWidth =　3;
var fromX =　50;
var fromY =　50;
var toX =　100;
var toY =　50;
var cpX =　75;
var cpY =　100;
context.beginPath();
context.moveTo(fromX, fromY);
context.quadraticCurveTo(cpX, cpY, toX, toY);
context.stroke();
context.closePath();

This code example uses control points75,100(cpX, cpY) draws a line from50,50 to100,5The curve of 0. The resulting curve is as follows:

The small dots on the canvas are the control points I drew here. They are usually not part of the curve

bezierCurveTo()

The bezierCurveTo() function draws a cubic Bezier curve from one point to another. The cubic Bezier curve has2control points, while the quadratic Bezier curve only has1control points. This is a code example:

context.lineWidth =　3;
var fromX =　50;
var fromY =　50;
var toX =　300;
var toY =　50;
var cp1X =　100;
var cp1Y =　100;
var cp2X =　250;
var cp2Y =　100;
context.beginPath();
context.moveTo(fromX, fromY);
context.bezierCurveTo(cp1X, cp1Y, cp2X, cp2Y, toX, toY);
context.stroke();
context.closePath();

This code example uses control points100,100(cp1X, cp1Y) and250,100(cp2X, cp2Y) draw from50,50 to300,5The curve of 0. The resulting curve is as follows:

The two small dots on the canvas are the control points I drew, used to show you their positions. They are not drawn as part of a curve.
This is an example using different starting points, ending points, and control points:

context.lineWidth =　3;
var fromX =　50;
var fromY =　50;
var toX =　300;
var toY =　50;
var cp1X =　100;
var cp1Y =　10;
var cp2X =　250;
var cp2Y =　100;
context.beginPath();
context.moveTo(fromX, fromY);
context.bezierCurveTo(cp1X, cp1Y, cp2X, cp2Y, toX, toY);
context.stroke();
context.closePath();

This is the corresponding curve:

Similarly, the two small dots are the explicit rendering control points