JS Text to image changing the size of font

Question

http://jsfiddle.net/amaan/WxmQR/1

HTML:

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

CSS:

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

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

This Code is what I want but I want to be able to make the font size bigger, have a fixed width and height for the image and make the text to over flow to the next line. Thanks in advance.

Answer 1

Shortest way:

document.getElementById("myP").style.fontSize = "xx-large";

How ever, this will add the style attribute to the text area element, which is not recommended. instead, create a class with the desired font size and call it like this:

document.getElementById("myP").className = "MyClass"; 

As the best practice states, all designs should be inside a style sheet (css file) and not defined in the html element itself.