HTML Canvas: Curved lines: arc()

previous next

Sometimes, you only want to draw circles, either in totality or in parts; to do so, you need arc()

var pi = Math.PI;
ctx.lineWidth = 3;

ctx.beginPath();
ctx.strokeStyle = "cyan";
ctx.arc(30, 30, 20, 0, pi/4, false);
ctx.stroke();

ctx.beginPath();
ctx.strokeStyle = "orange";
ctx.arc(90, 30, 20, 0, pi/2, false);
ctx.stroke();

ctx.beginPath();
ctx.strokeStyle = "lime";
ctx.arc(150, 30, 20, 0, 3*pi/4, false);
ctx.stroke();

ctx.beginPath();
ctx.strokeStyle = "red";
ctx.arc(210, 30, 20, 0, pi, false);
ctx.stroke();

ctx.beginPath();
ctx.strokeStyle = "violet";
ctx.arc(270, 30, 20, 0, 5*pi/4, false);
ctx.stroke();

ctx.beginPath();
ctx.strokeStyle = "brown";
ctx.arc(30, 90, 20, 0, 3*pi/2, false);
ctx.stroke();

ctx.beginPath();
ctx.strokeStyle = "olive";
ctx.arc(270, 90, 20, 0, 7*pi/4, false);
ctx.stroke();

ctx.beginPath();
ctx.strokeStyle = "blue";
ctx.arc(150, 150, 50, 0, 2*pi, true);
ctx.stroke();

ctx.beginPath();
ctx.strokeStyle = "cyan";
ctx.arc(30, 270, 20, 0, pi/4, true);
ctx.stroke();

ctx.beginPath();
ctx.strokeStyle = "orange";
ctx.arc(90, 270, 20, 0, pi/2, true);
ctx.stroke();

ctx.beginPath();
ctx.strokeStyle = "lime";
ctx.arc(150, 270, 20, 0, 3*pi/4, true);
ctx.stroke();

ctx.beginPath();
ctx.strokeStyle = "red";
ctx.arc(210, 270, 20, 0, pi, true);
ctx.stroke();

ctx.beginPath();
ctx.strokeStyle = "violet";
ctx.arc(270, 270, 20, 0, 5*pi/4, true);
ctx.stroke();

ctx.beginPath();
ctx.strokeStyle = "brown";
ctx.arc(30, 210, 20, 0, 3*pi/2, true);
ctx.stroke();

ctx.beginPath();
ctx.strokeStyle = "olive";
ctx.arc(270, 210, 20, 0, 7*pi/4, true);
ctx.stroke();

Explanation

By experimenting with the above code, you might have figured out that the arguments of the arc functions are as follows:

This method takes five parameters: x and y are the coordinates of the circle's center. radius is self explanatory. The start_angle and end_angle parameters define the start and end points of the arc in radians. The starting and closing angle are measured from the x axis. The anticlockwise parameter is a Boolean value which when true draws the arc counterclockwise, otherwise in a clockwise direction.

previous next

<html>
  <head>
    <meta charset="utf-8" />
    <style>
      canvas {border: 2px solid green;}
    </style>
  </head>
  <body>
<p>You may want to click on the
<img class="small_img" src="../../images/icons/html.png" /> image
in the main window, and set the variable <b>explain</b> to <b>true</b>.</p>
    <canvas height="300" id="canvas" width="400" />
  </body>
<script>
// Not the usual jQuery method as we use an embedded
// iframe to display our results.
var $ = parent.$;
var ctx = $('#canvas', document)[0].getContext("2d");

// remove any pre-existing drawing to see the
// effect of changing the code
ctx.clearRect(0, 0, 300, 400);

var explain = false;

function circ(x, y, r) {
  ctx.beginPath();
  ctx.fillStyle = "LightGray";
  ctx.arc(x, y, r, 0, 2*Math.PI, true);
  ctx.fill();
}
if (explain) {
    circ(30, 30, 20);
    circ(90, 30, 20);
    circ(150, 30, 20);
    circ(210, 30, 20);
    circ(270, 30, 20);

circ(30, 90, 20);
    circ(270, 90, 20);

circ(150, 150, 50);
    ctx.fillStyle = "black";
    ctx.fillText("0 = 2*π", 210, 155);
    ctx.fillText("π", 80, 155);
    ctx.fillText("π/2", 145, 215);
    ctx.fillText("3π/2", 150, 90);

circ(30, 210, 20);
    circ(270, 210, 20);

circ(30, 270, 20);
    circ(90, 270, 20);
    circ(150, 270, 20);
    circ(210, 270, 20);
    circ(270, 270, 20);
}

JS_CODE /* replaced by the code
          in the other editor */
</script>
</html>

[The following table has been adapted from Wikipedia.]

