Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Draw a Circle with Arc in HTML5
The arc() is a method of the canvas 2D API.The arc() method allows you to draw a circular arc.
Syntax
Following is the syntax to draw a circle with arc() in HTML5
arc(x, y, radius, startAngle, endAngle) arc(x, y, radius, startAngle, endAngle, counterclockwise)
The arc() method generates a circular arc with a radius of radius, centred at (x, y). The path moves in the counter clockwise direction and begins at startAngle and finishes at endAngle (defaulting to clockwise).
Parameters
Following are the parameters of this method ?
X ? The arc's center's horizontal coordinate.
Y ? The arc's center's vertical coordinate.
Radius ? The arc's diameter. It must be uplifting.
StartAngle ? The positive x-axis-measured angle in radians at which the arc begins.
EndAngle ? The arc's final angle, expressed in radians and measured in relation to the positive x-axis
Counterclockwise ? A potential Boolean indicator. Draws the arc anticlockwise between the start and finish angles if the condition is true default value of this is false (clockwise).
For getting the better understanding of how to draw a circle with arc in HTML5 lets look into the following examples.
Example 1
In the following example we are using arc() to draw a circle on our canvas.for getting full circle we have to mention start angle as 0,end angle as 360.
<!DOCTYPE html> <html> <body> <canvas id="Varma" width="300" height="150"></canvas> <script> var c = document.getElementById("Varma"); var ctx = c.getContext("2d"); ctx.beginPath(); ctx.arc(100, 75, 50, 0, 360); ctx.stroke(); </script> </body> </html>
On executing the above script, it will generate the output displaying the circle drawn with ctx.arc on the webpage.
Example 2
Following is another example for this ?
<!DOCTYPE html> <html> <head> <title>HTML Canvas</title> <head> <body> <canvas id="newCanvas" width="300" height="150" style="border:1px solid #000000;"></canvas> <script> var c = document.getElementById("newCanvas"); var ctxt = c.getContext("2d"); ctxt.beginPath(); ctxt.arc(100,75,50,0,2*Math.PI); ctxt.stroke(); </script> </body> </html>
2K+ Views
