Drawing Arcs

We use the arc and arcTo methods to draw arcs on the canvas.

NameDescriptionReturns
arc(x, y, rad, startAngle, endAngle,direction)Draws an arc to (x, y) with radius rad, start angle startAngle, and finish angle endAngle.void
arcTo(x1, y1, x2, y2,rad)Draw an arc to (x2, y2) that passes (x1, y1) and has radius radvoid

Using the arcTo Method

 
<!DOCTYPE HTML>
<html>
<head>
<title>Example</title>
<style>
canvas {
      border: thin solid black
}

body>* {
      float: left;
}
</style>
</head>
<body>
      <canvas id="canvas" width="500" height="140"> 
      Your browser doesn't support the <code>canvas</code> element 
      </canvas>
      <script>
            var ctx = document.getElementById("canvas").getContext("2d");
            var point1 = [ 100, 10 ];
            var point2 = [ 200, 10 ];
            var point3 = [ 200, 110 ];
            ctx.fillStyle = "yellow";
            ctx.strokeStyle = "black";
            ctx.lineWidth = 4;
            ctx.beginPath();
            ctx.moveTo(100, 200);
            ctx.arcTo(50, 110, 40, 70, 100);
            ctx.stroke();
            drawPoint(100, 200);
            drawPoint(20, 110);
            drawPoint(20, 70);
            ctx.beginPath();
            ctx.moveTo(100, 200);
            ctx.lineTo(100, 110);
            ctx.lineTo(20, 70);
            ctx.stroke();
            function drawPoint(x, y) {
                  ctx.lineWidth = 1;
                  ctx.strokeStyle = "red";
                  ctx.strokeRect(x - 2, y - 2, 4, 4);
            }
      </script>
</body>
</html>
  
Click to view this demo.

Drawing arcs in response to mouse movements

 
<!DOCTYPE HTML>
<html>
<head>
<title>Example</title>
<style>
canvas {
      border: thin solid black
}
</style>
</head>
<body>
      <canvas id="canvas" width="500" height="140"> 
      Your browser doesn't support the <code>canvas</code> element 
      </canvas>
      <script>
            var canvasElem = document.getElementById("canvas");
            var ctx = canvasElem.getContext("2d");
            draw();
            function draw() {
                  ctx.fillStyle = "yellow";
                  ctx.strokeStyle = "black";
                  ctx.lineWidth = 4;
                  ctx.beginPath();
                  ctx.moveTo(100, 200);
                  ctx.arcTo(50, 110, 40, 70, 50);
                  ctx.stroke();
                  drawPoint(100, 200);
                  drawPoint(110, 110);
                  drawPoint(70, 70);
                  ctx.beginPath();
                  ctx.moveTo(100, 200);
                  ctx.lineTo(110, 110);
                  ctx.lineTo(40, 70);
                  ctx.stroke();
            }
            function drawPoint(x, y) {
                  ctx.lineWidth = 1;
                  ctx.strokeStyle = "red";
                  ctx.strokeRect(x - 2, y - 2, 4, 4);
            }
      </script>
</body>
</html>
  
Click to view this demo.

If the control key is pressed, the first point is moved. If the shift key is pressed, the second point is moved. If neither key is pressed, the third point is moved.

Using the arc Method


arc(x, y, radiusOfArc, startAngle, endAngle, clockwiseTrueOrFalse);
 
<!DOCTYPE HTML>
<html>
<head>
<title>Example</title>
<style>
canvas {
      border: thin solid black
}

body>* {
      float: left;
}
</style>
</head>
<body>
      <canvas id="canvas" width="500" height="140"> 
    Your browser doesn't support the <code>canvas</code> element 
    </canvas>
      <script>
            var ctx = document.getElementById("canvas").getContext("2d");
            ctx.fillStyle = "yellow";
            ctx.lineWidth = "3";
            ctx.beginPath();
            ctx.arc(200, 70, 60, 0, Math.PI * 2, true);
            ctx.stroke();
            ctx.beginPath();
            ctx.arc(200, 70, 60, Math.PI / 2, Math.PI, true);
            ctx.fill();
            ctx.stroke();
            ctx.beginPath();
            var val = 0;
            for ( var i = 0; i < 4; i++) {
                  ctx.arc(50, 70, 60, val, val + Math.PI / 4, false);
                  val += Math.PI / 2;
            }
            ctx.closePath();
            ctx.fill();
            ctx.stroke();
      </script>
</body>
</html>
  
Click to view this demo.
Home 
  HTML CSS Book 
    HTML  

canvas:
  1. Getting Started with the Canvas Element
  2. Getting a Canvas Context
  3. Drawing Rectangles
  4. Canvas Drawing State
  5. Setting the Line Join Style
  6. Using Gradients
  7. Using Patterns
  8. Using smaller shapes with an image pattern
  9. Drawing Images
  10. Using Video Images
  11. Using Canvas Images
  12. Setting the Fill & Stroke Styles
  13. Saving and Restoring Drawing State
  14. Drawing Using Paths
  15. Drawing Arcs
  16. Drawing Bezier Curves
  17. Drawing Text
  18. Using Shadows
  19. Using Transparency
Related: