How do I add editable text fields on an image?

Question

I am trying to figure out a way to duplicate what they have here: https://realsteelcenter.com/collections/monograms/products/family-name-circle-monogram

I know they're using Canvas but I am still very new to JS so I am having a hard time figuring this out. There are a lot of websites using something like this and I am surprised that I have not found anything on this. I was really hoping to have found YouTube video that explains how to do this, but no luck.

Any advice that would push me in the right direction is appreciated.

Does this answer your question? [How can I write text on a HTML5 canvas element?](https://stackoverflow.com/questions/3697615/how-can-i-write-text-on-a-html5-canvas-element) — 2pha, Jan 06 '20 at 00:02

Emiel Zuurbier · Accepted Answer · 2020-01-06T10:05:42.780

Start off with an input type="text" field in which you can enter the name and a canvas to render everything in. In JavaScript listen for the input event on the input so you can update the current text every time the value of the input has been changed.

Now in your canvas you'll want to output the text value that has been set by your input. You could do this in the event handler of your input event. So everytime the user changes the input clear the canvas (otherwise it will draw over the previous word) with the clearRect method of the context and then draw the word in the canvas with the fillText method. You'll have to do some extra math to calculate the correct position of the text and can do that with the measureText method.

I've added an example below which will hopefully get you started in the right direction.

const text = document.getElementById('name');
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
const fontSize = 32;

canvas.width = canvas.offsetWidth;
canvas.height = canvas.offsetHeight;
ctx.font = `${fontSize}px sans-serif`;

text.addEventListener('input', function(event) {
  const textValue = event.target.value;
  const { width } = ctx.measureText(textValue);
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.fillText(textValue, (canvas.width / 2) - (width / 2), (canvas.height / 2) + (fontSize / 2));
});

#canvas {
  display: block;
  width: 400px;
  height: 250px;
  border: 1px solid black;
  margin-bottom: 30px;
}

<canvas id="canvas"></canvas>
<label for="name">Enter a name</label>
<input type="text" id="name">

score -1 · Answer 2 · answered Jan 06 '20 at 00:05

Well using jQuery that's easy to do ! You can start with something like following :

<input id='myText' type='text'/>
<div class="container">
  <img src="img_snow_wide.jpg" alt="Snow" style="width:100%;">
<div class="centered">Centered</div>
</div>

CSS:

.container {
  position: relative;
  text-align: center;
  color: white;
}

.centered {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

jQuery:

$('#myText').on('input', function() {
$('.centered').empty().html($(this).val);
}

I understood you were looking for something similar as an alternative to canvas :) — Bilel, Jan 06 '20 at 00:09

How do I add editable text fields on an image?

2 Answers2