There are two different functions that allow drawing an arc. One of the functions is arcTo(xctrl,yctrl,xPos,yPos,radius).
You will see the second function in the next recipe. The arcTo() function accepts two coordinates and a radius. To use the arcTo() function work, it is necessary to first mark the position from where the arc is to be drawn. This is done by calling the moveTo() function, the same way as we do for drawing a line (refer to the lineTo() function).
The output of our arc recipe is as follows:
The recipe is as follows:
<html>
<head>
<title>Basic Arc</title>
<script>
function init()
{
can = document.getElementById("MyCanvasArea");
ctx = can.getContext("2d");
drawArcMethod1(60,150,100,80,140,150,25,"blue");
//function to draw curve by method 1
function drawArcMethod1(xPos,yPos,xctrl,yctrl,xend,yend,radius,linecolor)
{
ctx.strokeStyle = linecolor;
ctx.fillStyle="red";
ctx.lineWidth = 8;
ctx.beginPath();
ctx.moveTo(xPos,yPos);
ctx.arcTo(xctrl,yctrl,xend,yend,radius);
//ctx.fill();
ctx.stroke();
}
}
</script>
</head>
<body onload="init()">
<canvas ID="MyCanvasArea" width="300" height="300" style="border:2px solid black;">
your browser doesn't support canvas
</canvas>
</body>
</html>In our recipe, the syntax to draw the arc is as follows:
ctx.moveTo(xPos,yPos); ctx.arcTo(xctrl,yctrl,xend,yend,radius);
On the canvas, the arc is drawn by following these steps:
Move to a coordinate
(xPos,yPos).Draw an imaginary line between
(xPos,yPos)and the control point(xctrl,yctrl).Then draw an imaginary line between
(xctrl,yctrl)and the end coordinate(xend,yend), thereby generating a cone shape.Draw an imaginary circle with the given radius between the two mentioned lines in such a way that the two lines are tangents to the circle at two different points.
Here is a diagrammatic representation:
The arc as shown previously will appear for the following parameters:
xPos,yPos = (60,150) xctrl,yctrl=(100,80) xend,yend=(140,150) radius=15
If you increase the radius of the circle, the size will increase but it will lie within the angle formed by the two lines intersecting at the control point (xctrl,yctrl). So the circle will shift downwards, forming two tangent points, and the arc will bend. It will look as follows if the radius is increased to 25:
