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

Question

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.

score 18 · Answer 1 · edited Feb 01 '21 at 19:44

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:

Entering text

Hit enter:

Result on canvas

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.

Do you have ideas about how to make text editable later? (ie if I re-click on an already-created textbox) — Basj, Jan 12 '14 at 21:07
@Basj it need to be handled separately. Consider the canvas as just a viewport for the data you store internally. When you click on the text compare the coords with the object of the text you stored internally and present the input box if the criterias are there. Afterwards render everything again as the new view of the data you have stored internally. The objects can be anything, a custom object with custom properties, an array etc. — , Jan 12 '14 at 23:02
To rewrite the text, How about putting the text in an array, saving it separately, modifying the array through mode settings, and drawing it back on the canvas? — 이승현, May 21 '22 at 11:22

score 4 · Answer 2 · edited May 23 '17 at 10:32

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.

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

2 Answers2

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

Linked

Related