Preciso colorir vários canvas, o code abaixo colore um deles
var canvas1 = document.getElementById("a1");
var ctx1 = canvas1.getContext('2d');
ctx1.fillStyle = cor; //aqui vai a cor html
ctx1.fillRect(0, 0, 300, 300);
Posso automatizar a cor através de um array tipo arrcor = [#F95201,#AB31AA,#E70078...], algo como:
ctx1.fillStyle = arrcor[i];
Mas eu preciso que cada cor dessa vá para um canvas diferente de acordo com o ID, algo como id="a1", id="a2", id="a3"... Por isso, preciso automatizar essa mudança, tentei passar uma variável dentro, tipo:
rolln = "a" + i;
var canvas1 = document.getElementById(rolln);
var ctx1 = canvas1.getContext('2d');
ctx1.fillStyle = cor; //aqui vai a cor html
ctx1.fillRect(0, 0, 300, 300);
ou
var canvas1 = document.getElementById("a" + i);
var ctx1 = canvas1.getContext('2d');
ctx1.fillStyle = cor; //aqui vai a cor html
ctx1.fillRect(0, 0, 300, 300);
Mas não funciona, como eu faço para ele ir mudando o id, de acordo com o i (contador) dentro do laço já que o getElementById aceita somente uma string como parâmetro?
"a" + i
aqui é uma string tanto quanto"a1"
. Veja se no console mostra erro, pq sedocument.getElementById("a" + i)
não encontrar nada, dará um erro na linhavar ctx1 = canvas1.getContext('2d');
.