How To Draw Circle 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);

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]

Author: Habibullah Qamar

Its me Habib Ullah Qamar working as a Lecturer (Computer Sciences) in Pakistan. I have an MS(M.Phil) degree in computer sciences with specialization in software engineering from Virtual University of Pakistan Lahore. I have an experience of more than 15 years in the filed of Computer Science as a teacher. Blog Writing is my passion. I have many blogs, This one is special made with the aim of providing 100% Free online coaching and training to the students of under-graduate and postgraduate classes. Most of the students enrolled in computer sciences, information technology, software engineering and related disciplines find it difficult to understand core concepts of programming and office automation. They find difficult in understanding and solving their assignments.

Leave a Reply

Your email address will not be published. Required fields are marked *