Estou montando uma arena utilizando recursos de HTML/JS
com o canvas
.
Tenho o seguinte código:
function montarArena() {
var canvas;
var heightCanvas = 498;
var widthCanvas = 598;
var qtdLinhas = $('#larguraCampo').val();
var qtdColunas = $('#alturaCampo').val();
var tamanhoLinha = widthCanvas / qtdLinhas;
var tamanhoColuna = heightCanvas / qtdColunas;
canvas = document.getElementById('imageView');
context = canvas.getContext('2d');
context.strokeStyle = '#000000';
context.fillStyle = '#fff';
context.clearRect(1, 1, widthCanvas, heightCanvas);
console.log("tamColuna: " + tamanhoColuna + " tamLinha: " + tamanhoLinha + " QtdColunas: " + qtdColunas + " QtdLinhas: " + qtdLinhas);
for (i = 0; i <= qtdLinhas; i++) {
for (j = 0; j <= qtdColunas; j++) {
context.strokeRect(j, i, tamanhoLinha * i, tamanhoColuna * j);
}
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<input type="range" id="larguraCampo" value="1" min="1" max="25" onchange="montarArena()" />
<input type="range" id="alturaCampo" value="1" min="1" max="25" onchange="montarArena()" />
<br/><br/><br/><br/><br/><br/>
<canvas id="imageView" width="600" height="500"></canvas>
A medida que a quantidade de linhas é acrescida, a arena vai ficando torta.... Do seguinte modo:
Eu preciso que ela fique ajustada, como se fosse uma tabela mesmo:
Não estou percebendo aonde estou errando.