I-RenderingText

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>rendering text</title>
</head>
<canvas id="canvas" width="640" height="480" style="border: 1px solid black;"></canvas>
<body>

<script>

var canvas1 = document.getElementById("canvas");
var dt = canvas1.getContext("2d");

 var theText = "Drawing Text on a canvas";

    //draw the text uisng default settings
 dt.fillText(theText,20,20);

    //draw text changing font info
 dt.font = "25pt Georgia";
 dt.fillText(theText,20,60)

    //draw text with fill colour
 dt.fillStyle = "blue";
 dt.fillText(theText,20,100);

    //draw text with both a stroke and fill with opacity set
 dt.font = "32pt Verdana";
 dt.fillStyle ="#663399";
 dt.strokeStyle = "rgba(0,0,255,0.8)";
 dt.fillText(theText,20,160);
 dt.strokeText(theText,20,160);


    //draw line under text
 var textW = dt.measureText(theText);
 dt.beginPath();
 dt.strokeStyle = "Black";
 dt.moveTo(20,170);
 dt.lineTo(textW.width+20,170);
 dt.stroke();
</script>

</body>
</html>