Spread an array on canvas

user_15799842 0
Viewed 67

So I'm relatively new to javascript and I'm trying to do a chess board for two players. I'm designing the board and I wanted to add the numbers and letters on the side and below the board, so I created a Rect under the the board and on the right side. I managed to place the numbers on the right side but when I tried to do it under the board the whole variable just stays together and not spread out. I tried different things already like changing from 'i' to 'j' and even the location but nothing worked I'm new on the whole coding things so if you would like to know more about the code and what I did just ask

Here is the code:

        var ctx = document.getElementById('canvas1').getContext('2d');
        var x = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H'];
        var y = ['1', '2', '3', '4', '5', '6', '7', '8']; 
        for(var i = 0; i < 8; i++){


            for(var j = 0; j < 8; j++){


                if( (i+j) % 2 == 0){
                    color = 'black';
                }
                else{
                    color = 'white';
                }

                ctx.fillStyle = color;
                ctx.fillRect( 20 + i*80, 20 + j*80, 80, 80 );

                ctx.fillText( x [i], 70, 685, + i*80);                 
                
 
            };
         

         ctx.font = '30px helvetica';
         ctx.fillStyle = 'black'; 
         ctx.fillText( y [i], 667.5, 70 + i*80);
canvas html javascript
2 Answers

You can do the following. I recommend extracting constants to separate variables, or event the logic to a functions like drawBox(), drawText() etc.

var ctx = document.getElementById('canvas1').getContext('2d');

var x = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H'];
var y = ['1', '2', '3', '4', '5', '6', '7', '8'];

for (var i = 0; i < 8; i++) {
  for (var j = 0; j < 8; j++) {

    if ((i + j) % 2 == 0) {
      color = 'black';
    } else {
      color = 'white';
    }
    ctx.fillStyle = color;

    let xCord = 20 + j * 80;
    let yCord = 20 + i * 80;

    ctx.fillRect(xCord, yCord, 80, 80);


    ctx.font = '30px helvetica';
    ctx.fillStyle = 'red';
    ctx.fillText(x[j], xCord, (yCord + 40));
  }

}
<canvas id="canvas1" height="700" width="700" />

user_23332140

You should not place this in the inner loop, as you don't want to print a letter/digit 64 times. Put it in the outer loop, or even a separate loop. For the font-size you have chosen, you would better increase the space available for those letters/digits. I have chosen 40 instead of 20, increasing the canvas size to make it fit.

For printing the letters, it may be helpful to center the text both horizontally and vertically. There are properties for that on the context object.

Also define the size of the squares and this "gutter" as separate constants. This will make it easier to adapt them later when needed.

Finally, if the board has the white chess pieces at the bottom (as is common), then the black/white fields should be inverted, and the numbering at the sides should start from the bottom.

const ctx = document.getElementById('canvas1').getContext('2d');

const x = 'ABCDEFGH';
const y = '12345678';
const size = 80;
const gutter = 40;

for (let i = 0; i < 8; i++) {
  for (let j = 0; j < 8; j++) {
    ctx.fillStyle = ["white", "black"][(i + j) % 2];
    const xCord = gutter + j * size;
    const yCord = gutter + i * size;
    ctx.fillRect(xCord, yCord, size, size);
  }
}

// Set alignment of text to center in both directions
ctx.textAlign = 'center';
ctx.textBaseline = 'middle';

ctx.font = '30px helvetica';
ctx.fillStyle = 'red';

for (let i = 0; i < 8; i++) {
    ctx.fillText(x[i], gutter + (i + 0.5) * size, gutter / 2);
    ctx.fillText(y[7-i], gutter / 2, gutter + (i + 0.5) * size);
    ctx.fillText(x[i], gutter + (i + 0.5) * size, gutter * 1.5 + size * 8);
    ctx.fillText(y[7-i], gutter * 1.5 + size * 8, gutter + (i + 0.5) * size);
}
<canvas id="canvas1" height="720" width="720" />

user_54598390
Related