# HTML Canvas Curves

Last Updated : 29 Nov, 2023

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

 ` ` `<``html` `lang``=``"en"``> ` ` `  `<``head``> ` `    ``<``meta` `charset``=``"UTF-8"``> ` `    ``<``meta` `name``=``"viewport"` `          ``content="``width``=``device``-width, ` `                   ``initial-scale``=``1``.0"> ` `    ``<``title``>HTML CANVAS Curve ` `    ``<``link` `rel``=``"stylesheet"` `href``=``"style.css"``> ` ` ` ` `  `<``body``> ` ` `  `    ``<``h1` `class``=``"geeks"``>GeeksforGeeks ` `    ``<``h3``>HTML Canvas Curve ` `    ``<``div` `class``=``"box"``> ` `        ``<``canvas` `height``=``"200"`  `                ``width``=``"200"`  `                ``id``=``"canvas1"`  `                ``class``=``"canvas-border"``> ` `          `` ` `        ``<``canvas` `height``=``"200"`  `                ``width``=``"200"`  `                ``id``=``"canvas2"`  `                ``class``=``"canvas-border"``> ` `          `` ` `        ``<``canvas` `height``=``"200"`  `                ``width``=``"200"`  `                ``id``=``"canvas3"`  `                ``class``=``"canvas-border"``> ` `          `` ` `        ``<``canvas` `height``=``"200"`  `                ``width``=``"200"`  `                ``id``=``"canvas4"` `                ``class``=``"canvas-border"``> ` `          `` ` `    `` ` `    ``<``script` `src``=``"script.js"``> ` ` `  ` ` ` `  ``

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

Previous
Next