JavaScript Draw Line Between Two Points
Last Updated : Mar 11, 2024
IN - JavaScript | Written & Updated By - Pragati
In this article we will show you the solution of JavaScript draw line between two points, we will draw a line between two points on an HTML page using JavaScript.
Here in the example below, we will use the HTML canvas property.
By defining the <canvas> tag, we can draw graphics inside an HTML page.
We must use JavaScript alongside it to draw graphics. We can define the height and width of the canvas and then use coordinates to draw inside it.
We will see one example of drawing a line using JavaScript.
Step By Step Guide On JavaScript Draw Line Between Two Points :-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>javascript draw line between two points</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/water.css@2/out/water.css">
<style>
body{
background-color: aliceblue;
font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
}
h1{
color : rgb(95, 194, 95) ;
font-size: 25px;
font-weight : bolder ;
}
h3{
color : rgb(95, 194, 95) ;
font-size: 20px;
}
</style>
</head>
<body>
<center>
<h1> TALKERSCODE </h1>
<h3> javascript draw line between two points </h3>
</center>
<canvas id="myCanva">
</canvas>
<script>
const myCanva = document.getElementById("myCanva") ;
myCanva.width = window.innerWidth;
myCanva.height = window.innerHeight;
let A = {x:300, y:100} ;
let B = {x:350, y:350} ;
const context = myCanva.getContext("2d") ;
context.beginPath() ;
context.moveTo(A.x, A.y) ;
context.lineTo(B.x, B.y) ;
context.stroke() ;
</script>
</body>
</html>
- writing HTML code <!DOCTYPE html> is used to specify the HTML version that a file is written in.
- The <HTML> tag used to specify the root of an HTML document must then be written. Additionally, add the </html> tag at the end.
- The metadata for the HTML file is contained in the <head> tag, which is closed with the </head> tag.
- The HTML document's <title> is then established using the title tag, which is followed by the < /title> tag.
- We'll use an external CSS file to style the HTML page.
- using <style> tag to add CSS
- create a <Center> tag the add a <h1> tag used to add a heading close it with </h1> tag and add a <h3> tag within it
- at first we have to create an HTML canvas using <canvas> tag and give it an id of ‘myCanvas’
- To write JavaScript, create a <script> tag
- Now use document.getElementById() with the canvas id with a constant const of myCanvas
- Adding the canvas width to window.innerWidth and height to window.innerHeight.
- Now consider two points A and B. Then set both x and y coordinates.
- Set the context using .getContext(“2d”)
- To begin the line, use the method beginPath().
- Using moveTo() attribute to set the starting point and lineTo() attribute to set the line's ending point.
- Lastly, use stroke() to stroke a line from starting point to the ending point.
Conclusion :-
At last, here in conclusion, we can say that with this article’s help, we know How to draw line between two points using JavaScript.
I hope this article on JavaScript draw line between two points helps you and the steps and method mentioned above are easy to follow and implement
About Pragati
