In this tutorial we will learn how to draw a line in Canvas.

1. Draw Lines in Canvas

A straight line will have the following properties:

• Start position, end position.
• Width of the line.
• Color of the line
• Format the two ends of the line.

Draw a straight line:

To draw a line we have to define the starting position and the ending position, each position will be determined by the distance from the left margin and the distance from the top margin ( trái, trên ) .

 <canvas id="myCanvas" width="400" height="200"></canvas> <script> // Lấy đối tượng Canvas var canvas = document.getElementById('myCanvas'); // Chọn đối tượng vẽ 2D var context = canvas.getContext('2d'); // Tiến hành vẽ context.beginPath(); // Khai báo vẽ đường thẳng mới context.moveTo(10, 10); // Điểm bắt đầu context.lineTo(490, 190); // Điểm kết thúc context.stroke(); // Tiến hành vẽ </script>

In it we have :

• Use beginPath() function to declare a new line
• Use the moveTo(position) function to specify the starting point.
• Use lineTo(position) to specify the end point
• Use the stroke() function to proceed with drawing.

Line width and color:

To select the width of the line, we use the lineWidth property, to select the color we use the strokeStyle property.

 // Lấy đối tượng Canvas var canvas = document.getElementById('myCanvas'); // Chọn đối tượng vẽ 2D var context = canvas.getContext('2d'); // Tiến hành vẽ context.beginPath(); // Khai báo vẽ đường thẳng mới context.moveTo(10, 10); // Điểm bắt đầu context.lineTo(380, 180); // Điểm kết thúc context.lineWidth = 15; // rộng 15px context.strokeStyle = 'blue';// Màu xanh context.stroke(); // Tiến hành vẽ

Result:

Format the two ends of the line:

Format the two ends of a straight line, also known as Line Cap.

To format the line Cap, we use the lineCap property and it will have one of the following three values:

• butt : perpendicular at point, has normal dimension
• round : rounded, longer than usual because the two ends add a rounded segment.
• square : rectangular board, longer than usual due to the two additional ends of the rectangular segment.

 /*CANVAS THỨ NHẤT*/ var canvas = document.getElementById('myCanvas1'); var context = canvas.getContext('2d'); // Tiến hành vẽ context.beginPath(); // Khai báo vẽ đường thẳng mới context.moveTo(10, 10); // Điểm bắt đầu context.lineTo(190, 10); // Điểm kết thúc context.lineWidth = 15; // rộng 15px context.strokeStyle = 'blue';// Màu xanh context.lineCap = 'butt'; context.stroke(); // Tiến hành vẽ /*CANVAS THỨ HAI*/ var canvas = document.getElementById('myCanvas2'); var context = canvas.getContext('2d'); // Tiến hành vẽ context.beginPath(); // Khai báo vẽ đường thẳng mới context.moveTo(10, 10); // Điểm bắt đầu context.lineTo(190, 10); // Điểm kết thúc context.lineWidth = 15; // rộng 15px context.strokeStyle = 'pink';// Màu hồng context.lineCap = 'round'; context.stroke(); // Tiến hành vẽ /*CANVAS THỨ BA*/ var canvas = document.getElementById('myCanvas3'); var context = canvas.getContext('2d'); // Tiến hành vẽ context.beginPath(); // Khai báo vẽ đường thẳng mới context.moveTo(10, 10); // Điểm bắt đầu context.lineTo(190, 10); // Điểm kết thúc context.lineWidth = 15; // rộng 15px context.strokeStyle = 'red';// Màu đỏ context.lineCap = 'square'; context.stroke(); // Tiến hành vẽ

2. Draw consecutive lines in Canvas

The above examples only stop at drawing a line, but you can draw multiple lines in a row using the lineTo() function.

 var canvas = document.getElementById('myCanvas'); var context = canvas.getContext('2d'); // Tiến hành vẽ context.beginPath(); // Khai báo vẽ đường thẳng mới context.moveTo(10, 10); // Điểm bắt đầu context.lineTo(390, 10); // Điểm giữa context.lineTo(20, 190); // Điểm giữa context.lineTo(390, 190); // Điểm kết thúc context.lineWidth = 15; // rộng 15px context.strokeStyle = 'blue';// Màu xanh context.lineCap = 'butt'; context.stroke(); // Tiến hành vẽ

2. Conclusion

So to draw a line, we must define two points at the two ends of the line, each line will have some additional properties such as the width of the line, the color of the line and the format of the two ends of the line.

This lesson ends here, the next one we learn how to draw Curves.