1

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.

Screenshot

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);
}
Kaiido
  • 123,334
  • 13
  • 219
  • 285
foodles
  • 11
  • 1
  • 2
  • Perhaps, your font is not installed on a phone. Try let f = new FontFace('test', 'url(x)'); f.load().then(function() { // Ready to use the font in a canvas context }); – Maxim Mazurok Oct 29 '20 at 01:36

3 Answers3

3

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>
Kaiido
  • 123,334
  • 13
  • 219
  • 285
  • I tried this, but it didn't work. I used ctx.font = "normal 900 110px 'Saira Condensed', sans-serif"; but it's still not coming through at the heavier font-weight on mobile and in the debugger it's still only showing "110px 'Saira Condensed', sans-serif" It's a Google Font, so maybe I'll play around with a non-google font to see if that's part of the issue or not. – foodles Oct 29 '20 at 19:51
0

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

ArthurMorgan
  • 75
  • 1
  • 10
0

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"
Jenny C
  • 61
  • 1
  • 4