HTML Canvas Coordinates
Last Updated :
22 Nov, 2023
In this article, we will see the concept of coordinates in HTML Canvas Coordinates. In HTML canvas, the coordinates are very important because, with the understanding of these coordinates, we can easily draw any shapes or lines on the canvas. x-axis coordinates define the coordinates in horizontal and y-axis coordinates define the coordinates in vertical. We can understand this concept with different shapes.
Syntax
element.moveTo(x, y);
element.lineTo(100, 150);
Example 1: In this example, we will understand the concept of coordinates through the shape circle.
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 Circle</title>
<style>
@import url(
body {
font-family: 'Poppins', sans-serif;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.geeks {
font-size: 40px;
color: green;
}
#canvas-ele1 {
border: 5px solid black;
}
</style>
</head>
<body>
<div class="geeks"> GeeksforGeeks</div>
<h1>HTML Canvas Circle </h1>
<canvas height="200"
width="200"
id="canvas-ele1">
</canvas>
<script>
const canvas_element1 =
document.getElementById("canvas-ele1")
const context1 =
canvas_element1.getContext("2d");
context1.beginPath()
context1.beginPath();
context1.arc(90, 100, 50, 0, 2 * Math.PI);
context1.stroke()
</script>
</body>
</html>
|
Output:
Example 2: In this example, we will understand the concept of coordinates through lines.
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>
<style>
@import url(
body {
font-family: 'Poppins', sans-serif;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.canvas-element {
border: 5px solid black;
}
p {
font-size: 50px;
color: green;
}
.flex-class {
display: flex;
}
</style>
</head>
<body>
<p>GeeksforGeeks</p>
<h1>HTML Canvas Lines</h1>
<div class="flex-class"></div>
<canvas height="200"
width="200"
class="canvas-element"
id="c1">
</canvas>
<script>
const canvas1 =
document.getElementById("c1").getContext("2d")
canvas1.beginPath();
canvas1.moveTo(10, 10)
canvas1.lineTo(120, 150)
canvas1.stroke();
</script>
</body>
</html>
|
Output:
Output
Example 3: In this example, we will understand the concept of coordinates through the shape rectangle.
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 Rectangle</title>
<style>
@import url(
body {
font-family: 'Poppins', sans-serif;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.gfg {
font-size: 35px;
color: green;
}
#can-element {
border: 4px solid rgb(115, 23, 23);
}
</style>
</head>
<body>
<div class="gfg">
GeeksforGeeks
</div>
<h1>HTML Canvas Stroke Rectangle</h1>
<canvas height="250"
width="250"
id="can-element">
</canvas>
<script>
let element =
document.getElementById("can-element").getContext("2d")
element.lineWidth = 5;
element.strokeRect(10, 10, 200, 100)
</script>
</body>
</html>
|
Output:
Share your thoughts in the comments
Please Login to comment...