How to draw a line on an HTML5 canvas?

To draw HTML5 canvas lines, you need to follow the following steps: 1. Create a canvas element with id and width and height in HTML; 2. Use JavaScript to get the element and call getContext('2d') to get the 2D rendering context; 3. Call beginPath() to start the path, moveTo() set the start point, lineTo() set the end point, and stroke() draw the line; 4. You can customize the line style through attributes such as lineWidth, strokeStyle and lineCap; always remember to call beginPath() before drawing a new line, and the line coordinates are based on the origin of the upper left corner of canvas, and the lines will be displayed after calling stroke().

Drawing a line on an HTML5 canvas is straightforward once you understand the basic steps. You need a <canvas></canvas> element and a bit of JavaScript to define the line's start and end points.

Here's how to do it:

1. Set up the canvas element

First, add a <canvas></canvas> tag in your HTML. Give it an id so you can reference it in JavaScript, and set its width and height .

 <canvas id="myCanvas" width="500"    style="max-width:90%"></canvas>

2. Get the 2D rendering context

In JavaScript, you need to get the canvas context to draw on it. The 2D context provides drawing functions.

 const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');

3. Draw the line

Use the following steps in order:

• Call beginPath() to start a new path.
• Use moveTo(x, y) to set the starting point.
• Use lineTo(x, y) to define the end point.
• Call stroke() to actually render the line.

 ctx.beginPath();
ctx.moveTo(50, 50); // Start point (x=50, y=50)
ctx.lineTo(200, 100); // End point (x=200, y=100)
ctx.stroke(); // Draw the line

Customize the line appearance

You can adjust the line's style using these properties:

• ctx.lineWidth – sets the thickness of the line.
• ctx.strokeStyle – sets the color or gradient.
• ctx.lineCap – defines the shape at the ends of the line ( 'butt' , 'round' , 'square' ).

Example with styling:

 ctx.beginPath();
ctx.moveTo(50, 50);
ctx.lineTo(200, 100);
ctx.lineWidth = 5;
ctx.strokeStyle = 'blue';
ctx.lineCap = 'round';
ctx.stroke();

Notes to remember

• Always call beginPath() before starting a new line to avoid connecting to previous paths.
• The line won't appear until you call stroke() .
• Coordinates are relative to the top-left corner of the canvas (0,0).

That's it. You now have a visible line on your canvas. From here, you can build more complex drawings by combining multiple lines or shapes.

The above is the detailed content of How to draw a line on an HTML5 canvas?. For more information, please follow other related articles on the PHP Chinese website!