Draw Circle

 <button onclick="circle()">Draw Circle</button>
    <canvas height="400" id="canvas" width="500">
    </canvas>
<script>
function circle() {
    const canvas = document.querySelector('#canvas');
    if (!canvas.getContext) {
        return;
    }
    const ctx = canvas.getContext('2d');
    // set line stroke and line width
    ctx.strokeStyle = 'red';
    ctx.lineWidth = 5;
    // draw a red line
    ctx.beginPath();
    ctx.moveTo(200, 100);
    var x,y,r,a;
    r=100;
    for(let a=0; a<8;a=a+0.01)
    {y=100+r*Math.sin(a);
     x=100+r*Math.cos(a);
    ctx.lineTo(x, y);
    }
     ctx.stroke();
}
</script>

Draw Circle

Line