Вероника

Про работу с DOM javascript.ru/tutorial/dom/modify

let i,
    arrayItem,
    rows = arr.length,
    tableBody = document.querySelector('.tbody');

for (i = 0; i < rows; i++) {
    arrayItem = arr[i];
    tableBody.innerHTML += `<tr><td>${arrayItem.id}</td><td>${arrayItem.name}</td><td>${arrayItem.last}</td><td>${arrayItem.com}</td></tr>`;
}

Это по быстрому. Лучше создать отдельный шаблон для строки, особенно если там ещё классы будут, потом вызывать функцию добавления данных в шаблон. Например:

function createImageCardTemplate(image) {
  let imageTemplate = document.createElement("div");
  imageTemplate.classList.add(`${USER_GALLERY_CLASS}__item`, "js-show-image");
  imageTemplate.setAttribute("data-target-image", image.id);
  imageTemplate.innerHTML =
        `<img class="${USER_GALLERY_CLASS}__image" src="${image.filePath}" alt="${image.fileName}">`;

  return imageTemplate;
}

function renderGallery(images) {
  let imagesCount = images.length,
      $image,
      imageData,
      i;

  $gallery.addEventListener("click", bindImageCardClick);

  if (!imagesCount) {
    $gallery.innerText = "No images found";
    return;
  }
  $gallery.innerText = "";

  for (i = 0; i < imagesCount; i++) {
    imageData = images[i];
    $image = createImageCardTemplate(imageData);
    $gallery.appendChild($image);
  }
}

я сделала вот так

.canvas {
    width: inherit;
    height: inherit;
    border-radius: 50%;
}

и всё хорошо

Зачем вы делаете это отдельным блоком? Повесьте событие `:hover` либо `:focus` (который по клике срабатывает) на ссылки

.toggle-menu__link:hover {
    background-color: rgba(79, 54, 173, 0.6);
}