draw_arc.html

<!DOCTYPE html>
<html>
<head><title>Drawing Arc</title></head>
<body>
<h3>Drawing Arc 2022</h3>
<hr>
<canvas id="myCanvas" style="background-color:aliceblue"width="200" height="150"></canvas>
<script>
    var canvas = document.getElementById("myCanvas");
    var context = canvas.getContext("2d");
    context.beginPath(); // Set a blank path
    context.strokeStyle="magenta";
    context.arc(100, 70, 30, 0, 1.5*Math.PI, false); // clockwise
    context.stroke(); // putting arc in path on canvas
    context.beginPath(); // start next with blank
    context.strokeStyle="blue";
    context.arc(100, 70, 50, Math.PI/2, Math.PI, true); // anticlockwise
    context.stroke(); // putting arc in path on canvas
</script>
</body>
</html>