CODEWITHSUNDEEP
javascriptcsshtmlcanvasfonts
Olu E.
Olu E.

Reputation: 41

Html5 canvas font weight is rendering much heavier than it should

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 comparison.

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

Upvotes: 4

Views: 4626

Answers (2)

andreas
andreas

Reputation: 16936

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>

Upvotes: 4

Liam Egan
Liam Egan

Reputation: 407

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.

Upvotes: 1

Related Questions