How to add text to the canvas

Question

I have a problem with the canvas fillText function. I have this code:

scene.shapes['shop1'] = new Shape(); var ps1 = scene.shapes['shop1'].points; // for convenience ps1[0] = new Point(1024, 66, 10); // left bottom ps1[1] = new Point(694, 66, 10); // right bottom ps1[2] = new Point(694, 466, 10); // right top ps1[3] = new Point(1024, 466, 10); // left top // Background scene.shapes['shop1'].polygons.push(new Polygon( [ps1[0], ps1[1], ps1[2], ps1[3] ], new Point(0, 0, 1), true /* double-sided */, Polygon.SOLID, [177, 216, 249] )); scene.shapes['shop1Header'] = new Shape(); var ps1h = scene.shapes['shop1Header'].points; // for convenience ps1h[0] = new Point(1024, 400, 11); // left bottom ps1h[1] = new Point(694, 400, 11); // right bottom ps1h[2] = new Point(694, 466, 11); // right top ps1h[3] = new Point(1024, 466, 11); // left top // Background scene.shapes['shop1Header'].polygons.push(new Polygon( [ps1h[0], ps1h[1], ps1h[2], ps1h[3] ], new Point(0, 0, 1), true /* double-sided */, Polygon.SOLID, [175, 175, 175] )); var x = -1024; var y = -500; ctx.font = '60pt Calibri'; ctx.lineWidth = 3; // fill color ctx.fillStyle = 'blue'; ctx.fillText('Hello World!', x, y); 

But it does not create text and displays only the store. Do you know how to solve this problem? Thank you very much.

Answer 1

The value of x and y is negative, so you draw outside the canvas. If you set x to 0 and y to 0 + the font size, it will draw text in the upper left corner.

EDIT: you need to add the font size in y.

 ctx.font = "60px Calibri"; // Use pixels instead of points ctx.fillText("Hello World", 0, 60);