Javascript-форум - Вставка текста в картинку canvas

Javascript-форум (https://javascript.ru/forum/)

- Общие вопросы Javascript (https://javascript.ru/forum/misc/)

- - Вставка текста в картинку canvas (https://javascript.ru/forum/misc/48536-vstavka-teksta-v-kartinku-canvas.html)

Вставка текста в картинку canvas

Здравствуйте!

Прошу помочь, пожалуйста.

Есть генерация картинки на canvas. Есть поле ввода. Нужно, чтобы введя слова они появлялись на картинке.
Вот код, не пойму почему не работает. В процессе возни что-то получилось, но выводилось "object HTMLinputElement", вернул обратно.

P.S: Я только начинаю работать с JS, извините если код содержит серьезные ошибки =).

<!DOCTYPE html>
<html>
<body>

<canvas id="myCanvas" width="300" height="200" style="border:2px solid #d3d3d3;">
Обновите браузер</canvas>
<br><br>
<input type="text" id="nashinput">		  			 
<button type="submit" id="poslat">Введите текст</button>
<br>
<script>

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");

// Create gradient
var grd = ctx.createLinearGradient(0,0,500,0);
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");

// Fill with gradient
ctx.fillStyle = grd;
ctx.fillRect(0,0,300,200);

ctx.font = "30px Arial";
ctx.strokeText(tekt,70,100);

</script>


<script>
$("#poslat").on("click", function(){
var tekt = document.getElementById('nashinput').value;

});
</script>

</body>
</html>

Ошибки:
1. Код в первом script выполнится сразу, до того как мы введём какой либо текст.
2. var задаёт локальную переменную в пределах функции, потому код из первого script всё равно бы никак не смог увидеть переменную tekt из функции во втором.
3. $ - это библиотека jquery, подключение которой у вас отсутствует, потому также работать не должно. Перед тем как начать использовать jq рекомендуется попривыкнуть к обычному javascript, иначе можно заработать jquery головного мозга.

<!DOCTYPE html>
<html>
<body>
 
<canvas id="myCanvas" width="300" height="200" style="border:2px solid #d3d3d3;">
Обновите браузер</canvas>
<br><br>
<input type="text" id="nashinput">                    
<button type="submit" id="poslat">Введите текст</button>
<br>

 
<script>
document.getElementById('poslat').onclick = function(){
var tekt = document.getElementById('nashinput').value;

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
 
// Create gradient
var grd = ctx.createLinearGradient(0,0,500,0);
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");
 
// Fill with gradient
ctx.fillStyle = grd;
ctx.fillRect(0,0,300,200);
 
ctx.font = "30px Arial";
ctx.strokeText(tekt,70,100);
};
</script>
 
</body>
</html>

Спасибо! + отдельно за подробное описание ошибок :)

Я до jquery еще не дошел, а $ был в одном из примеров, которые я перебирал, пытаясь найти ошибку. Решил с ним.

Подскажите пожалуйста как сделать как на картинке или какую прогу скачать