HTML5 отзывчивый текст изогнутой вокруг изображения

Question

У меня есть текстовое поле, которое пользователь может изменить, которое затем создает изогнутый текстовый баннер вокруг изображения. Я хочу, чтобы это изображение сидело против текста sh (поэтому оно должно располагаться выше, если текст был, например, тире). Как это можно сделать?

В приведенном примере это просто обычное изображение, но в моем реальном случае я использую холст для изображения. Я думал, что смогу отрисовать текст на другом холсте, а затем найти пиксели и переместить изображение по мере необходимости, но это было довольно сложно. Поэтому я ищу альтернативные решения.

Соответствующая скрипка: https://jsfiddle.net/m89xjor1/4/

function update(input) {
  document.getElementById("banner").textContent = input.value;
}

body {
  background-color: #333;
  font-family: 'Times New Roman', cursive;
  font-size: 70px;
}

div {
  width: 900px;
}

path {
  fill: transparent;
}

text {
  fill: #FF9800;
}

img {
  padding: 0 15px;
  float: left;
  width: 500px;
  position: absolute;
  top: 190px;
  left: 210px;
}

<div>
  <input type="text" name="textbox" value="Lorem ipsum" onkeyup="update(this)">
  <svg viewBox="0 0 500 500">
    <path id="curve" d="M73.2,148.6c4-6.1,65.5-96.8,178.6-95.6c111.3,1.2,170.8,90.3,175.1,97" />
    <text width="500">
      <textPath xlink:href="#curve" id="banner">
        Lorem ipsum
      </textPath>
    </text>
  </svg>
  <img src="https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/c6704316-0c21-4b65-99cc-904d14e4d2d9/ddefgnl-c3f81a9d-0730-4519-a95e-7b81f6a33f06.png/v1/fill/w_1280,h_692,strp/kamata_kun_transparent_ver_7_by_lincolnlover1865_ddefgnl-fullview.png?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7ImhlaWdodCI6Ijw9NjkyIiwicGF0aCI6IlwvZlwvYzY3MDQzMTYtMGMyMS00YjY1LTk5Y2MtOTA0ZDE0ZTRkMmQ5XC9kZGVmZ25sLWMzZjgxYTlkLTA3MzAtNDUxOS1hOTVlLTdiODFmNmEzM2YwNi5wbmciLCJ3aWR0aCI6Ijw9MTI4MCJ9XV0sImF1ZCI6WyJ1cm46c2VydmljZTppbWFnZS5vcGVyYXRpb25zIl19.satBQ6uEOxjtnQn2YYaoM00I1fQ03vsApBd8juLxEDM">
</div>