FillText not working

Issue

I'm unable to get the text on the canvas. What am I doing wrong here ?

JSFiddle - http://jsfiddle.net/qHpt6/

var el = document.getElementById('mycanvas');
var context = el.getContext('2d');

context.globalAlpha = 0.95;
context.beginPath();
context.rect(0, 0, el.width, el.height);
context.fillStyle = "#435a6b";
context.fillText('Hello World',0,0);
context.fill();

Solution

You're trying to draw 40 point text into a little teeny box. Make the box bigger or the text a lot smaller.

You're also drawing the text at the upper left corner of the box. The text goes up from the baseline.

If you change the box size to something like 350 wide and 250 high, and change the code to

context.fillText("Hello World", 0, 200);

then you'll see the text.

Forked and fixed fiddle.

Answered By - Pointy