Senduran's Blog: Canvas

A circle can be drawn in the Canvas element using the arc function.
For example

<html>
    <body>
        <canvas id="drawArea" width="1024" height="768"></canvas>
    </body>

    <script>
        var canvas = document.getElementById("drawArea");
        var canvasContext = canvas.getContext("2d");

        canvasContext.fillStyle = "black";
        canvasContext.beginPath();
        canvasContext.arc(100, 100, 50, 0, Math.PI*2, true);
        canvasContext.fill();
    </script>
</html>

Lets explore the arc function's parameters

arc(x-coordinate, y-coordinate, radius, start-angle, end-angle, [counter-clockwise])

x-coordinate : position x from the top left corner of the canvas area

y-coordinate : position y from the top left corner of the canvas area

radius : radius of the arc

start-angle : the angle(in Radian) where the arc should begin. The canvas angle is always measured in the clockwise starting from 0.

i.e in a clock, 3 represent 0

6 --> 𝝅/2 (90 degree )

9 --> 𝝅 (180 degree)

12 --> 3𝝅/2 (270 degree)

end-angle: the angle where the arc should end

counter-clockwise : optional parameter. To draw the arc from the start-angle end- angle in the counter clockwise, default value is false (i. by default it is clock wise)

drawing a circle is straight forward, start angle is 0 and end angle is 2𝝅 or (360 degree). but when drawing a half circle we have two option whether to draw the upper half or lower half.

Drawing an upper half circle

canvasContext.arc(100, 100, 50, 0, Math.PI, true)

here the begin angle is set to zero and end to 180 degree( we can imagine from 3 to 9 in a clock) these two can be connected either via 6 or 12, since the counter-clockwise parameter is set to true an arc is drawn from 3 to 9 via 12 so it is a upper half circle.

Drawing a lower half circle

Simply changing the counter-clockwise parameter to false, the arc will be drawn from 3 to 9 via 6 (clockwise)

Let's see how to draw a quarter circle

If we try to draw a quarter circle similar to the above approach by giving a 90 degrees, i.e

canvasContext.arc(100, 100, 50, 0, Math.PI/2, false)

This will draw a segment of circle rather than quarter sector. This is because the arc function will connect the points specified by the angle begin and angle end parameter.

That is from the start angle (3'O clock) to end angle (6'O clock)an arc is drawn (end to start because of the counter clockwise is true)

So to draw a quarter circle, we have to draw two lines, those are connecting the start angle and end angle position towards the center of the circle

First the position is moved to the center and a line is drawn to the starting angle position then the arc is drawn and from the ending position another line is drawn towards the center.

canvasContext.fillStyle="black";

canvasContext.beginPath();
canvasContext.moveTo(100,100);
canvasContext.lineTo(150,100);
canvasContext.arc(100, 100, 50, 0, Math.PI/2, false);
canvasContext.lineTo(100, 100);
canvasContext.fill();

Drawing without filling will be like this

canvasContext.storeStyle="black";
canvasContext.beginPath();
canvasContext.moveTo(100,100);
canvasContext.lineTo(150,100);
canvasContext.arc(100, 100, 50, 0, Math.PI/2, false);
canvasContext.lineTo(100, 100);
canvasContext.stroke();

Senduran's Blog

Sunday, May 3, 2020

How to draw a quarter circle in HTML Canvas