The maxWidth parameter in fillText - text overflows

[Spacey4K]

maxWidth: The maximum number of pixels wide the text may be once rendered.

const pad = 10; // padding
ctx.textBaseline = 'top';
ctx.font = '16px Arial';

ctx.fillRect(0, 0, canvas.width, canvas.height);

ctx.fillStyle = 'blue';
ctx.fillRect(pad, pad, canvas.width - pad * 2, canvas.height - pad * 2);

const maxWidth = canvas.width - pad * 2;
ctx.fillStyle = 'white';
ctx.fillText('Short text', pad, 10, maxWidth);
ctx.fillText(`Very ${'long '.repeat(8)} text`, pad, 30, maxWidth);

This is how it is supposed to be rendered (chrome latest version)

Here is how this package rendered it. (text overflows out of the blue rectangle)

Both rendered with the code above on a 200x60 canvas.

[Tancred423]

Also, the longer the text, the worse it gets:

Code used (almost the same as Spacey's, but more repetitions)

const { promises } = require('fs')
const { join } = require('path')
const { createCanvas } = require('@napi-rs/canvas')

const canvas = createCanvas(500, 100)
const ctx = canvas.getContext('2d')

const padding = 50
ctx.textBaseline = 'top'
ctx.font = '16px Arial'

ctx.fillRect(0, 0, canvas.width, canvas.height)

ctx.fillStyle = 'blue'
ctx.fillRect(padding, 0, canvas.width - padding * 2, canvas.height)

const maxWidth = canvas.width - padding * 2
ctx.fillStyle = 'white'
ctx.fillText('Short text', padding, 10, maxWidth)
ctx.fillText(`Very ${'long '.repeat(75)} text`, padding, 30, maxWidth)

async function main() {
  const pngData = await canvas.encode('png')
  await promises.writeFile(join(__dirname, 'simple.png'), pngData)
}

main()