Несколько комментариев:
Вы используете var text = document.getElementById('input-text1').value; с идентификатором input-text1 , тогда как в вашем HTML ваш идентификатор input-text .
Вы определяете функцию drawImage(text) с параметром text, который никогда не используется. В этой функции вы снова создаете переменные canvas и context.
Вы вставляете в DOM изображение, которое вы скрываете, чтобы потом нарисовать его на холсте. Я думаю, что проще создать новый объект Image.
Функция wrapText() немного неоднозначна. Это форматирует текст? Это отображает что-нибудь? Вы можете переименовать его как displayWrapText() или getWrappedText().
Тогда о ваших проблемах:
Текст не обновляется, когда пользователь удаляет символы, потому что, кромедля ввода # 1, когда пользователь печатает, он не очищает пузырь и рисует новый текст поверх предыдущего (становится темнее). Вот почему вы не видите никакой разницы. Удаление работает для первого ввода, потому что вы очищаете пузырь и снова рисуете полный текст.
Tbh, я забыл об этой проблеме, когда пытался, и теперь она работает хорошо ... Вв любом случае, предоставьте соответствующую maxWidth для функции wrapText(): есть маленькие и большие пузыри. Однако он не переносится, если строка не содержит пробелов.
Когда пользователь вводит данные в первом вводе, он очищает холст, но снова отображает текст только внутри первогопузырь, поэтому остальные отображаются пустыми. Вам нужно очистить холст и перерисовать тексты во всех соответствующих пузырьках.
Что я сделал, так это применил то, что сказал вам ранее, а также улучшил обработку событий (см. bubbling ), так как это был почти одинаковый код для каждого ввода. Чтобы иметь возможность перерисовывать все пузырьки после каждого обновления, я сохраняю их значение при каждом обновлении.
const canvas = document.getElementById('canvas');
const context = canvas.getContext('2d');
const lineHeight = 30;
let backgroundImg;
let text1;
let text2;
let text3;
let text4;
init();
function init() {
text1 = '';
text2 = '';
text3 = '';
text4 = '';
backgroundImg = new Image();
backgroundImg.src = 'https://cdn.glitch.com/4ed5f9d8-97ad-4c53-b855-3e8d508ba2f3%2FDVSN-FUTURE-NO-CRYIN-FINAL-NoText.jpg?v=1572122142300';
context.drawImage(backgroundImg, 0, 0, canvas.width, canvas.height);
document.querySelector('#input-container').addEventListener('keyup', function(e) {
const num = parseInt(e.target.getAttribute('data-bubble'), 10);
const text = e.target.value;
saveText(num, text);
draw(canvas, context, backgroundImg);
}, false);
}
function draw(canvas, context, backgroundImg) {
context.clearRect(0, 0, canvas.width, canvas.height);
context.drawImage(backgroundImg, 0, 0, canvas.width, canvas.height);
drawBubble(canvas, context, getTextFrom(1), 39, 315, '26px Bubblegum', '#000000', 110, lineHeight); // bubble 1
drawBubble(canvas, context, getTextFrom(2), 45, 370, '22px Bubblegum', '#000000', 70, lineHeight); // bubble 2
drawBubble(canvas, context, getTextFrom(3), 20, 425, '26px Bubblegum', '#000000', 120, lineHeight); // bubble 3
drawBubble(canvas, context, getTextFrom(4), 20, 515, '24px Bubblegum', '#000000', 120, lineHeight); // bubble 4
}
function getTextFrom(num) {
switch(num) {
case 1: return text1;
case 2: return text2;
case 3: return text3;
case 4: return text4;
default: '';
}
}
function saveText(num, text) {
switch(num) {
case 1: text1 = text; break;
case 2: text2 = text; break;
case 3: text3 = text; break;
case 4: text4 = text; break;
}
}
function displayWrappedText(context, text, x, y, maxWidth, lineHeight) {
var words = text.split(' ');
var line = '';
for (var n = 0; n < words.length; n++) {
var testLine = line + words[n] + ' ';
var metrics = context.measureText(testLine);
var testWidth = metrics.width;
if (testWidth > maxWidth && n > 0) {
context.fillText(line, x, y);
line = words[n] + ' ';
y += lineHeight;
} else {
line = testLine;
}
}
context.fillText(line, x, y);
}
function drawBubble(canvas, context, text, x, y, font, color, maxWidth, lineHeight) {
context.font = font;
context.fillStyle = color;
//context.fillText(text, x, y);
displayWrappedText(context, text, x, y, maxWidth, lineHeight);
}
#input-container > input {
width: 90%;
font-size: 18px;
height: 24px;
text-transform: uppercase;
padding: 0 8px;
background-color: transparent;
color: red;
border: 2px solid black;
outline: none;
border-radius: 4px;
margin-bottom: 12px;
margin-left: auto;
margin-right: auto;
font-weight: 500;
font-family: bubblegum;
}
<div id="input-container">
<input class="js-input-text" data-bubble="1" type="text" maxlength="6" />
<input class="js-input-text" data-bubble="2" type="text" maxlength="5" />
<input class="js-input-text" data-bubble="3" type="text" maxlength="12" />
<input class="js-input-text" data-bubble="4" type="text" maxlength="18" />
</div>
<div class="art-container">
<canvas id="canvas" width="576" height="576">
Canvas requires a browser that supports HTML5.
</canvas>
</div>