Bardzo podobne pytanie już chyba zadawaleś ;)
Utwórz sobie tablice z kolorami póżniej w pętli zmieniaj index (korzystając z reszty z dzielania przez ilosć elementów w tablicy z kolorami). Inne kombinacje możesz uzyskać zwiększając/zmniejszając ilość elementów w tablicy z kolorami i/lub modyfikując dzielnik czyil np dla 4 kolorów co 4 będziesz miał ['red','orange','yellow','blue'] w tablicy i
ctx.fillStyle = letterColors[colorIndex%4];
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<title>litery</title>
<meta name='viewport' content='width=device-width, initial-scale=1'>
</head>
<body>
<canvas id='canvas' width='300' height='300'></canvas>
<script src='main.js'></script>
</body>
</html>
main.js
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
let word = 'jakieś słowo';
let letterColors = ['red','orange','yellow'];
ctx.font = '30pt monospace';
let colorIndex = 0;
word.split('').forEach((letter,index) => {
ctx.fillStyle = letterColors[colorIndex%3];
ctx.fillText(letter, index*20 + 10, 150);
colorIndex++;
})