CODEWITHSUNDEEP
javascriptcanvas
syltai
syltai

Reputation: 122

canvas: modify resolution

I have made a function that can convert text to image according to this link:

Convert Text to Image using 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 of the linked post: http://jsfiddle.net/amaan/WxmQR/1/

But it seems that the resolution is two low to use, how can I modify the resolution in this case?

Upvotes: 0

Views: 47

Answers (1)

Jannes Carpentier
Jannes Carpentier

Reputation: 1898

Use context.font = ... before you use context.fillText(...) to change the way text is rendered (as suggested by Darth)

canvas fillText() method

(I changed your canvas height to 200 to fit the text and changed the position it is drawn to 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>

Upvotes: 2

Related Questions