Текст внутри холста Квадрат не появляется

Question

Я хочу создать зеленые квадраты на холсте, а затем положить белый "X" внутри всех них.Проблема в том, что когда я использую свою функцию writeX() с координатами внутри квадрата, текст не появляется.Как я могу решить это?

function drawSquare(xR,yR) {   
    ctx.beginPath();
    ctx.fillStyle='rgba(124,252,0,0.5)';
    ctx.fillRect(xR,yR,60,60);
    ctx.strokeRect(xR,yR,60,60)
    ctx.closePath();
}

function writeX(xR,yR) {
    ctx.font = "30px Impact";
    ctx.fillStyle = 'white';
    ctx.textAlign = "center";
    ctx.fillText("X", xR+30,yR+40);
}

function generateSquares() {
    for(i=0;i<currentSquares;i++) {
        var coords=new Array;
        coords=String(positions[i]).split(';',5);
        drawSquare(coords[0],coords[1]);
        writeX(coords[0],coords[1]);
    }
}

Answer 1

Предполагая, что ваша positions переменная Array:

var positions = ['0;0', '61;0', '121;0', '0;61', '61;61', '121;61']

И currentSquares - это число, которое отражает количество возможных позиций:

var currentSquares = positions.length

Это работает:

var positions = ['0;0', '61;0', '121;0', '0;61', '61;61', '121;61']; // pairs of 'X;Y'
var currentSquares = positions.length;

var canvas = document.querySelector('#surface');
var ctx = canvas.getContext('2d');

function toNumber (x) {
  return Number(x);
}

function drawSquare(xR,yR) {   
    ctx.beginPath();
    ctx.fillStyle='rgba(124,252,0,0.5)';
    ctx.fillRect(xR,yR,60,60);
    ctx.strokeRect(xR,yR,60,60)
    ctx.closePath();
}

function writeX(xR,yR) {
    ctx.font = "30px Arial"; // changed "Impact" to "Arial" because "Impact" isn't necessarily installed for every user
    ctx.fillStyle = 'white';
    ctx.textAlign = "center";
    ctx.fillText("X", xR+30,yR+40);
}

function generateSquares() {
    for(var i=0; i < currentSquares; i++) {
        var coords = positions[i].split(';').map(toNumber); // need to cast "positions" pair into Numbers
        drawSquare(coords[0], coords[1]);
        writeX(coords[0], coords[1]);
    }
}

generateSquares();

<canvas id="surface" width="182" height="182"></canvas>