The line drawing technique is a straightforward and uncomplicated approach that utilizes the canvas feature on a web page through JavaScript.
The Canvas element is utilized for creating lines using various JavaScript properties and functions. Through JavaScript, one can define the line's thickness, style, visibility, and hue.
JavaScript line drawing instructions
You can create a line on a canvas by using the procedures below:
- Start by invoking the beginPath function to generate a new line.
- Second, call the moveTo function to move the drawing cursor to the position (x,y) without drawing a line (x, y).
- Finally, call the lineTo(x,y) method to draw a line from the previous point to that location.
Syntax
The syntax provided below illustrates how to render a line on the canvas.
Assign the canvas variable for the purpose of rendering the line. Utilize the line width attribute of the 2D rendering context to define the thickness of the line.
const ct_var1 = canvas_var.getContext('2d');
- Set the line color.
- Initiate the line drawing process by utilizing the JavaScript method.
- Define the stroke line. Following the utilization of the lineTo(x,y) function, you can invoke the stroke method to apply a stroke to the line based on the defined stroke style.
- Invoking the stroke method
ct_var1.strokeStyle = 'black';</p>
<ul class="points">
<li>Establish the line width</li>
</ul>
<div class="codeblock"><textarea name="code" class="xml">
ct_var1.lineWidth = 4;
ct_var1.beginPath();
ct_var1.moveTo(10, 10);
ct_var1.lineTo(100, 100);
ct_var1.stroke;
Description
lineTo(x,y) is a method.
- Both positive and negative arguments can be passed to the lineTo(x,y) method.
- The lineTo(x,y) function draws the line from the beginning point to the right if x is positive. If not, it traces a line from the starting position to the left.
- The lineTo(x,y) method creates a line from the beginning point down the y-axis if the value of y is positive. In all other cases, it traces a line from the origin to the y-axis.
Examples
The illustrations showcase both single and multiple lines featuring various angles and styles.
Example 1: The subsequent illustration demonstrates a fundamental horizontal line on the canvas. The canvas is presented in a light grey hue, while the line is depicted in black.
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "UTF-8">
<meta name = "viewport" content = "width=device-width, initial-scale=1.0">
<title> Drawing a Horizontal Line Using JavaScript </title>
</head>
<body>
<h3> Drawing a Horizontal Line Using JavaScript </h3>
<canvas id = "canvas_data" height = "200" width = "300" style = "background-color:lightgrey;">
</canvas>
<script>
function draw_line() {
const canvas_var = document.querySelector('#canvas_data');
if (!canvas_var.getContext) {
return;
}
const ct_var = canvas_var.getContext('2d');
// set line stroke, line color, and line width
ct_var.strokeStyle = 'black';
ct_var.lineWidth = 5;
// draw a black line horizontally
ct_var.beginPath();
//set horizontal line and its movement
ct_var.moveTo(100, 100);
//set the line size on the canvas
ct_var.lineTo(200, 100);
ct_var.stroke();
}
draw_line();
</script>
</body>
</html>
Output:
The illustration depicts a solid black line extending across the canvas.
Example 2: The subsequent illustration demonstrates a fundamental sliding line on the canvas. The canvas is rendered in a grey hue, while the line is depicted in a vibrant yellow shade.
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "UTF-8">
<meta name = "viewport" content = "width=device-width, initial-scale=1.0">
<title> Drawing a Horizontal Line Using JavaScript </title>
</head>
<body>
<h3> Drawing a Sliding Line Using JavaScript </h3>
<canvas id = "canvas_data" height = "150" width = "200" style = "background-color:grey;">
</canvas>
<script>
function draw_line() {
const canvas_var = document.querySelector('#canvas_data');
if (!canvas_var.getContext) {
return;
}
const ct_var = canvas_var.getContext('2d');
// set line stroke, line color, and line width
ct_var.strokeStyle = 'yellow';
ct_var.lineWidth = 5;
// draw a black line horizontally
ct_var.beginPath();
//set horizontal line and its movement
ct_var.moveTo(10, 10);
//set the line size on the canvas
ct_var.lineTo(100, 100);
ct_var.stroke();
}
draw_line();
</script>
</body>
</html>
Output:
The image shows the black sliding on the canvas.
Example 3: The subsequent illustration demonstrates a fundamental vertical line positioned on the canvas. The canvas is rendered in a grey hue, while the line is depicted in an orange shade.
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "UTF-8">
<meta name = "viewport" content = "width=device-width, initial-scale=1.0">
<title> Drawing a Vertical Line Using JavaScript </title>
</head>
<body>
<h3> Drawing a Horizontal Line Using JavaScript </h3>
<canvas id = "canvas_data" height = "150" width = "200" style = "background-color:#F8F8FF;">
</canvas>
<script>
function draw_line() {
const canvas_var = document.querySelector('#canvas_data');
if (!canvas_var.getContext) {
return;
}
const ct_var = canvas_var.getContext('2d');
// set line stroke, line color, and line width
ct_var.strokeStyle = 'orange';
ct_var.lineWidth = 5;
// draw a black line horizontally
ct_var.beginPath();
//set horizontal line and its movement
ct_var.moveTo(100, 10);
//set the line size on the canvas
ct_var.lineTo(100, 100);
ct_var.stroke();
}
draw_line();
</script>
</body>
</html>
Output
The image shows the vertical line on the canvas.
Example 4: The subsequent example illustrates a variety of lines featuring distinct colors and styles on the canvas. The canvas itself is rendered in a grey hue, while the lines are depicted in an array of colors. It is evident that the lines vary in size and are positioned differently across the canvas.
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "UTF-8">
<meta name = "viewport" content = "width=device-width, initial-scale=1.0">
<title> Drawing a Horizontal Line Using JavaScript </title>
</head>
<body>
<h3> Drawing a Various Lines Using JavaScript </h3>
<canvas id = "canvas_data" height = "150" width = "200" style = "background-color:#F8F8FF;">
</canvas>
<script>
function draw_line() {
const canvas_var = document.querySelector('#canvas_data');
if (!canvas_var.getContext) {
return;
}
const ct_var = canvas_var.getContext('2d');
// set line stroke, line color, and line width
ct_var.strokeStyle = 'orange';
ct_var.lineWidth = 5;
// draw a black line horizontally
ct_var.beginPath();
//set horizontal line and its movement
ct_var.moveTo(100, 10);
//set the line size on the canvas
ct_var.lineTo(100, 100);
ct_var.stroke();
//sliding line
const ct_var1 = canvas_var.getContext('2d');
ct_var1.strokeStyle = 'black';
ct_var1.lineWidth = 4;
// draw a black line horizontally
ct_var1.beginPath();
//set horizontal line and its movement
ct_var1.moveTo(10, 10);
ct_var1.lineTo(100, 100);
ct_var1.stroke();
const ct_var2 = canvas_var.getContext('2d');
ct_var2.strokeStyle = 'red';
ct_var2.lineWidth = 5;
// draw a black line horizontally
ct_var2.beginPath();
//set horizontal line and its movement
ct_var2.moveTo(10, 100);
ct_var2.lineTo(100, 100);
ct_var2.stroke();
}
draw_line();
</script>
</body>
</html>
Output
The image shows the multiple lines on the canvas.
Example 5: In this instance, we demonstrate the fundamental line drawn on the canvas along with the parameters used in the function. The canvas is rendered in a grey hue, while the line is depicted in an orange shade. It is possible to utilize either a single function or multiple functions with the provided input argument. In this case, the function employs both positive and negative start and end coordinates for the stroke line.
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "UTF-8">
<meta name = "viewport" content = "width=device-width, initial-scale=1.0">
<title> Drawing a Horizontal Line with argument Using JavaScript </title>
</head>
<body>
<h3> Drawing a Lines with JavaScript Function </h3>
<canvas id = "canvas_data" height = "150" width = "200" style = "background-color: black;">
</canvas>
<script>
function drawLine_function(ctx_var, x1, y1, x2,y2, stroke, width) {
// start a new path on the line
ctx_var.beginPath();
// Use the cursor from the start point of the line
ctx_var.moveTo(x1, y1);
// draw a line from the start cursor position to the given co-ordination
ctx_var.lineTo(x2, y2);
// set the color of the line
ctx_var.strokeStyle = stroke;
// set line Widht as per requirement
ctx_var.lineWidth = width;
// add a stroke() method of the line to the end function
ctx_var.stroke();
}
let canvas_var = document.getElementById('canvas_data'),
ctx_var = canvas_var.getContext('2d');
drawLine_function(ctx_var, 100, 100, 350, 300, 'Aqua', 4);
drawLine_function(ctx_var, 100, 100, 150, -100, 'pink', 5);
drawLine_function(ctx_var, 100, 100, -100, -100, 'yellow', 6);
drawLine_function(ctx_var, 100, 100, -50, 200, 'orange', 8);
</script>
</body>
</html>
Output
The illustration depicts a basic single line drawn on the canvas.
Example 6: In this instance, the subsequent illustration demonstrates a variety of lines rendered on the canvas utilizing the function's parameters. The canvas features an array of colors, varying sizes, and distinct line formats. In this case, the function's input argument utilizes a consistent starting point while employing different coordinate points to collectively establish multiple lines.
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "UTF-8">
<meta name = "viewport" content = "width=device-width, initial-scale=1.0">
<title> Drawing a Horizontal Line with argument Using JavaScript </title>
</head>
<body>
<h3> Drawing a Lines with JavaScript Function </h3>
<canvas id = "canvas_data" height = "150" width = "200" style = "background-color: black;">
</canvas>
<script>
function drawLine_function(ctx_var, x1, y1, x2,y2, stroke, width) {
// start a new path on the line
ctx_var.beginPath();
// Use the cursor from the start point of the line
ctx_var.moveTo(x1, y1);
// draw a line from the start cursor position to the given co-ordination
ctx_var.lineTo(x2, y2);
// set the color of the line
ctx_var.strokeStyle = stroke;
// set line Widht
ctx_var.lineWidth = width;
// add a stroke() method of the line to the end function
ctx_var.stroke();
}
let canvas_var = document.getElementById('canvas_data'),
ctx_var = canvas_var.getContext('2d');
drawLine_function(ctx_var, 10, 100, 150, 100, 'Aqua', 4);
drawLine_function(ctx_var, 20, 10, 150, 100, 'yellow', 4);
drawLine_function(ctx_var, 150, 10, 150, 100, 'orange', 4);
</script>
</body>
</html>
Output
The image shows the multiple lines on the canvas.
Example 7: The example below illustrates the rendering of lines on the canvas utilizing the parameters provided in the function. The canvas displays a variety of colors, distinct sizes, and various line formats. We can apply different widths while maintaining the same starting point for the lines on the canvas. The different coordinates for the lines are utilized on the page to determine the positioning of the lines.
<!DOCTYPE html>
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "UTF-8">
<meta name = "viewport" content = "width=device-width, initial-scale=1.0">
<title> Drawing a Horizontal Line with argument Using JavaScript </title>
</head>
<body>
<h3> Drawing Multiple Lines with JavaScript Function </h3>
<canvas id = "canvas_data" height = "150" width = "200" style = "background-color: black;">
</canvas>
<script>
function drawLine_function(ctx_var, x1, y1, x2,y2, stroke, width) {
// start a new path on the line
ctx_var.beginPath();
// Use the cursor from the start point of the line
ctx_var.moveTo(x1, y1);
// draw a line from the start cursor position to the given co-ordination
ctx_var.lineTo(x2, y2);
// set color of the line
ctx_var.strokeStyle = stroke;
// set line Widht
ctx_var.lineWidth = width;
// add a stroke() method of the line to the end function
ctx_var.stroke();
}
let canvas_var = document.getElementById('canvas_data'),
ctx_var = canvas_var.getContext('2d');
drawLine_function(ctx_var, 10, 100, 350, 300, 'Aqua', 4);
drawLine_function(ctx_var, 10, 100, 600, 10, 'pink', 5);
drawLine_function(ctx_var, 10, 100, 100, 100, 'yellow', 6);
drawLine_function(ctx_var, 10, 100, 50, 200, 'orange', 8);
</script>
</body>
</html>
Output
The illustration displays several lines varying in thickness and positioning on the canvas.
Conclusion
Utilizing JavaScript to draw lines is a straightforward and user-friendly approach for both users and developers alike. The canvas serves as the medium through which lines can be rendered in various dimensions, forms, and locations. By manipulating different sizes and coordinates, we can produce lines with varying widths to construct specific shapes.