measureText make actualBoundingBoxRight mistake when textAlign is center

[sekaiamber]

when I set ctx.textAlign = 'center', then call measureText, will get wrong actualBoundingBoxRight result.

Steps to Reproduce

const Canvas = require('canvas');
const canvas = Canvas.createCanvas();
const ctx = canvas.getContext('2d');
console.log(ctx.measureText('aaaa'));
/***
{
  width: 24,
  actualBoundingBoxLeft: -0.400390625,
  actualBoundingBoxRight: 23.3466796875,
  actualBoundingBoxAscent: 5.3564453125,
  actualBoundingBoxDescent: 0.17578125,
  emHeightAscent: 7.7001953125,
  emHeightDescent: 2.2998046875,
  alphabeticBaseline: -2.8994140625
}
***/
// then set textAlign center
ctx.textAlign = 'center';
console.log(ctx.measureText('aaaa'));
/***
{
  width: 24,
  actualBoundingBoxLeft: 11.599609375,  
  actualBoundingBoxRight: 35.3466796875, // <---  should be 23.3466796875 - 12
  actualBoundingBoxAscent: 5.3564453125,
  actualBoundingBoxDescent: 0.17578125,
  emHeightAscent: 7.7001953125,
  emHeightDescent: 2.2998046875,
  alphabeticBaseline: -2.8994140625
}
***/

Here is the result screenshot when using node-canvas:

And here is the screenshot when run on Chrome:

It seem that, the correct way to get actualBoundingBoxRight is

actualBoundingBoxRight @ center align = actualBoundingBoxRight @ left align - width / 2

but now use

actualBoundingBoxRight @ center align = actualBoundingBoxRight @ left align + width / 2

Your Environment

• yarn list v1.22.11, [email protected]
• MacOS 10.14.6, node v14.17.4