在 Canvas 文本上设置字体粗细

Question

I'm trying to write text over an image using the Canvas Element.

I've set the font-weight to 900, but on mobile it doesn't show up.

On desktop it's fine and even testing it within responsive mode it looks fine, but when I make it live, the heavier font-weight doesn't come through on my phone.

I tried the code snippet in the comments of Debug JS modifying some specific canvas element to debug it and I found that for some reason the ctx.font was only storing the font size and font name, but not the font weight.

I added the word bold and it would store that, but not bolder or a number value.

Does anyone have any idea what is going on here?

I've included a code snippet and a screenshot from my debugging that shows how it's storing the font value.

function main() {
  // Put template on canvas
  ctx.drawImage(img, 0, 0, size, size);

  ctx.font = "bold 110px 'Saira Condensed', sans-serif";
  ctx.textAlign = "center";
  ctx.fillStyle = "#ffffff";
  ctx.fillText(number, 325, 290);
}

Answer 1

Chrome and Safari require that the font-style is also set in order to use a numerical value for font-weight :

 const canvas = document.querySelector( "canvas" ); const ctx = canvas.getContext( "2d" ); // add 'normal' font-style ctx.font = "normal 900 24px Unknown, sans-serif"; ctx.fillText( "bold", 50, 50 ); ctx.font = "24px Unknown, sans-serif"; ctx.fillText( "normal", 150, 50 );

 canvas { background: white }

 <canvas></canvas>

Answer 2

When I tried this on Chrome (109.0.5414.87), numbered font-weights are converted to keywords. 100 to 600 are converted to "normal" and disappeared, and 700 - 900 are converted to "bold".

var context = document.createElement("canvas").getContext("2d");
context.font = "100 16px Arial" 
console.log(context.font) // prints "16px Arial"


context.font = "700 16px Arial" 
console.log(context.font) // prints "bold 16px Arial"

Answer 3

I've set the font-weight to 900, but on mobile it doesn't show up.

On desktop it's fine and even testing it within responsive mode it looks fine

Can you check that link? I'm not sure is it related your problem but It can help: https://www.w3schools.com/html/html_images_picture.asp