How to embed an input or textarea in a canvas element?

I want to edit text on an HTML canvas by displaying an input box or textarea inside it.

However, when I type any text in the input box, and after clicking on the canvas, the input text is getting displayed.

But I don't want it to behave like that. I want the input box or textarea to get embedded so that I can edit text directly on the canvas element.

Canvas is a simple bitmap and does not supporting embedding of DOM elements (such as input).

To accomplish this, you will need to "fake" the input by typing and use the fillText of context to draw in the text on the canvas.

You can for example place the input element on top of canvas when you need some input. When done, extract the value of input and draw it onto canvas.

Click anywhere on the canvas:

Hit enter:

var canvas = document.getElementById('myCanvas'),
    ctx = canvas.getContext('2d'),
    font = '14px sans-serif',
    hasInput = false;

canvas.onclick = function(e) {
    if (hasInput) return;
    addInput(e.clientX, e.clientY);
}

//Function to dynamically add an input box: 
function addInput(x, y) {

    var input = document.createElement('input');

    input.type = 'text';
    input.style.position = 'fixed';
    input.style.left = (x - 4) + 'px';
    input.style.top = (y - 4) + 'px';

    input.onkeydown = handleEnter;

    document.body.appendChild(input);

    input.focus();

    hasInput = true;
}

//Key handler for input box:
function handleEnter(e) {
    var keyCode = e.keyCode;
    if (keyCode === 13) {
        drawText(this.value, parseInt(this.style.left, 10), parseInt(this.style.top, 10));
        document.body.removeChild(this);
        hasInput = false;
    }
}

//Draw the text onto canvas:
function drawText(txt, x, y) {
    ctx.textBaseline = 'top';
    ctx.textAlign = 'left';
    ctx.font = font;
    ctx.fillText(txt, x - 4, y - 4);
}

#myCanvas {
    background: lightgrey;
}

<canvas id="myCanvas"></canvas>

Style the input box so it blends better. You can use a textarea instead and so forth.

Note: If you want to edit the text at some later point you need to keep track of the text/position internally.

Don't try to use canvas for editable text. HTML5 Canvas is full of instantly-drying pixels. (For more info, read this answer of mine.) Instead, place editable text over your canvas, positioned as you like.

Demo: http://jsfiddle.net/DUxAL/

<style type="text/css">
  canvas { background:blue }
  .wrap, .wrap canvas { width:400px; height:300px }
  .wrap { position:relative }
  .wrap > * { position:absolute }
  #go { top:20px; left:40px; width:150px; height:60px }
</style>
…
<div class="wrap">
  <canvas width="400" height="300"></canvas>
  <textarea id="go">Hello world</textarea>
</div>

You can use CSS to style your <input> or <textarea> how ever you want.