如何使用jquery在画布上添加文本区域javascript

Question

我有一个textarea和canvas。用户可以将图像拖动到画布上并更改不同的背景图像。现在我需要能够在画布的底部有一个部分，它将显示来自textarea的文本。

<canvas id="canvas" width="640" height="280"></canvas> 

    <div id="text"> 
     <textarea id="write_whatever">Write 4 lines to describe yourself.</textarea> 
     <div id="button_to_add"></div> 
    </div> 

这里是我目前有http://jsfiddle.net/D4zw4/50/

中的jsfiddle这里就是我想实现，但不是关键了它与按一下按钮，它应该是在画布的底部http://jsfiddle.net/m1erickson/NuaHp/

任何人都知道我可以做到这一点或做到这一点？在此先感谢:)

Answer 1

这样的事情？

$('#button_to_add').on('click', 'button', function() { 
    var canvas = document.getElementById("myCanvas"); 
    var ctx = canvas.getContext("2d"); 
    var text = $('#write_whatever').val(); 

    ctx.clearRect(0, 0, canvas.width, canvas.height); 
    ctx.fillStyle = "#3e3e3e"; 
    ctx.font = "16px Arial"; 
    ctx.fillText(text, 20, canvas.height - 20); 
}); 

http://jsfiddle.net/D4zw4/51/