How to use the lineTo() method and lineCap property In HTML Canvas
The ‘lineCap’ property gives your drawings a neat and professional finish and The HTML Canvas ‘lineTo’ method delicately connects points.
Example 2: In this example, we will draw a line with lineTo() with properties.
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 LINE</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(20, 20) canvas1.lineTo(70, 150) canvas1.lineWidth = 3 canvas1.strokeStyle = "blue"; canvas1.stroke(); canvas2.beginPath(); canvas2.moveTo(10, 10) canvas2.lineTo(100, 150) canvas2.lineWidth = 10 canvas2.strokeStyle = "red"canvas2.lineCap = "round"; 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.
Contact Us