Chrome's half-loading of fonts is troublesome on canvas
Reported by
simon.sa...@gmail.com,
Jun 23 2017
|
|||||
Issue descriptionUserAgent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/61.0.3135.5 Safari/537.36 Steps to reproduce the problem: I am drawing to a canvas using Roboto Mono font: φ &test ψ The &test is correctly Roboto Mono, but the phi and psi are of the wrong font! The second time I draw them however, they look proper. Behold: https://codepen.io/simonsarris/pen/BZdxOv Note that to repeat this problem you will need to hard reload. And now, compare that with this: https://codepen.io/simonsarris/pen/owedmo It's exactly the same code, but elsewhere on the page in a paragraph tag I've written "test φ" instead of just "test", in Roboto Mono font. It seems that Chrome is only loading part of the font, which is mucking up canvas drawing by drawing my text as a combination of Roboto Mono and some other font. Unless you already used the greek symbols on the page itself which I assume forces the whole font to load, then it looks correct. Note that this is a problem in Chrome in a different way from other browsers. In IE11 it looks wrong both times and in Firefox nightly it doesn't seem to draw the symbols at all. My results are attached. What is the expected behavior? my little greek pals look like roboto mono What went wrong? ^ Did this work before? N/A Chrome version: 61.0.3135.5 Channel: n/a OS Version: 10.0 Flash Version:
,
Jun 26 2017
,
Jun 30 2017
Thanks for the detailed report and the test case! This indeed looks wrong, hopefully someone on the webfonts team can look into it.
,
Jun 30 2017
,
Jul 3 2017
WebFonts seem to be used in a wrong way with canvas.
Any canvas API does not wait for webfonts loading finished as they are designed as non-blocking API sets, but you need to ensure that the specified fonts are already loaded by using document.fonts.ready promise before calling canvas API to use the WebFonts. Otherwise, text may be rendered by a font that is picked up from a fallback font list.
document.fonts.ready.then(() => {
ctx.fillText("\u03c6 &test \u03c8", 50, 50);
setTimeout(function() {
ctx.fillText("\u03c6 &test \u03c8", 50, 150);
}, 3000)
});
This is an example code to avoid the case.
,
Jul 3 2017
Closing as WontFix. |
|||||
►
Sign in to add a comment |
|||||
Comment 1 by tkent@chromium.org
, Jun 26 2017