холст: изменить разрешение

Question

Я сделал функцию, которая может преобразовывать текст в изображение по этой ссылке:

Преобразование текста в изображение, используя javascript

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

js

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

jsfiddle связанного сообщения: http://jsfiddle.net/amaan/WxmQR/1/

Но кажется, что разрешение на два мало для использования, как я могу изменить разрешение в в этом случае?

Answer 1

Используйте context.font = ... перед вы используете context.fillText(...), чтобы изменить способ отображения текста (как предлагается Darth )

canvas fillText ( ) метод

(Я изменил высоту вашего холста на 200, чтобы он соответствовал тексту, и изменил положение, в котором оно отображается, на 0, 100)

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

document.getElementById('text').addEventListener('input', function() {
  tCtx.canvas.width = tCtx.measureText(this.value).width;
  tCtx.font = "60px sans-serif"
  tCtx.fillText(this.value, 0, 100);
  imageElem.src = tCtx.canvas.toDataURL();
}, false);

<canvas id='textCanvas' height=200></canvas>
<img id='image'>
<br>
<textarea id='text'></textarea>