Estoy trabajando en un juego de laberinto en HTML 5.

Esta es la función que utilizo para dibujar una "X" en el lienzo (con el panel táctil, el usuario navegará la X a través del laberinto).

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();       
}

El problema está en elfunción de colisión, principalmente en este código:

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

Estoy buscando una manera óptima de verificar todo el espacio que ocupa la "X" en el lienzo.

Hay más comentarios en el código que usé.

Cuestiones: 1. A veces, la X pasa un poco el borde 2. A veces, la X no se acerca, dejando unos pocos píxeles entre ella y el borde.

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;
    }

Creo que el getImageData obtiene un rectángulo que comienza desde la posición x, y en una esquina.

Así que tal vez haya una forma de dibujarlo usando checkx y checky como las coordenadas para el centro y recuperar un cuadrado de 16 píxeles de ancho