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

JSFiddle - /

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();

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

JSFiddle - http://jsfiddle/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();

• javascript
• html
• html5-canvas

2 Answers 2

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.

There is multiple issues:

1. The canvas is too small too correctly draw the text.
2. The text has the same fillStyle as the rectangle, so one cannot see it.
3. You draw the rectangle after the text, so the text is covered.

You may try this code:

    context.globalAlpha = 0.95;
    context.rect(0, 0, el.width, el.height);
    context.fillStyle = "#435a6b";
    context.fill();
    
    context.font = 'italic 40pt Calibri';
    context.fillStyle = "black";
    context.fillText('Hello World',50,50);

http://jsfiddle/qHpt6/