Я пытаюсь преобразовать текстовый текст в изображение холста. этот текст должен отображаться на холсте как изображение. Но иногда мой текст отлично отображается на холсте, но предложения разбиваются на слова и переходят к следующим строкам. Происходят разрывы строк, из-за которых предложения имеют неправильный формат. Я хочу отобразить текст в моей текстовой области и на холсте в формате обтекания. В моем коде ниже я не получаю никакого вывода. Пожалуйста, посоветуйте с лучшими.
<body>
<canvas id="myCanvas" width="578" height="400"></canvas>
<form id="myForm">
Text: <input id="myText" placeholder="your text"/>
<br />
<input type="submit" value="submit" />
</form>
<script>
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var imageObj = new Image();
imageObj.onload = function()
{
context.drawImage(imageObj, 0, 0);
}
imageObj.src = "https://image.freepik.com/free-vector/abstract-background-in-geometric-style_1013-
17.jpg";
var myForm = document.getElementById('myForm');
myForm.addEventListener('submit', function(e)
{
var text = document.getElementById('myText').value;
if(text.length == 0)
{
alert("you forgot to put something");
}
else
{
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var maxWidth = 400;
var lineHeight = 25;
var x = (canvas.width - maxWidth) / 2;
var y = 60;
var text = document.getElementById("myText").value;
context.font = "16pt Calibri";
context.fillStyle = "#333";
context.fillText(text, 50, 50);
wrapText(context, text, x, y, maxWidth, lineHeight);
e.preventDefault();}
});
</script>
</body>