Horje
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:

 


 


Reffered: https://www.geeksforgeeks.org

HTML

Related
SVG Line SVG Line
HTML Canvas Images HTML Canvas Images
Difference Between HTML and SGML Difference Between HTML and SGML
SVG in HTML SVG in HTML
HTML Canvas Coordinates HTML Canvas Coordinates

Type:
 Geek
Category:
 Coding
Sub Category:
 Tutorial
Uploaded by:
 Admin
Views:
 14



 

Horje