HTML Canvas Curves

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

/* styles.css */
@import url(
'https://fonts.googleapis.com/css2?family=Poppins&display=swap');

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

// script.js
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:

Syntax

Attributes

Explore