如何使用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/