Есть ли способ, чтобы остановить функцию Canvas fillText от переписывания сверху?

Question

Здравствуйте и спасибо за помощь!

Я занимаюсь разработкой живого редактора PDF, в котором пользователь может заполнять типичные формы ввода и видеть его автоматически заполненным в своем браузере. Он работает успешно, однако каждый раз, когда пользователь вводит текст в поле, он перезаписывает снова и снова, делая его жирным.

Вот пример ввода, где я фиксирую значение 'onkeyup'

<div class="col-12 mb-3">
     <p class="h3 mb-3 border-bottom">
          Stock
     </p
     <input class="form-control" type="text" value=""
         id="stock" onkeyup="editThisRow('stock')">
</div>

здесь есть функция, где я проверяю идентификатор и использую fillText для заполнения значения на холсте

  //function to change form fields
    const editThisRow = (idPassedAsParam) => {

        let thisRow = document.getElementById(idPassedAsParam);

        if (thisRow.id === 'projname') {
            doc.text(thisRow.value, 10, 10);
            ctx.fillText(thisRow.value, 85, 260);
        } else if (thisRow.id === 'sizepages') {
            doc.text(thisRow.value, 20, 20);
            ctx.fillText(thisRow.value, 85, 280);
        ...

вот функция, которую я сделал, которая может очистить все элементы, написанные пользователем , Он очистит как значения форм, так и текст, сгенерированный холстом

 //function to clear input on form
    const clearForm = () => {
        canvas.clearRect(0, 0, canvas.width, canvas.height);
    };

Ниже приведен скриншот, где вы можете увидеть форму справа и шаблон PDF слева, сгенерированный текст начинает выделяться жирным шрифтом перезаписывая себя при каждом нажатии клавиши

---