Javascript - [Canvas] Cambiare continuamente colore a un'immagine sfumando. Cosa sbaglio?

Ciao a tutti.
Con il canvas introdotto dall' HTML5 sto cercando di fare questo: ho u'immagine che ha una scritta di un colore su sfondo nero. Lo sfondo deve rimanere nero, mentre voglio che col tempo il colore della scritta vari (ad esempio passi dal rosso al verde poi al blu e così via, il tutto sfumando da un colore all'altro).
Ho partorito questo codice:

var imgS = new Image();
imgS.src = 'scritta.png';
var data;
var pix;
var scritta;
var Color = new Array();
var Bool1 = 0;
var Bool2 = 0;
var Bool3 = 0;
function generateRandomColor () {
  Color[0] = Math.floor(Math.random()*255)+1;
  Color[1] = Math.floor(Math.random()*255)+1;
  Color[2] = Math.floor(Math.random()*255)+1;
  Bool1 = 0;
  Bool2 = 0;
  Bool3 = 0;
  alert('cambio');
}

function changeColor() {
  for (var i = 0; i < pix.length; i += 4) {
    if (pix[i] != 0) {
      if (pix[i] < Color[0])
        pix[i] += 1;
      else if (pix[i] > Color[0])
        pix[i] -= 1;
    if (pix[i] == Color[0])
      Bool1 = 1;
    }
    
    if (pix[i+1] != 0) {
      if (pix[i+1] < Color[1])
        pix[i+1] += 1;
      else if (pix[i+1] > Color[1])
        pix[i+1] -= 1;
    if (pix[i+1] == Color[1])
      Bool2 = 1;
    }
    
    
    if (pix[i+2] != 0) {
      if (pix[i+2] < Color[2])
        pix[i+2] += 1;
      else if (pix[i+2] > Color[2])
        pix[i+2] -= 1;
    if (pix[i+2] == Color[2])
      Bool3 = 1;
    }

  }
  Scritta.putImageData(data, 0, 0);
  if (Bool1==1 && Bool2==1 && Bool3==1)
    generateRandomColor();  
}

function paint() {
    var canvas = document.getElementById('canvas');
    canvas = document.getElementById('canvasS');
    Scritta = canvas.getContext('2d');
    Scritta.fillStyle = 'rgb(255,255,255)';
    Scritta.fillRect(0,0,400,150);
    Scritta.drawImage(imgS,0,0,400,75);
    data = Scritta.getImageData(0,0, 400,75);
    pix = data.data;
    generateRandomColor();
}
var ChangeColorTimer = setInterval("changeColor()",10);

In poche parole l'idea mia è la seguente: genero tre numeri tra 1-255 (lascio lo 0 perchè lo confondo con lo sfondo). Avvio un timer che ogni 10ms prenda ogni pixel della scritta che non sia lo sfondo (quindi che non abbia R G o B nero) e lo diminuisca o lo aumenti di 1 fino a farlo arrivare al valore R G o B stabilito dall'array Color[0] Color[1] e Color[2].
Ogni volta che uno dei tre valori del pixel "arrivi a meta", cioè sia uguale al valore corrispondente R G o B, allora pongo il corrispondente controllo Bool1 Bool2 o Bool3 su 1, cosicchè quando tutti e tre i valori si fissano sul colore generato a caso tutti e tre i Bool risultano 1. In quel caso si si rigenera il colore.
Morale della favola: l'algoritmo non funziona. Inizia a variare colore, ma arrivato a un determinato valore non cambia più. Sembra che non entri mai di nuovo nella funzione generateRandomColor() perchè dopo il primo alert, non ne vedo altri.

Dove sbaglio?

Spero di esser stato chiaro, altrimenti chiedo scusa..
Grazie anticipatamente

Ho provato il tuo codice e sembra funzionare, più o meno.
L'ho un po' massaggiato modificando la riga 5 da 'var scritta' in 'var Scritta', dato che in paint() la usi con la S maiuscola: a quanto ricordo Javascript è case-sensitive, o sbaglio?
Ho aggiunto la riga 'paint()' tra la 66 e la 67, ho modificato un po' di dimensioni per adattarle alla mia immagine ed ho buttato tutto nel body di un file html. Ho tolto l'alert.

Risultato: con Opera funziona correttamente.
Firefox restituisce:
Errore: uncaught exception: [Exception... "Security error" code: "1000" nsresult: "0x805303e8 (NS_ERROR_DOM_SECURITY_ERR)" location: "[...]/a.html Line: 76"].
Chrome non mi carica l'immagine ma cambia i colori (lento).
lim t->ChrW(8734) (IE) = -ChrW(8734) con ChrW(8734) == infinito

Spero di esserti stato utile