<div style="display:flex; justify-content: center;">
<canvas width="500" height="500" id="myCanvas"></canvas>
</div>

const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
const r = 100;
const originX = canvas.width / 2;
const originY = canvas.height / 2;

ctx.beginPath();
ctx.strokeStyle = 'black';
ctx.arc(originX, originY, r, 0, 2 * Math.PI);
ctx.lineWidth = 2;
ctx.stroke();

ctx.beginPath();
ctx.moveTo(originX, 50);
ctx.lineTo(originX, canvas.height - 50);
ctx.stroke();

ctx.beginPath();
ctx.moveTo(50, canvas.height / 2);
ctx.lineTo(canvas.height - 50, originX);
ctx.stroke();