Javascript – Drawing Circle with Arrows

I am trying to draw something like shown below with Javascript and wondering how I can accomplish this.

enter image description here

Obviously to draw a circle, I can do:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>shapes demo</title>
</head>
<body>
<canvas class="canvas" width="400" height="200"></canvas><br />
<button class="btn">draw</button>
<script>
   let canvas = document.querySelector(".canvas");
   let btn = document.querySelector(".btn");
   btn.addEventListener("click", () => {
      var circle = canvas.getContext("2d");
      circle.beginPath();
      circle.arc(180, 100, 90, 0, 2 * Math.PI);
      circle.stroke();
   });
</script>
</body>
</html>

I am wondering maybe there is some existing drawing library, etc. which would make this easier. Any advice would be helpful. Thanks!

*I want to write some code for visualizing a few data structures. If you are wondering why anyone would want to do this 😜

Edit

I think actually, just having a way to draw a curved arrow joining two strings is enough. It is easy to draw a partial circle, but I am not sure how to add text at the end of the partial circle or add an arrow tip to the end of the partial circle.

52 thoughts on “Javascript – Drawing Circle with Arrows”

Leave a Comment