Is there any way I can convert the input text into an image. What I am exactly trying to do is type some text into a textbox and display it on div. When I click on a button the text copied to div should be changed to an image. Does anyone know anything about this? Thanks in advance!
You can do this using a hidden canvas element and converting that to an image using toDataURL. Your code would look something like this:
var tCtx = document.getElementById('textCanvas').getContext('2d'), //Hidden canvas
imageElem = document.getElementById('image'); //Image element
// Text input element
document.getElementById('text').addEventListener('keyup', function() {
tCtx.canvas.width = tCtx.measureText(this.value).width;
tCtx.fillText(this.value, 0, 10);
imageElem.src = tCtx.canvas.toDataURL();
console.log(imageElem.src);
}, false);canvas{
border: 1px black solid;
}
#textCanvas{
display: none;
}<canvas id='textCanvas' height=20></canvas>
<img id='image'>
<br>
<textarea id='text'></textarea>
