How to use multiple colors in one text

[Farman52]

I would like to ask how could I possibly use multiple colors in just one text

ctx.font = '30px Arial'
ctx.fillStyle = "#fcba03"
ctx.textAlign = 'center'
ctx.fillText('[MVP+] Farmans', (790-150)/2+150, 43)

Is it possible to have different color for the plus in the prefix? [MVP+], for example blue

[samizdatco]

It's not possible in a single step. You need to use a combination of fillText and measureText to lay out the line yourself and change the fillStyle in between.

Something like this will work:

let prefix = "correct horse ",
    highlighted = "battery",
    suffix = " staple"

let x = 100,
    y = 100

ctx.font = '20px Helvetica'
ctx.fillText(prefix, x, y)
x += ctx.measureText(prefix).width

ctx.fillStyle = 'red'
ctx.fillText(highlighted, x, y)
x += ctx.measureText(highlighted).width

ctx.fillStyle = 'black'
ctx.fillText(suffix, x, y)

[Farman52]

Thanks, looks so simple now