HTML Canvas Curves
Last Updated :
29 Nov, 2023
HTML Canvas Curves facilitate the arc() method for making a circle or a part of a circle on the canvas. There are various attributes in the arc(x, y, r, s, e) method such as x and y defining the coordinates of the center of the circle, r defining the radius, s defining the start angle, and e defining the end angle.
Syntax
context.arc(90, 100, 50, 0, Math.PI);
Attributes
- x: It defines the coordinates of the center of the circle
- y: It defines the coordinates of the center of the circle
- r: It defines the radius of the circle
- beginPath(): This method is used to begin the path
- For making a circle start with 0 and end with 2*Math.PI
Example: In this example, we will see the implementation of the above method with an example.
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 Curve</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1 class="geeks">GeeksforGeeks </h1>
<h3>HTML Canvas Curve</h3>
<div class="box">
<canvas height="200"
width="200"
id="canvas1"
class="canvas-border">
</canvas>
<canvas height="200"
width="200"
id="canvas2"
class="canvas-border">
</canvas>
<canvas height="200"
width="200"
id="canvas3"
class="canvas-border">
</canvas>
<canvas height="200"
width="200"
id="canvas4"
class="canvas-border">
</canvas>
</div>
<script src="script.js"></script>
</body>
</html>
|
CSS
@import url(
body {
font-family: 'Poppins', sans-serif;
}
.geeks {
font-size: 40px;
color: green;
}
.canvas-border {
border: 5px solid black;
}
.box {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
|
Javascript
const canvas1 = document
.getElementById("canvas1")
const context1 = canvas1
.getContext("2d");
context1.beginPath();
context1.strokeStyle = "green";
context1.arc(90, 100, 50, 0, Math.PI);
context1.lineWidth = 3;
context1.stroke()
const canvas2 = document
.getElementById("canvas2")
const context2 = canvas2
.getContext("2d");
context2.beginPath();
context2.strokeStyle = "red";
context2.arc(90, 100, 50, 0, 0.5 * Math.PI);
context2.lineWidth = 3;
context2.stroke()
const canvas3 = document
.getElementById("canvas3")
const context3 = canvas3
.getContext("2d");
context3.beginPath();
context3.strokeStyle = "blue";
context3.arc(90, 100, 50, 0, 1.5 * Math.PI);
context3.lineWidth = 3;
context3.stroke()
const canvas4 = document
.getElementById("canvas4")
const context4 = canvas4
.getContext("2d");
context4.beginPath();
context4.strokeStyle = "blueviolet";
context4.arc(90, 100, 50, 0, Math.PI);
context4.lineWidth = 3;
context4.stroke();
|
Output:
Share your thoughts in the comments
Please Login to comment...