2

I have a textarea and canvas. The user is able to drag image onto the canvas and change different background images. Now I need to be able to have a section at the bottom of canvas that will display text from 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>

Here's the jsfiddle of what i currently have http://jsfiddle.net/D4zw4/50/

Here's what I am trying to achieve, but instead of key up it's with button click and it should be at the bottom of the canvas http://jsfiddle.net/m1erickson/NuaHp/

Anyone know how I could achieve this or done this before? Thanks in advance :)

1 Answer 1

2

Something like this?

$('#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/

Sign up to request clarification or add additional context in comments.

2 Comments

That's exactly what I am looking for, is it possible for it to display the text that is in the textarea onload?
Sure, at the end of your document.ready function trigger the click event.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.