How to convert text to image with font style using javascript?

Question

My code converts text to image successfully, but cannot convert to image with font style. How can I do it?

.........................................................................................................................................................

var tCtx = document.getElementById('textCanvas').getContext('2d'),
    imageElem = document.getElementById('image');

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);

.xx{
    font-family: "Fredoka One script=all rev=2", "Adobe Blank";
    font-weight: 400;
    font-style: normal;
    font-size: 50px;
}

@font-face {
  font-family: 'Fredoka One script=all rev=2';
  font-style: normal;
  font-weight: 400;
  src:   url(https://fonts.gstatic.com/l/font?kit=k3kUo8kEI-tA1RRcTZGmTmHEG9St0C3d1om8Mz6slqBKRtvjzUJ6xAJaGHLTbv9tHVEq-h1ylCtXSeDBENILlzkfzUJOiM594gqLtnzccnJfhpQc-ZP_ud1_NbotCXKqzPs_SH7xk6cjQyW2echUD_r7vTfZ5gJBot49AddTHjLYLXysgiMDRZKV&skey=fac42792a60c2aba&v=v5) format('woff2');
}

canvas{
    border: 1px black solid;
}
#textCanvas{
    display: none;
}

<canvas class="xx" id='textCanvas' height=20></canvas>
<img id='image'>
<br>
<textarea id='text'></textarea>

Answer 1

VARIATION WITH LINE BREAKS

This variant of this other post (https://stackoverflow.com/a/12328759/3865092) also takes care of the line breaks:

HTML:

<textarea id='atext' rows='5'>Transform all 
this different lines
into one single
image!</textarea>
<button id="generate">
Generate image
</button>
<br/>
<canvas id='aCanvas' height=200 width=200 style='display:none'></canvas>
<img id='image' style="background-color:red">

and the javascript:

var ctx = document.getElementById('aCanvas').getContext('2d');
var imageElem = document.getElementById('image');
var atext = document.getElementById('atext');

document.getElementById('generate').addEventListener('click', function (){
 
    //split text into lines and find the longest one
  var lines = atext.value.split("\n");
  ctx.font = "30px Verdana"
  let longest = lines.reduce((r, e) => r.length < e.length ? e : r, "");
  ctx.canvas.width = ctx.measureText(longest).width + 90;
  ctx.font = "30px Verdana"
  for(var i=0; i<lines.length; i++){
        ctx.fillText(lines[i], 20, 40*i +40);
  }
  imageElem.src = ctx.canvas.toDataURL();
  console.log(imageElem.src);
}, false);

Here jsfiddle

Answer 2

You need to set your context's font property. Its default value is '10px sans-serif', and this property doesn't support 'inherit' value _{(unlike direction)}.

But since you are resizing your canvas, there is a little thing you need to be aware: setting either the width or height property of your canvas will reset all the properties of your context. So, we need to set this font property twice, before measure the text and after setting the canvas size.

Also, note that you should probably wait for your font has loaded, using the FontFaceSet API:

var tCtx = document.getElementById('textCanvas').getContext('2d'),
  imageElem = document.getElementById('image');

var font = '400 50px "Fredoka One script=all rev=2", "Adobe Blank"';

document.fonts.load(font)
  .then(function() {
    document.getElementById('text').addEventListener('keyup', function() {
      // Set it before getting the size
      tCtx.font = font
      // this will reset all our context's properties
      tCtx.canvas.width = tCtx.measureText(this.value).width;
      // so we need to set it again
      tCtx.font = font;
      // set the color only now
      tCtx.fillStyle = '#A0A';
      tCtx.fillText(this.value, 0, 50);
      imageElem.src = tCtx.canvas.toDataURL();
    }, false);
  });

.xx {
  font-family: "Fredoka One script=all rev=2", "Adobe Blank";
  font-weight: 400;
  font-style: normal;
  font-size: 50px;
}

@font-face {
  font-family: 'Fredoka One script=all rev=2';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/l/font?kit=k3kUo8kEI-tA1RRcTZGmTmHEG9St0C3d1om8Mz6slqBKRtvjzUJ6xAJaGHLTbv9tHVEq-h1ylCtXSeDBENILlzkfzUJOiM594gqLtnzccnJfhpQc-ZP_ud1_NbotCXKqzPs_SH7xk6cjQyW2echUD_r7vTfZ5gJBot49AddTHjLYLXysgiMDRZKV&skey=fac42792a60c2aba&v=v5) format('woff2');
}

canvas {
  border: 1px black solid;
}

#textCanvas {
  display: none;
}

<canvas class="xx" id='textCanvas' height=65></canvas>
<img id='image'>
<br>
<textarea id='text'></textarea>