Chrome Canvas Text Boxes

Question

Google Chrome print text in a canvas not correctly.

Chrome version: "Version 56.0.2924.87"

Over night we get a bug in our 2d js game. See Screenshot:

In Firefox is everything working

The Code looks like (normal canvas text printing):

  context.strokeText(text, x, y);
  context.fillText(text, x, y);

With

  context.textAlign = "left";

You can test it by your self here: http://knights.thehardcoders.de/

Answer 1

The most likely scenario is that the text contains certain characters that chrome doesn't know how to print, but still marks as worth printing, and handles them by the default char box, while firefox understands it as spacing or similar.

I suggest you inspect one of the strings that you're printing, the problem has to be there. Look at stringVariable.charCodeAt(0) and at other indices to see what kind of charcode that is, then google that to see what creates it, and finally browse your code to see what may have inserted it.

An immediate test would be checking the stringVariable.length , and seeing if it's as long as it looks.

This behaviour is not an issue with chrome, it's most likely on your side