HTML5 Canvas Reference - arcTo()

The arcTo() method draws an arc between two tangents on the canvas.

We have to call stroke() method to actually draw the arc on the canvas.

Browser compatibility


`arcTo()`	Yes	Yes	Yes	Yes	Yes

JavaScript syntax

Here is context.arcTo() in action:

context.arcTo(x1, y1, x2, y2, radius)

The arcTo method takes in a point (x1,y1) and draws a straight line from the current path position to this new position.

Then it draws an arc from that point to the y1,y2 point, using the given radius.

The context.arcTo method will work only if the current path has at least one subpath.

The following code draws a line from position 0,0 to position 100,200. Then we will build our small arc.

context.moveTo(0,0); 
context.lineTo(100,  200); 
context.arcTo(350,350,100,100,20);

Parameter Values

Parameter	Description
x1	The x-coordinate of the beginning of the arc
y1	The y-coordinate of the beginning of the arc
x2	The x-coordinate of the end of the arc
y2	The y-coordinate of the end of the arc
radius	The radius of the arc

Example

The following code creates an arc between two tangents on the canvas:


<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="300" height="150"></canvas>
<script>
    var c = document.getElementById("myCanvas");
    var ctx = c.getContext("2d");
    ctx.beginPath();     <!--from ww w  .  j  a v a  2 s.co  m-->
    ctx.moveTo(20, 20);               // Create a starting point
    ctx.lineTo(100, 20);              // Create a horizontal line
    ctx.arcTo(150, 20, 150, 70, 50);  // Create an arc
    ctx.lineTo(150, 120);             // Continue with vertical line
    ctx.stroke();                     // Draw it
</script> 
</body>
</html>

The code above is rendered as follows:

Example 2

The following code shows how to draw rounded rectangle.

<!--from  ww  w .  jav  a2  s  .co  m-->
<!DOCTYPE html>
<html>
<head>
<script type='text/javascript'>
window.onload=function(){
    canvas = document.getElementById('a');
    ctx = canvas.getContext('2d');
    function roundedRect(x,y,w,h,radius){
        ctx.moveTo(x+radius,y);
        ctx.lineTo(x+w-radius,y);
        ctx.arcTo(x+w,y,x+w,y+radius,radius);
        ctx.lineTo(x+w,y+h-radius);
        ctx.arcTo(x+w,y+h,x+w-radius,y+h,radius);
        ctx.lineTo(x+radius,y+h);
        ctx.arcTo(x,y+h,x,y+h-radius,radius);
        ctx.lineTo(x,y+radius);
        ctx.arcTo(x,y,x+radius,y,radius);    
        ctx.stroke();
    }
    roundedRect(100,50,100,100,10);
}
</script>
</head>
<body>
  <canvas id='a' style='border:solid'></canvas>
</body>
</html>

Click to view the demo

Example 3

The following code shows how to draw a rounded corner.


<!DOCTYPE html>
<html>
<body>
<canvas id="canvas" style='background-color:#EEE;' width='500px' height='200px'/>
<script type='text/javascript'>
    var canvas= document.getElementById('canvas');
    var context = canvas.getContext('2d');
<!--from  www.  j  a  v  a2 s  . c o m-->
   var xPos   = 25;   var yPos   = 25;
   var width  = 150;  var height = 75;
   var radius = 30;

   // A3. ATTRIBUTES of lines and arc.
   context.strokeStyle   = "red";
   context.lineWidth     = 20;
   context.lineCap       = "square"
   context.shadowOffsetX = 3;
   context.shadowOffsetY = 3;
   context.shadowBlur    = 5;
   context.shadowColor   = "gray";

   // A4. STARTING point.
   context.beginPath();
   context.moveTo(xPos, yPos);

   // A5. TOP line path.
   context.lineTo(xPos+width-radius, yPos);

   // A6. CORNER arc path.
   context.arcTo(xPos+width, yPos, 
                 xPos+width, yPos+radius, radius);

   // A7. SIDE line path.
   context.lineTo(xPos+width, yPos+height);

   // A8. DRAW image.
   context.stroke();  
</script>
</body>
</html>

The code above is rendered as follows: