Есть код:
const canvas = document.querySelector('canvas');
const ctx = canvas.getContext('2d');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
canvas.addEventListener('click', ev => {
const a = 200;
ctx.beginPath();
ctx.rect(ev.clientX - a / 2, ev.clientY - a / 2, 200, 200);
ctx.fill();
});
canvas.addEventListener('contextmenu', ev => {
ev.preventDefault();
const r = 100;
ctx.beginPath();
ctx.arc(ev.clientX - r / (Math.PI * 2), ev.clientY - r / (Math.PI * 2), 100, 0, Math.PI * 2);
ctx.fill();
});
<canvas></canvas>
По клику ЛКМ он рисует квадрат, а по ПКМ - круг.
Задача: рисовать фигуры так, чтобы курсор находился в центре фигуры.
Вроде написал все правильно, однако фигуры рисуются не из середины.