Convert Text to Image using java script on html page

Here you find out way to show your text into image on html page just in few lines  of  js code.

//here is your html body ,where your text image genrate

   <div>
          <canvas id='textCanvas' width=100 height=40></canvas>
          <img id='image'>
           <br>
           <input type="button" onClick="textToImage();" >
   </div>


// here is your java script function which generate text into image

<script>

function textToImage()
{

var textCanvas= document.getElementById('textCanvas').getContext('2d'),  //Assign canvas variable,

imageElem = document.getElementById('image');                    //Image variable,

textCanvas.font= "normal 24px Verdana";                         //HTML5 Canvas:Text option for text field

textCanvas.strokeStyle = "#000000";

textCanvas.clearRect(0,0,100,40);               //clear previous canvas for redrawing image    

textCanvas.strokeText('input text',30,20,70);   //fill text into canvas

imageElem.src = textCanvas.canvas.toDataURL();  //providing canvas url to image src

console.log(imageElem.src);

}
</script>

now you have image of text that you have entered in strokeText(); 

///HTML5 Canvas:Text option for text field

[font style][font weight][font size][font face]

example: 

context.font = "normal normal 20px Verdana"; 

we have lot of option in HTML5 Canvas .which help to draw different structure.
you can see different option for HTML5 Canvas :Text  in next blog.