arc() to add Arc or Circle to Canvas DEMO



Clock Using Canvas DEMO : Arc of Clock Add Second Minutes Hour Border
Adding Number Synch Size StopWatch

HTML

<canvas id="my_canvas" width="500" height="200"  style="border:1px solid #000000;"></canvas>

JavaScript

const canvas = document.getElementById('my_canvas');
const ctx = canvas.getContext('2d');

[0.5, 1, 1.5, 2].forEach((turn, index) => {
  ctx.beginPath();
  ctx.arc(10 + index * 140, 100, 40, 0, turn * Math.PI);
  ctx.stroke();
});