Again the maxWidth parameter in fillText - text overflows (This time with right textAlign)

[Tancred423]

Hey hey,

a while ago we had this issue that the text shifts when using maxWidth. See #577.
It got fixed in #603 and works well so far.

But when I'm trying to use right alignment of text, the issue appears again:

Code used for above image

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
const maxWidth = canvas.width - padding * 2

// The background
ctx.fillRect(0, 0, canvas.width, canvas.height)
ctx.fillStyle = 'blue'
ctx.fillRect(padding, 0, maxWidth, canvas.height)

ctx.font = '16px Arial'
ctx.textAlign = 'right'
ctx.fillStyle = 'white'
ctx.textBaseline = 'top'

/** Short text */
ctx.fillText('Short text', canvas.width - padding, 10, maxWidth)

/** Very long text (10 repetitions) */
ctx.fillText(
`Very ${'long '.repeat(10)} text`,
canvas.width - padding,
30,
maxWidth,
)

/** Very long text (20 repetitions) */
ctx.fillText(
`Very ${'long '.repeat(20)} text`,
canvas.width - padding,
50,
maxWidth,
)

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

main()