Ошибки:
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>
