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();
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:
fillStyle
as the rectangle, so one cannot see it.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.net/qHpt6/
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With