Add a Textarea inside the canvas at the current mouse position

html, html5-canvas, javascript, jquery

Solution

The code below is that provided by dreame4 adapted to allow dragging (jsfiddle).

var canvas = document.getElementById("c"),
    textarea = null;

function mouseDownOnTextarea(e) {
    var x = textarea.offsetLeft - e.clientX,
        y = textarea.offsetTop - e.clientY;
    function drag(e) {
        textarea.style.left = e.clientX + x + 'px';
        textarea.style.top = e.clientY + y + 'px';
    }
    function stopDrag() {
        document.removeEventListener('mousemove', drag);
        document.removeEventListener('mouseup', stopDrag);
    }
    document.addEventListener('mousemove', drag);
    document.addEventListener('mouseup', stopDrag);
}
canvas.addEventListener('click', function(e) {
    if (!textarea) {
        textarea = document.createElement('textarea');
        textarea.className = 'info';
        textarea.addEventListener('mousedown', mouseDownOnTextarea);
        document.body.appendChild(textarea);
    }
    var x = e.clientX - canvas.offsetLeft,
        y = e.clientY - canvas.offsetTop;
    textarea.value = "x: " + x + " y: " + y;
    textarea.style.top = e.clientY + 'px';
    textarea.style.left = e.clientX + 'px';
}, false);​

However, rotation requires quite a different and more complicated solution - make the text within the canvas using `context.fillText` and then see this post on how to rotate it. You'll need to explicitly keep track of the position and angle of rotation of the text area. The event listener for the canvas element will have to check whether the mouse is within the text, in which case it starts dragging, or outside, in which case it creates/moves the text.

Problem

Original source

Related problems

• Drawing rotated text on a HTML5 canvas