Показать сообщение отдельно
  #1 (permalink)  
Старый 07.07.2014, 22:09
Новичок на форуме
Отправить личное сообщение для bitcoin Посмотреть профиль Найти все сообщения от bitcoin
 
Регистрация: 07.07.2014
Сообщений: 2

Вставка текста в картинку 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>
Ответить с цитированием