Drawing arc1
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:
How to do it...
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>How it works...
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.
- The arc is the path drawn between these two tangent 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:
There's more...
Try the following in the recipe:
- Change the color of the arc
- Increase the radius
- Draw multiple arcs
