I am trying to edit text on canvas [duplicate]

Answer 1

You can't. Canvas is a simple bitmap and do not supporting embedding of DOM elements (such as input).

You'll 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.

Here is an online example.

Click anywhere on 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);
}

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.

Hope this helps.

Answer 2

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.