Pessoal,
Estou com mais uma dúvida. Alguém poderia me dar uma sugestão de como resolver o problema em questão? 1-Preciso de preencher todo o canvas que está em 600x400 com pequenos quadrados de 50x50. 2-Fiz o seguinte código abaixo e mesmo chamando a função para desenhar a barra na direção Y e a barra na direção X percebi que o canvas não preenche toda a tela e sim redimensiona de acordo com os paramentos passado para as funções somente uma vez e constroem as barras x e y. favor olhar o código na integra. Ja tentei muito e não consegui encontrar uma solução.
<meta charset="UTF-8">
<canvas width="600" height="400"></canvas>
<script>
var tela = document.querySelector('canvas');
var pincel = tela.getContext('2d');
pincel.fillStyle="lightgrey";
pincel.fillRect(0, 0, 600, 400); // x , y , width , height
function desenhaQuadrado(x,y,cor){
pincel.fillStyle = cor;
pincel.fillRect(x, y, 50, 50); // x , y , width , height
pincel.strokeRect(x, y, 50, 50);
}
var cores = ["darkblue","blue","lightblue","darkred","red","lightres","green","yellow","pink"];
var controlarCoresX=[8];
var controlarCoresY=[8];
var aux = 50;
var aux2 = 50;
var qtdeX=[];
var qtdeY=[];
qtdeX[1] = 0;
qtdeY[1] = 0;
var count = 1;
var c = 1;
function criarBarraY(posX){
//redimensiona Y
while(count <=8){
desenhaQuadrado(posX,qtdeY[count], cores[controlarCoresX]);
controlarCoresX++;
if (controlarCoresX == cores.length){
controlarCoresX = 0;
}
count++;
qtdeY[count] = aux;
aux = aux + 50;
}
}
function criarBarraX(posY){
//redimensiona X
while(c <= 12){
qtdeX[1] = 50;
desenhaQuadrado(qtdeX[c],posY, cores[controlarCoresX]);
controlarCoresX++;
if (controlarCoresX == cores.length){
controlarCoresX = 0;
}
c++;
qtdeX[c] = aux2;
aux2 = aux2 + 50;
}
}
criarBarraX(0); //
criarBarraY(0); //
criarBarraX(50); // aqui deveria apartir da posição 50 criar todos os quadrados de acordo com a função criar barra X
</script>