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" > 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 ; } .geeks { font-size : 40px ; color : green ; } #canvas-ele 1 { 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:
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.