Snippet - Draw Text to HTML5 Canvas

This function draws text to the canvas with a specified position, color and font.

function drawCanvasText(txt, pX, pY, clr, fnt) {
 context2D.fillStyle = clr; // color
 context2D.font = fnt; // font
 context2D.fillText(txt, pX, pY); // text at position X, Y
}

Example Usage:

drawCanvasText("drawing text yas", 50, 50, "black", "bold 30px sans-serif");

Quick Tip - fillText JavaScript Function - HUD

context2D.fillStyle = "white";
context2D.font = 'bold 30px sans-serif';
context2D.fillText("POINTS: "+numOfPoints, canvas.width-200, 30);

That right there is an example of drawing text to the canvas. It writes it on the top right of the canvas. That particular example is what would serve as the HUD in a game.


Here it is in practise:
(you get points for moving right and left)
Browser not compatible.
Recent versions of Firefox, Opera, Google Chrome and Safari work for this game.
If you are using Internet Explorer; Stop using it immediately before you die of idiocy.