I want to add some textual information on the canvas. When i click mouse on a point of the canvas it should shown a text area at the current mouse position. It should be also possible to select,drag and rotate the textarea.How can achieve this functionality using HTML5 canvas and javascript?

I want to add some textual information on the canvas. When i click mouse on a point of the canvas it should shown a text area at the current mouse position. It should be also possible to select,drag and rotate the textarea.How can achieve this functionality using HTML5 canvas and javascript?

• javascript
• jquery
• html
• html5-canvas

• 1 Show some code please. You know the drill. – DrinkJavaCodeJava Commented Dec 11, 2012 at 7:23

2 Answers 2

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 plicated 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.

Example of code that handles click on a canvas and displays textarea with coordinates:

HTML

<canvas id="c" width="200" height="200"></canvas>

JS:

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

canvas.addEventListener('click', function(e) {
    if(!textarea) {
        textarea = document.createElement('textarea');
        textarea.className = 'info';
        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);

The rest of the functionality is more plex. Probably you'd like to use external library like jQuery UI.

EDITED: missing 'px' in styles. Thanks Stuart.