Horje
HTML Canvas Circles

HTML Canvas Circles facilitates the arc() method to make a circle where 0 is defined as the start angle and the end angle is 2*PI. The stroke() method is used to draw an outline of the circle and fill() is used to draw a filled circle we can give color with the fillStyle property.

stroke() Method

Creating circles on an HTML canvas using the stroke method to outline the circle. In the .arc() method there are parameters where x defines the x-coordinates of the center of the circle, y defines the y-coordinate of the center of the circle, r defines the radius of the circle, startAngle sets the start angle, and endAngle sets the end angle.

Example: The example shows circles on Canvas using the stroke method.

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>
    <link rel="stylesheet" 
          href="style.css">
</head>
  
<body>
    <div class="geeks">
      GeeksforGeeks
      </div>
    <h1>HTML Canvas Circle </h1>
  
    <canvas height="200" 
            width="200" 
            id="canvas-ele">
      </canvas>
    <script src="script.js"></script>
</body>
  
</html>

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-ele {
    border: 5px solid black;
}

Javascript

const canvas_element =
    document.getElementById("canvas-ele")
const context =
    canvas_element.getContext("2d");
context.beginPath();
context.arc(90, 100, 50, 0, 2 * Math.PI);
context.lineWidth = 3;
context.stroke()

Output:

stci

Circle Canvas using the stroke method

fill() Method

In the .arc() method, there are parameters where x defines the x-coordinate of the center of the circle, y defines the y-coordinate of the center of the circle, r defines the radius of the circle, startAngle sets the start angle, and endAngle sets the end angle. fillStyle defines the color and fill() method used to draw a filled circle.

Example: The example shows circles on Canvas using the fill method.

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>
    <link rel="stylesheet" 
          href="style.css">
</head>
  
<body>
    <div class="geeks">
          GeeksforGeeks
      </div>
    <h1>HTML Canvas Circle </h1>
  
    <canvas height="200" 
            width="200" 
            id="canvas-ele1">
      </canvas>
    <script src="script.js"></script>
</body>
  
</html>

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-ele1 {
    border: 5px solid black;
}

Javascript

const canvas_element1 = 
    document.getElementById("canvas-ele1")
const context1 = 
    canvas_element1.getContext("2d");
  
context1.beginPath()
context1.fillStyle = "red";
context1.beginPath();
context1.arc(90, 100, 50, 0, 2 * Math.PI);
context1.fill()

Output:

fici

Canvas Circle using fill method


 


Reffered: https://www.geeksforgeeks.org

HTML

Related
HTML Canvas Rectangles HTML Canvas Rectangles
SVG Rectangle SVG Rectangle
HTML Canvas Text HTML Canvas Text
SVG Ellipse SVG Ellipse
HTML Colors HTML Colors

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



 

Horje