I'm new to html5 canvas and I've run into a problem trying to render text. I have set in my code that the text should render in Gotham at a 'regular' weight but it seems to be rendering in bold or even heavier. I've attached a snippet of the code and two screenshots of how the heavy the weight should be and how heavy it is in canvas for parison.

ctxt.textAlign = "left";
ctxt.font = "Regular 34px Gotham, Helvetica Neue, sans-serif";
ctxt.fillStyle = "#fff";

What the font weight should be

What the font weight is rendered as in canvas

I'm new to html5 canvas and I've run into a problem trying to render text. I have set in my code that the text should render in Gotham at a 'regular' weight but it seems to be rendering in bold or even heavier. I've attached a snippet of the code and two screenshots of how the heavy the weight should be and how heavy it is in canvas for parison.

ctxt.textAlign = "left";
ctxt.font = "Regular 34px Gotham, Helvetica Neue, sans-serif";
ctxt.fillStyle = "#fff";

What the font weight should be

What the font weight is rendered as in canvas

• javascript
• css
• html
• canvas
• fonts

2 Answers 2

The HTML canvas font property includes a lot of attributes at once. Regular is no valid value for any of them. Use e.g. normal or lighter to set the font-weight. See MDN or this example:

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.font = "normal 30px Arial";
ctx.fillText("Hello World", 20, 50);

<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>

The first property in the font string is style, which can be one of normal, oblique or italic. the second property is weight, which can be normal (but not Regular).

ctxt.font = "normal 34px Gotham, Helvetica Neue, sans-serif";

Should work.