how to add text area on canvas using jquery javascript

Question

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 :)

Barbara Laird · Accepted Answer · 2015-08-21 23:21:38Z

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/

answered Aug 21, 2015 at 23:21

Barbara Laird

12.7k2 gold badges48 silver badges58 bronze badges

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

2 Comments

kjehfiuh Over a year ago

That's exactly what I am looking for, is it possible for it to display the text that is in the textarea onload?

Barbara Laird Over a year ago

Sure, at the end of your document.ready function trigger the click event.

Collectives™ on Stack Overflow

how to add text area on canvas using jquery javascript

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related