# Drawing Pie Chart in HTML Canvas

**Foreword: In this article I explain how a pie chart can be drawn using the HTML canvas. No image is involved. **

By: Chrysanthus Date Published: 21 Apr 2016

### Introduction

**Example**

You will draw the following figure (pie chart):

**Description of Pie Chart**

People use different types of browsers. Internet Explorer is used by 25% of all web users. Opera is used by 4% of all web users. Safari is used by 6% of all web users. Chrome is used by 25% of all web users. Firefox is used by 40% of all web users. Well, before we continue, know that these percentages are fictitious (they are not real).

The color of the sector for Internet Explorer is orange. The color of the sector for Opera is chocolate. The color of the sector for Safari is purple. The color of the sector for Chrome is green. The color of the sector for Firefox is khaki.

**Calculating the Angles**

A complete circle is 360 degrees round, which is also 6.28 radians round. Each sector has an angle and all angles are calculated in the same way.

The angle for Internet Explorer is calculated as follows:

25/100 x 360 = 90 degrees

and in radians, it is:

25/100 x 6.28 = 1.57 radians

The angle for Opera is calculated as follows:

4/100 x 360 = 14.4 degrees

and in radians, it is:

4/100 x 6.28 = 0.25 radians

The angle for Safari is calculated as follows:

6/100 x 360 = 21.6 degrees

and in radians, it is:

6/100 x 6.28 = 0.38 radians

The angle for Safari is calculated as follows:

25/100 x 360 = 90 degrees

and in radians, it is:

25/100 x 6.28 = 1.57 radians

The angle for Firefox is calculated as follows:

40/100 x 360 = 144 degrees

and in radians, it is:

40/100 x 360 = 2.51 radians

**Drawing the Pie Chart**

Before the code draws, you need to obtain the reference to the HTML canvas element and then the reference to the context object. You will obtain them as follows:

<canvas id="C1" width="300" height="260">

</canvas>

<script type="text/ECMAScript">

cv = document.getElementById('C1');

cntxt = cv.getContext('2d');

</script>

The syntax for the main function provided by HTML Canvas 2D Context to draw the circle is:

context . arc(x, y, radius, startAngle, endAngle [, counterclockwise ] )

where (x,y) are the coordinates of the center of the circle. If you want the drawing to move counterclockwise, then the word, counterclockwise has to be present. The angles are in radians. This function will draw an arc, and will connect the arc with a straight line to the center of the circle.

Remember, the top-left corner of the canvas has coordinates, (0,0). x value increases to the right and y value increases downward. The coordinates of any point in the canvas is given in general terms as (x,y). The different values for x or y indicates the position of the corresponding pixel. A pixel is the smallest dot on the screen.

You will draw the pie chart, sector by sector. The first sector begins from the line, which begins from the center of the circle, and goes horizontally, until it meets the edge of the circle. The sector moves anticlockwise until it covers 90 degree. The first sector is for Internet Explorer.

The coordinates for the center of the circle are (100, 140).

Ignoring the if-construct, the code for the first sector is:

if (cv.getContext)

{

cntxt = cv.getContext('2d');

cntxt.beginPath();

cntxt.moveTo(100,140);

cntxt.arc(100,140, 100, 0, -1.57, 'counterclockwise');

cntxt.closePath();

cntxt.fillStyle = "orange";

cntxt.fill();

}

The first statement of code obtains the reference to the context object. The next statement begins the subpath. The statement after moves the context object to the center of the circle (100,140). The statement following draws an arc joining it to the center of the circle with a straight line. The next statement closes the subpath with a line to the center of the circle, and forms a sector. The statement after gives the sector its color. And the last statement fills the sector with the color.

The drawing moves anticlockwise. Since the drawing is moving anticlockwise the angle is given as –1.57 and not 1.57.

The drawing continues anticlockwise for the rest of the sectors. For the next sector, the start angle will be -1.57 and the end angle will be -1.82 = -(1.57 + .25). For the sector after, the start angle will be -1.82 and the end angle will be 2.2 = –(1.85 + 0.38). It continues like that till 6.28 radians, which is 360 degrees, is attained.

**How where the Percentages gotten?**

In practice, you will be required to draw a pie chart from numbers of people and not directly from percentages. You will have to convert the numbers into percentages, before converting to angles.

Consider a city of a total of 10,000 people. 2500 people use Internet Explorer; 400 use Opera; 600 use Safari; 2500 use Chrome; and 4000 use Firefox. The percentages will be calculated as follows:

