HTML5 Canvas Tutorial - HTML5 Canvas Arc

An arc is a section of the circumference of a circle. This circle can be defined by x, y, and radius.

To create an arc with HTML5 Canvas, we can use the arc() method.

Arcs are defined by a center point, a radius, a starting angle, an ending angle, and the drawing direction.

The drawing direction can be either clockwise or anticlockwise.

The arc method has the following syntax.

context.arc(x,y,r,sAngle,eAngle,counterclockwise);

startAngle and endAngle are defined in radians and form imaginary lines that originate from the center of the circle and intersect the ends of the arc.

antiClockwise defines the direction of the arc path between its two ending points. antiClockwise is defaulted to false, which causes the arc to be drawn clockwise.

Arcs can be styled with the lineWidth, strokeStyle, and lineCap properties.

Example


<!DOCTYPE HTML>
<html>
  <body>
    <canvas id="myCanvas" width="500" height="250"></canvas>
    <script>
      var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');
      var x = canvas.width / 2;
      var y = canvas.height / 2;
      var radius = 75;
      var startAngle = 0.5 * Math.PI;
      var endAngle = 1.5 * Math.PI;
      var counterClockwise = false;
<!--  w  w  w.  j  a v  a  2 s  . c o  m-->
      context.beginPath();
      context.arc(x, y, radius, startAngle, endAngle, counterClockwise);
      context.lineWidth = 5;

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

The code above is rendered as follows:

Circle

To draw a circle with HTML5 Canvas, we can use the arc() method by defining the starting angle as 0 and the ending angle as 2 * PI.


<!DOCTYPE HTML>
<html>
  <body>
    <canvas id="myCanvas" width="5008" height="200"></canvas>
    <script>
      var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');
      var centerX = canvas.width / 2;
      var centerY = canvas.height / 2;
      var radius = 70;
<!--  w  w  w. j  ava  2  s  .  co  m-->
      context.beginPath();
      context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
      context.fillStyle = 'green';
      context.fill();
      context.lineWidth = 5;
      context.strokeStyle = 'red';
      context.stroke();
    </script>
  </body>
</html>

The code above is rendered as follows:

Semicircle

To create a semicircle with HTML5 Canvas, we can use the arc() method and define the ending angle has startAngle + PI.


<!DOCTYPE HTML>
<html>
  <body>
    <canvas id="myCanvas" width="500" height="200"></canvas>
    <script>
      var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');
<!--from  w ww.  ja  v a2  s .c o  m-->
      context.beginPath();
      context.arc(200, 75, 70, 0, Math.PI, false);
      context.closePath();
      context.lineWidth = 5;
      context.fillStyle = 'red';
      context.fill();
      context.strokeStyle = '#550000';
      context.stroke();
    </script>
  </body>
</html>

The code above is rendered as follows:

arcTo() method

To created rounded corners using HTML5 Canvas, we can use the arcTo() method.

The arc in arcTo method is defined by a control point, an ending point, and a radius.


<!DOCTYPE HTML>
<html>
  <body>
    <canvas id="myCanvas" width="500" height="200"></canvas>
    <script>
      var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');
      var rectWidth = 200;
      var rectHeight = 100;
      var rectX = 189;
      var rectY = 50;
      var cornerRadius = 50;
<!--   w w  w  . j a  va2s . c  o  m-->
      context.beginPath();
      context.moveTo(rectX, rectY);
      context.lineTo(rectX + rectWidth - cornerRadius, rectY);
      context.arcTo(rectX + rectWidth, rectY, rectX + rectWidth, rectY + cornerRadius, cornerRadius);
      context.lineTo(rectX + rectWidth, rectY + rectHeight);
      context.lineWidth = 5;
      context.stroke();
    </script>
  </body>
</html>

The code above is rendered as follows: