Text rendered with wrong font family

[matthias-w]

The text is rendered with the default sans-serif font family instead with the font defined with ctx.font = "12px 'Marker SD'";

The issue appears since I upgraded to canvas 1.6.5. It works correctly with canvas version 1.6.4. Currently, I went back to version 1.6.4 as a workaround.

My environment

• Version of node-canvas: 1.6.5
• Environment: node 6.10.1 on Ubuntu 16.04.2 LTS (GNU/Linux 4.4.0-70-generic x86_64)

EDIT:
Maybe the same issue #868

[chearon]

I don't think it's the same as #868, since that is for canvas v2. More likely this is the same underlying issue as #898 (we recently upgraded the font string parser). Do you experience the same issue if you use node-canvas 1.6.4?

[matthias-w]

Hello @chearon, thanks for your comment. The issue does not appear when using node-canvas 1.6.4 (see my first post).

[LinusU]

Does the exact string tx.font = "12px 'Marker SD'"; work in chrome or firefox?

[matthias-w]

Hello @LinusU, this works in Chrome, Firefox, Opera and IE11.

[Enginebeck]

It works for me with v1.6.4

[matthias-w]

This is what I said in my very first post. It works with node-canvas 1.6.4 but it does NOT with node-canvas 1.6.5. That's why I switched back to version 1.6.4 for now.

[LinusU]

Whipped this together real quick to be able to test, but it seems like the output is identical 🤔

const parseCssFont = require('parse-css-font')
const unitsCss = require('units-css')

const weights = 'normal|bold|bolder|lighter|[1-9]00'
const styles = 'normal|italic|oblique'
const units = 'px|pt|pc|in|cm|mm|%'
const string = '\'([^\']+)\'|"([^"]+)"|[\\w-]+'

const fontre = new RegExp(
  '^ *' +
  '(?:(' + weights + ') *)?' +
  '(?:(' + styles + ') *)?' +
  '([\\d\\.]+)(' + units + ') *' +
  '((?:' + string + ')( *, *(?:' + string + '))*)'
)

function oldParse (input) {
  let font = {}
  let captures = fontre.exec(input)

  if (!captures) return

  font.weight = captures[1] || 'normal'
  font.style = captures[2] || 'normal'
  font.size = parseFloat(captures[3])
  font.unit = captures[4]
  font.family = captures[5].replace(/["']/g, '').split(',')[0].trim()

  return font
}

function newParse (input) {
  const parsedFont = parseCssFont(input)
  const parsedSize = unitsCss.parse(parsedFont.size)

  return {
    weight: parsedFont.weight,
    style: parsedFont.style,
    size: parsedSize.value,
    unit: parsedSize.unit,
    family: parsedFont.family[0]
  }
}

console.log('OLD:')
console.log(oldParse(process.argv[2]))

console.log('NEW:')
console.log(newParse(process.argv[2]))

output:

OLD:
{ weight: 'normal',
  style: 'normal',
  size: 12,
  unit: 'px',
  family: 'Marker SD' }
NEW:
{ weight: 'normal',
  style: 'normal',
  size: 12,
  unit: 'px',
  family: 'Marker SD' }

[matthias-w]

Any news on this? I tried out node-canvas 1.6.7 and the issue still exists.