Я работаю над лабиринтом в HTML 5.

Вот функция, которую я использую, чтобы нарисовать «X» на холсте (с помощью сенсорной панели пользователь будет перемещаться по X через лабиринт).

dim = 8;

function rect(x,y,xdim){
    ctx.beginPath();
    ctx.moveTo(x - xdim, y - xdim);
    ctx.lineTo(x + xdim, y + xdim);
    ctx.moveTo(x + xdim, y - xdim);
    ctx.lineTo(x - xdim, y + xdim);
    ctx.strokeStyle = '#FF5000';
    ctx.stroke();       
}

Проблема вфункция checkcollisionв основном в этом фрагменте кода:

ctx.getImageData(checkx, checky, 16, 16);

Я ищу оптимальный способ проверить все пространство, которое занимает "X" на холсте.

Есть больше комментариев в коде, который я использовал.

Вопросы: 1. Иногда X проходит немного за границу 2. Иногда X нене подходите близко, пропуская несколько пикселей между ним и границей.

function checkcollision(checkx, checky){
        var collision = 0;
        /*
            User presses an arrow key

            Calculate where that would move the square to.

            Look at all of the pixels on the maze image that the square will cover
            in its new position (our square is 15x15 so we look at 225 pixels)

            Are any of the pixels black (the maze is white with black borders. 
            If a pixel is black that means the square would collide with a border)

            YES: then do not move

            NO: then move
        */
        var imgd = ctx.getImageData(checkx, checky, 15, 15);
        pix = imgd.data;
        for (var i = 0; n = pix.length, i < n; i += 4){
            if (pix[i] == 0) {
                collision = 1;
            } else if(pix[i] == 255 && pix[i + 1] == 0){
                winner = "yes";
            }
        }
        return collision;
    }

Я считаю, что getImageData получает прямоугольник, который начинается с позиции x, y в углу.

Так что, возможно, есть способ нарисовать его, используя галочки и галочки в качестве координат для центра и получить квадрат шириной 16 пикселей