|
HTML Canvas Shapes facilitate different shapes, i.e., rectangles, triangles, lines, arcs, and curves to draw on the HTML Canvas.
For instance, to draw the line in the Canvas, the path will be used that implements the beginPath() method. Setting the path’s starting point is achieved with moveTo(), while lineTo() establishes the endpoint. To render the line, we use the stroke() method, with the default stroke color being black.
Syntax
context.beginPath();
context.moveTo();
context.lineTo();
context.stroke();
Methods
- beginPath(): This method is used to define the new path.
- moveTo(x,y): This method defines the starting point.
- lineTo(x,y): This method defines the endpoint. Here, x specifies the x-axis coordinates and y specifies the y-axis coordinates of the line’s endpoint.
- stroke(): This method is used to draw the line. The stroke color is black which is a default property.
Example: In this example, we will implement a code to draw canvas shapes with default property.
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 Shapes</title>
<style>
@import url(
.text-logo {
font-size: 40px;
color: green;
}
.canvas-element {
border: 1px solid black;
}
body {
font-family: 'Poppins', sans-serif;
}
body {
font-family: 'Poppins', sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.main {
background-color: #fff;
border-radius: 15px;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
padding: 20px;
transition: transform 0.2s;
width: 600px;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.main:hover {
transform: scale(1.05);
}
</style>
</head>
<body>
<div class="main">
<p class="text-logo">
GeeksforGeeks
</p>
<h1>
HTML Canvas Shapes
</h1>
<canvas id="canvas-id"
width="200"
height="200"
class="canvas-element">
</canvas>
</div>
<script>
const element =
document.getElementById("canvas-id").getContext("2d")
// Define a new path
element.beginPath();
// Start point
element.moveTo(100, 10);
element.lineTo(180, 10);
element.lineTo(180, 150);
element.lineTo(20, 150);
element.lineTo(100, 100);
element.lineTo(100, 10);
// Draw the lines
element.stroke();
</script>
</body>
</html>
|
Output:
Example: In this example, we will implement a code to draw canvas shapes with the strokeStyle property.
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 Shapes</title>
<style>
@import url(
.text-logo {
font-size: 40px;
color: green;
}
.canvas-element {
border: 1px solid black;
}
body {
font-family: 'Poppins', sans-serif;
}
body {
font-family: 'Poppins', sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.main {
background-color: #fff;
border-radius: 15px;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
padding: 20px;
transition: transform 0.2s;
width: 600px;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.main:hover {
transform: scale(1.05);
}
</style>
</head>
<body>
<div class="main">
<p class="text-logo">
GeeksforGeeks
</p>
<h1>
HTML Canvas Shapes
</h1>
<canvas id="canvas-id"
width="200"
height="200"
class="canvas-element">
</canvas>
</div>
<script>
const element =
document.getElementById("canvas-id").getContext("2d")
// Define a new path
element.beginPath();
// Start point
element.moveTo(100, 10);
element.lineTo(180, 10);
element.lineTo(180, 150);
element.lineTo(20, 150);
element.lineTo(100, 100);
element.lineTo(100, 10);
element.strokeStyle = "blueviolet";
// Draw the lines
element.stroke();
</script>
</body>
</html>
|
Output:
|
HTML Canvas Drawing
HTML Canvas Curves
SVG Line
HTML Canvas Images
Difference Between HTML and SGML