We are using arc() method for drawing a circle on HTML5 Canvas which take almost five arguments and have structure of arc like (stop Angle, Angle Start(Start Angle),y,radius,x);
HTML5 Canvas Circle Tutorial
How to Draw Circle using HTML5 Canvas
We are using arc() method for drawing a circle on HTML5 Canvas which take almost five arguments and have structure of arc like (stop Angle, Angle Start(Start Angle),y,radius,x);
In this Y relates to the y coordinate of the circle where as x is reffered to the x coordinate of the center of the circle.
The third argument in this method is radius.It is the radius of our desired circle which
we want to draw on Canvas.startAngle is the starting point of circle,it is actually
starting point of arc.stopAngle is the closing angle of arc,It is the angle where circle
will meet its starting angle.Angle are measured in anticlockwise direction.for example
if we want to draw a circle of radius 50 whose centre point has coordinate x and
y as(200,200) and startAngle is 0 and stop angle is 360.
the code for circle will be as given below.
HTML5 Canvas Cirlce Code
context.circle(200,200,50,0,2*Math.PI);
Angles are measured in radians.
There may be two kind of circle,circle filled with background color and circle with
outline.For filled circle code will be
HTML5Canvas filled CircleCode
context.fillStyle =color-value;
context.fill();
HTML5Canvas empty circleCode
For empty or outlined circle the code will be as :
context.strokeStyle =color-value;
context.fill();
we can set width of outline by lineWidth property of Context.
The code will be
context.lineWidth =value-in-pixels;
if we want to draw a circle of radius 100, having center at point(300,200),startAngle 0 and
close angle 360 degree.The fill color for surface of circle is green and outline color is blue with
width of outline 5pixel.
code will be .
context.beginPath();
context.arc(300,200,100,0,2*Math.PI);
context.fillStyle='green';
context.fill();
context.lineWidth =5;
context.strokeStyle ='#0000ff';
context.stroke();
==================================================
HTML5CanvasCircle complete code example
———————————————-
<!DOCTYPE html>
<html>
<head>
<title>Drawing </title>
</head>
<body>
<canvas id ="myCanvas" width ="600" height ="400">
style="border: 1px solid blue;"
</canvas>
<script>
var canvas = document.getElementById("myCanvas");
var context =canvas.getContext('2d');
context.beginPath();
context.arc(300,200,100,0,2*Math.PI);
context.fillStyle='green';
context.fill();
context.lineWidth =5;
context.strokeStyle ='#0000ff';
context.stroke();
</script>
</body>
</html>
————————————————————————
Save above code as
html5canvas-circle.html
open the file in browser and you will see the out put
in browswer.
——————————————————————
=======================================
Live code demo HTML5Canvas on Codepen
========================================
[codepen_embed height=500 theme_id=1 slug_hash=’qEjdZy’ user=’aslamwaqar’ default_tab=’html’
animations=’run’]
[/codepen_embed]
