Arc

Next ❯Ellipse

To draw arc or circle shape(s) on canvas

  • turned_in_notArc Related Methods
    • arc()
    • arcTo()


arc( )

Used to define an arc, to draw it on canvas you have to use additional method stroke() or fill()

Syntax

ctx.arc(x, y, radius, startAngle, endAngle, anticlockwise)
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

/* Now we code to draw on canvas */
ctx.arc(100,50,40,0,2*Math.PI);
ctx.stroke();
arcsubject
arcclose
<!DOCTYPE html>
<html>
<head>
<title>Full Code</title>
</head>
<body>
  <canvas id="canvas" width="200" height="100" style="border:1px solid teal;"></canvas>
<script>
  var canvas = document.getElementById("canvas");
  var ctx = canvas.getContext("2d");

  /* Now we code to draw on canvas */
  ctx.arc(100,50,40,0,2*Math.PI);
  ctx.stroke();
</script>
</body>
</html>


arcTo( )

Used to define an arc between two tangents, to draw it on canvas, you have to use additional method stroke() or fill()

Syntax

arcTo(cp1x, cp1y, cp2x, cp2y, radius)

cp1x, cp1y - Control point 1 along XY-axis
cp2x, cp2y - Control point 2 along XY-axis
radius - Radius of the circular arc

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

/* Now we code to draw on canvas */
ctx.moveTo(100,5);
ctx.arcTo(100,90,10,40,40);
ctx.stroke();
arcTosubject
arcToclose
<!DOCTYPE html>
<html>
<head>
<title>Full Code</title>
</head>
<body>
  <canvas id="canvas" width="200" height="100" style="border:1px solid teal;"></canvas>
<script>
  var canvas = document.getElementById("canvas");
  var ctx = canvas.getContext("2d");

  /* Now we code to draw on canvas */
  ctx.moveTo(100,5);
  ctx.arcTo(100,90,10,40,40);
  ctx.stroke();
</script>
</body>
</html>


  • Ellipse
❮ Prev Rectangle
Next ❯Ellipse
TryOut Examples"Learn to Explore..!"

TryOut Editor

receipt
❯