Lo que intento hacer en este codigo es simple: quiero simplificar tanto el codigo del generador de colores (array) para que quede en una function o un bucle for y poder cambiarle su nombre (a,b,c,etc) y que no se clonen entre si.
var colores = ['Blue','Yellow','Orange','Red','Green','Violet','Pink','Black','White']
// GENERA UN COLOR ALEATORIO DEL ARRAY
var a = colores[Math.floor(Math.random() * colores.length)]
var b = colores[Math.floor(Math.random() * colores.length)]
var c = colores[Math.floor(Math.random() * colores.length)]
var e = colores[Math.floor(Math.random() * colores.length)]
var f = colores[Math.floor(Math.random() * colores.length)]
var g = colores[Math.floor(Math.random() * colores.length)]
var h = colores[Math.floor(Math.random() * colores.length)]
var i = colores[Math.floor(Math.random() * colores.length)]
var j = colores[Math.floor(Math.random() * colores.length)]
//////////////////////////////////////
document.getElementById('cuadro1').style.backgroundColor = a;
document.getElementById('cuadro2').style.backgroundColor = b;
document.getElementById('cuadro3').style.backgroundColor = c;
document.getElementById('cuadro4').style.backgroundColor = e;
document.getElementById('cuadro5').style.backgroundColor = f;
document.getElementById('cuadro6').style.backgroundColor = g;
document.getElementById('cuadro7').style.backgroundColor = h;
document.getElementById('cuadro8').style.backgroundColor = i;
document.getElementById('cuadro9').style.backgroundColor = j;
<canvas id="cuadro1" onclick="" width="155" height="155"></canvas>
<canvas id="cuadro2" onclick="" width="155" height="155"></canvas>
<canvas id="cuadro3" onclick="" width="155" height="155"></canvas>
<br/> </br>
<canvas id="cuadro4" onclick="" width="155" heigth="155"></canvas>
<canvas id="cuadro5" onclick="" width="155" heigth="155"></canvas>
<canvas id="cuadro6" onclick="" width="155" heigth="155"></canvas>
<br/> </br>
<canvas id="cuadro7" onclick="" width="155" heigth="155"></canvas>
<canvas id="cuadro8" onclick="" width="155" heigth="155"></canvas>
<canvas id="cuadro9" onclick="" width="155" heigth="155"></canvas>
Y lo mismo para los nueve getElementById que hay en el final. Que si se genera un color azul, no pueda haber otro color azul de los otros nueve cuadrados. De todas las function que he intentado hacer no me ha funcionado.