html5 canvas doesn't fill text at coordinates (0,0)

Question

Why does the canvas not do anything for fillText(text, 0,0) but works for fillText(text, 10, 10)?

fillText(text, 0,0): http://jsfiddle.net/kFhQm/4/

fillText(text, 10, 10): http://jsfiddle.net/kFhQm/5/

Answer 1

The second argument is the Y coordinate for the baseline of the text (the default textBaseline is "alphabetic") , so the text is being drawn above the visible canvas element when you use 0.

jsFiddle.

You could use a different number or alternatively, change the textBaseline property to something suitable, such as "top".

ctx.textBaseline = "top";

jsFiddle.