HTML name	Hex code R G B
Red colors
IndianRed	CD 5C 5C
LightCoral	F0 80 80
Salmon	FA 80 72
DarkSalmon	E9 96 7A
LightSalmon	FF A0 7A
Crimson	DC 14 3C
Red	FF 00 00
FireBrick	B2 22 22
DarkRed	8B 00 00
Pink colors
Pink	FF C0 CB
LightPink	FF B6 C1
HotPink	FF 69 B4
DeepPink	FF 14 93
MediumVioletRed	C7 15 85
PaleVioletRed	DB 70 93
Orange colors
LightSalmon	FF A0 7A
Coral	FF 7F 50
Tomato	FF 63 47
OrangeRed	FF 45 00
DarkOrange	FF 8C 00
Orange	FF A5 00
Yellow colors
Gold	FF D7 00
Yellow	FF FF 00
LightYellow	FF FF E0
LemonChiffon	FF FA CD
LightGoldenrodYellow	FA FA D2
PapayaWhip	FF EF D5
Moccasin	FF E4 B5
PeachPuff	FF DA B9
PaleGoldenrod	EE E8 AA
Khaki	F0 E6 8C
DarkKhaki	BD B7 6B
Purple colors
Lavender	E6 E6 FA
Thistle	D8 BF D8
Plum	DD A0 DD
Violet	EE 82 EE
Orchid	DA 70 D6
Fuchsia	FF 00 FF
Magenta	FF 00 FF
MediumOrchid	BA 55 D3
MediumPurple	93 70 DB
BlueViolet	8A 2B E2
DarkViolet	94 00 D3
DarkOrchid	99 32 CC
DarkMagenta	8B 00 8B
Purple	80 00 80
Indigo	4B 00 82
SlateBlue	6A 5A CD
DarkSlateBlue	48 3D 8B

HTML name	Hex code R G B
Green colors
GreenYellow	AD FF 2F
Chartreuse	7F FF 00
LawnGreen	7C FC 00
Lime	00 FF 00
LimeGreen	32 CD 32
PaleGreen	98 FB 98
LightGreen	90 EE 90
MediumSpringGreen	00 FA 9A
SpringGreen	00 FF 7F
MediumSeaGreen	3C B3 71
SeaGreen	2E 8B 57
ForestGreen	22 8B 22
Green	00 80 00
DarkGreen	00 64 00
YellowGreen	9A CD 32
OliveDrab	6B 8E 23
Olive	80 80 00
DarkOliveGreen	55 6B 2F
MediumAquamarine	66 CD AA
DarkSeaGreen	8F BC 8F
LightSeaGreen	20 B2 AA
DarkCyan	00 8B 8B
Teal	00 80 80
Blue colors
Aqua	00 FF FF
Cyan	00 FF FF
LightCyan	E0 FF FF
PaleTurquoise	AF EE EE
Aquamarine	7F FF D4
Turquoise	40 E0 D0
MediumTurquoise	48 D1 CC
DarkTurquoise	00 CE D1
CadetBlue	5F 9E A0
SteelBlue	46 82 B4
LightSteelBlue	B0 C4 DE
PowderBlue	B0 E0 E6
LightBlue	AD D8 E6
SkyBlue	87 CE EB
LightSkyBlue	87 CE FA
DeepSkyBlue	00 BF FF
DodgerBlue	1E 90 FF
CornflowerBlue	64 95 ED
MediumSlateBlue	7B 68 EE
RoyalBlue	41 69 E1
Blue	00 00 FF
MediumBlue	00 00 CD
DarkBlue	00 00 8B
Navy	00 00 80
MidnightBlue	19 19 70

HTML name	Hex code R G B
Brown colors
Cornsilk	FF F8 DC
BlanchedAlmond	FF EB CD
Bisque	FF E4 C4
NavajoWhite	FF DE AD
Wheat	F5 DE B3
BurlyWood	DE B8 87
Tan	D2 B4 8C
RosyBrown	BC 8F 8F
SandyBrown	F4 A4 60
Goldenrod	DA A5 20
DarkGoldenrod	B8 86 0B
Peru	CD 85 3F
Chocolate	D2 69 1E
SaddleBrown	8B 45 13
Sienna	A0 52 2D
Brown	A5 2A 2A
Maroon	80 00 00
White colors
White	FF FF FF
Snow	FF FA FA
Honeydew	F0 FF F0
MintCream	F5 FF FA
Azure	F0 FF FF
AliceBlue	F0 F8 FF
GhostWhite	F8 F8 FF
WhiteSmoke	F5 F5 F5
Seashell	FF F5 EE
Beige	F5 F5 DC
OldLace	FD F5 E6
FloralWhite	FF FA F0
Ivory	FF FF F0
AntiqueWhite	FA EB D7
Linen	FA F0 E6
LavenderBlush	FF F0 F5
MistyRose	FF E4 E1
Grey colors
Gainsboro	DC DC DC
LightGrey	D3 D3 D3
Silver	C0 C0 C0
DarkGray	A9 A9 A9
Gray	80 80 80
DimGray	69 69 69
LightSlateGray	77 88 99
SlateGray	70 80 90
DarkSlateGray	2F 4F 4F
Black	00 00 00

Your notebook

Keep your personal notes here. These notes are stored by your browser on your own computer, and will be available from any page on this site. You can choose to use html syntax for formatting.