Internet Explorer:

25000/10000 x 100 = 25%

Opera:

400/10000 x 100 = 4%

Safari:

6000/10000 x 100 = 6%

Chrome:

2500/10000 x 100 = 25%

Firefox:

4000/10000 x 100 = 40%

From the percentages, you can go ahead to calculate the angles, in radians.

**Complete Code**

The complete code for the above pie chart is:

<!DOCTYPE HTML>

<html>

<head>

<title>Illustration</title>

</head>

<body>

<figure style="width:308px; border:2px solid red; display:inline-block">

<figcaption><strong>Browser Usage</strong></figcaption>

<canvas id="C1" width="300" height="260">

</canvas>

<figure/>

<script type="text/ECMAScript">

cv = document.getElementById('C1');

if (cv.getContext)

{

cntxt = cv.getContext('2d');

cntxt.beginPath();

cntxt.moveTo(100,140);

cntxt.arc(100,140, 100, 0, -1.57, 'counterclockwise');

cntxt.closePath();

cntxt.fillStyle = "orange";

cntxt.fill();

cntxt.beginPath();

cntxt.moveTo(100,140);

cntxt.arc(100,140, 100, -1.57, -1.82, 'counterclockwise');

cntxt.closePath();

cntxt.fillStyle = "chocolate";

cntxt.fill();

cntxt.beginPath();

cntxt.moveTo(100,140);

cntxt.arc(100,140, 100, -1.82, -2.2, 'counterclockwise');

cntxt.closePath();

cntxt.fillStyle = "purple";

cntxt.fill();

cntxt.beginPath();

cntxt.moveTo(100,140);

cntxt.arc(100,140, 100, -2.2, -3.77, 'counterclockwise');

cntxt.closePath();

cntxt.fillStyle = "green";

cntxt.fill();

cntxt.beginPath();

cntxt.moveTo(100,140);

cntxt.arc(100,140, 100, -3.77, 6.28, 'counterclockwise');

cntxt.closePath();

cntxt.fillStyle = "khaki";

cntxt.fill();

cntxt.beginPath();

cntxt.moveTo(230,62);

cntxt.lineWidth = 6;

cntxt.strokeStyle = "orange";

cntxt.lineTo(236,62);

cntxt.stroke();

cntxt.fillStyle = "black";

cntxt.fillText("Internet Expl.", 239,65);

cntxt.beginPath();

cntxt.moveTo(230,72);

cntxt.lineWidth = 6;

cntxt.strokeStyle = "chocolate";

cntxt.lineTo(236,72);

cntxt.stroke();

cntxt.fillStyle = "black";

cntxt.fillText("Opera", 239,75);

cntxt.beginPath();

cntxt.moveTo(230,82);

cntxt.lineWidth = 6;

cntxt.strokeStyle = "purple";

cntxt.lineTo(236,82);

cntxt.stroke();

cntxt.fillStyle = "black";

cntxt.fillText("Safari", 239,85);

cntxt.beginPath();

cntxt.moveTo(230,92);

cntxt.lineWidth = 6;

cntxt.strokeStyle = "green";

cntxt.lineTo(236,92);

cntxt.stroke();

cntxt.fillStyle = "black";

cntxt.fillText("Chrome", 239,95);

cntxt.beginPath();

cntxt.moveTo(230,102);

cntxt.lineWidth = 6;

cntxt.strokeStyle = "khaki";

cntxt.lineTo(236,102);

cntxt.stroke();

cntxt.fillStyle = "black";

cntxt.fillText("Firefox", 239,105);

}

</script>

</body>

</html>

Chrys

### Related Links

Surrounding a Web Page Image with TextAdvantages and Disadvantages of HTML Table for Layout

Layout Without Frames for the Web Page

Designing Iconic Hyperlink for a Web Page

A Suitable RWD Layout for Smartphones and Desktop

Knowing the Resolutions of Visitor Screens with ECMAScript

Enlarge and Reduce HTML Image with ECMAScript

HTML5 Image Gallery and Image Enlargement with ECMAScript

Designing a Video Gallery

Ajax Web Technology Explained

Perl Course

MySQL Course

Using the PurePerl MySQL API

Drawing Bar Chart in HTML Canvas

Drawing Pie Chart in HTML Canvas

HTML Canvas 2D Context

**More Related Links**

PurePerl MySQL API

Web Development Course

Major in Website Design

Producing a Pure Perl Library