Как нарисовать фигуру серединой от курсора

Question

Есть код:

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>

По клику ЛКМ он рисует квадрат, а по ПКМ - круг.

Задача: рисовать фигуры так, чтобы курсор находился в центре фигуры.

Вроде написал все правильно, однако фигуры рисуются не из середины.

Answer 1

clientY дает координату клика относительно окна браузера, pageY — относительно начала страницы. Вам нужно смещение клика относительно верхнего левого угла элемента canvas, а это e.pageY - canvas.offsetTop

ctx.arc(ev.clientX - r / (Math.PI * 2), ev.clientY - r / (Math.PI * 2) — А какие-то манипуляции с аркой вовсе не нужны, нужно лишь передать координаты центра, а она и так нарисуется вокруг них:

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

canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

canvas.addEventListener('click', ev => {
  let {x, y} = relativeCoors(ev);
  
  const a = 20;
  ctx.beginPath();
  ctx.rect(x - a / 2, y - a / 2, a, a);
  ctx.fill();
});

canvas.addEventListener('contextmenu', ev => {
  ev.preventDefault();
  let {x, y} = relativeCoors(ev);
  
  const r = 10;
  ctx.beginPath();
  ctx.arc(x, y, r, 0, Math.PI * 2);
  ctx.fill();
});

function relativeCoors(e) {
  return {
    x: e.pageX - e.target.offsetLeft,
    y: e.pageY - e.target.offsetTop
  };
}

canvas {
  background: #ddd;
  margin: 50px;
}

<canvas></canvas>

БЛОГ НА HUSL

Как нарисовать фигуру серединой от курсора

Ответы (1 шт):