Как можно расположить несколько элементов по середине холста?

Question

Как я могу расположить несколько текстовых элементов по середине? Имеется такой код (здесь почти ничего)

const canvas = document.querySelector(".canvas");
const ctx = canvas.getContext("2d");
const textItems = ["Item 1", "Item 2", "Item 3"];

ctx.beginPath();
ctx.fillStyle = "black";
ctx.fillRect(0, 0, 1000, 400);

// Здесь нужно расположить элементы по середине
textItems.forEach((text) => {
  // ...
});

И мне нужно получить это

Расстояние между элементами 10px

Answer 1

Смог решить данную задачу следующим способом

const canvas = document.querySelector(".canvas");
const ctx = canvas.getContext("2d");
const textItems = ["Item 1", "Item 2", "Item 3"];
const marginText = 10;
const font = "400 16px Arial, sans-serif";
const canvasSize = {
  width: canvas.offsetWidth,
  height: canvas.offsetHeight,
};

ctx.beginPath();
ctx.fillStyle = "black";
ctx.fillRect(0, 0, 1000, 400);

const getDistanceTextItems = (items) => {
  return items.reduce((acc, text) => {
    ctx.font = font;

    const width = ctx.measureText(text).width;

    acc += width + marginText;

    return acc;
  }, 0);
};

const center = canvasSize.width / 2;
const totalDistanceTextItems = getDistanceTextItems(textItems);

textItems.forEach((text, index) => {
  ctx.font = font;

  const prevItems = textItems.filter((txt, idx) => idx < index);
  const pos = {
    x: center - totalDistanceTextItems / 2 + (prevItems.length ? getDistanceTextItems(prevItems) : 0),
    y: 15,
  };

  ctx.fillStyle = "white";
  ctx.fillText(text, ...Object.values(pos));
});

БЛОГ НА HUSL

Как можно расположить несколько элементов по середине холста?

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