HTML5 Canvas Text Tutorial
You can also render text in the canvas element. The text on canvas is different from text on the rest of the webpage. The text in canvas is a bitmap image. This means you cannot copy or highlight it in the browser, as you would other text on the page.
You can set the font, font size and color of the text in canvas. In the example we will look at, we will render text on the canvas and color it using the linear gradient method we learned in the previous example.
Here is the script
<script>
window.onload = function() {
var canvas=document.getElementById(“drawing”); // grabs the canvas element
var context=canvas.getContext(“2d”); // returns the 2d context object
var grd=context.createLinearGradient(200,70,200,110); // sets the position of the gradient
grd.addColorStop(0, “#f55b5b”); // sets the first color
grd.addColorStop(1, “#3112a3″); // sets the second color
context.font= “70pt Georgia”; // sets the font and font size of the text
context.fillStyle=grd; // sets the text color
context.fillText(“Canvas!”, 50, 100); // The text to be displayed and its position
}
</script>
Here is what it looks like in the browser
