How to use the lineTo() method and lineWidth property In HTML Canvas
The HTML Canvas ‘lineTo’ method delicately connects points, while the ‘lineWidth’ property subtly refines the strokes, resulting in a seamless fusion of precision and style on the digital canvas.
Example 1: In this example, we will draw a line with lineTo() and give the property lineWidth to define the width of the line.
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>HTML CANVAS LINES</title> <link rel="stylesheet" href="style.css"> </head> <body> <p>w3wiki</p> <h1> HTML CANVAS LINES </h1> <div class="flex-class"></div> <canvas height="200" width="200" class="canvas-element" id="c1"> </canvas> <canvas height="200" width="200" class="canvas-element" id="c2"> </canvas> <script src="script.js"></script> </body> </html> |
CSS
@import url( 'https://fonts.googleapis.com/css2?family=Poppins&display=swap'); body { font-family: 'Poppins', sans-serif; } .canvas-element { border: 2px solid black; } p { font-size: 50px; color: green; } .flex-class { display: flex; flex-wrap: wrap; } |
Javascript
const canvas1 = document.getElementById("c1").getContext("2d") const canvas2 = document.getElementById("c2").getContext("2d") canvas1.beginPath(); canvas1.moveTo(0, 0) canvas1.lineTo(120, 150) canvas1.stroke(); canvas2.beginPath(); canvas2.moveTo(10, 10) canvas2.lineTo(100, 150) canvas2.lineWidth = 10; canvas2.stroke(); |
Output:
HTML Canvas Lines
In this article, we will learn how to make lines in different styles on Canvas in HTML. There are various methods used to draw a line on canvas like beginPath(), moveTo(), lineTo(), and stroke(). There are also various properties like lineWidth, strokeStyle, etc. can be used to give styles to a line with the help of JavaScript.