There are two methods that you can use to add text to a canvas element.
fillText( Text string, X coordinate, Y coordinate, Maximum text width (optional)); strokeText(Text string, X coordinate, Y coordinvate, Maximum text width(optional));
Where:
Text string is the actual text that you want displayed on the canvas.
(X coordinate, Y coordinate) is the point from where the text will begin.
Maximum text width specifies the maximum width of the text. The text will be squeezed to fit into this width. So if the text is too long for the width, it may end up looking unreadable. However, this parameter is optional. Experiment with it to find out the right look that suits your requirements.
HTML Code
<html>
<head>
<script type="application/javascript">
function init() {
var canvas = document.getElementById("canvas");
if (canvas.getContext)
{
var ctx = canvas.getContext("2d");
ctx.strokeText("Believe", 5,20);
ctx.fillText("Believe",30,20);
}
}
</script>
<title>Drawing Text on
canvas</title>
</head>
<body onload="init();">
<canvas id="canvas" width="900"
height="500"></canvas><br>
</body>
</html>
