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="Beginner"> w3wiki </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; } .Beginner { 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:
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="Beginner"> w3wiki </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; } .Beginner { 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:
Canvas Circle using fill method
Contact Us