Координаты холста и столкновения в JS (Снейк)

Question

Я кодирую Snake из JS с помощью этого урока: https://medium.com/free-code-camp/think-like-a-programmer-how-to-build-snake-using-only-javascript-html-and-css-7b1479c3339e

Но я не настолько знаком с Canvas.

В двух функциях, одной для столкновения и одной для создания еды, есть следующий код, который мне нужно объяснить:

function didGameEnd() {
    for (let i = 4; i < snake.length; i++) {
        if (snake[i].x === snake[0].x && snake[i].y === snake[0].y) return true
    }
    const hitLeftWall = snake[0].x < 0;
    const hitRightWall = snake[0].x > gameCanvas.width - 10;
    const hitToptWall = snake[0].y < 0;
    const hitBottomWall = snake[0].y > gameCanvas.height - 10;
    return hitLeftWall || hitRightWall || hitToptWall || hitBottomWall
}

В функции didGameEnd Im интересно, что это означает: "<0;»& "> gameCanvas.width - 10;"?Я думаю о координатах холста, но не могу найти четкого ответа.а также:

function createFood() {
    foodX = randomTen(15, gameCanvas.width - 10);
    foodY = randomTen(15, gameCanvas.height - 10);
    generate a new food location
    snake.forEach(function isFoodOnSnake(part) {
        const foodIsoNsnake = part.x == foodX && part.y == foodY;
        if (foodIsoNsnake) createFood();
    });
}   

И для createFood это также "gameCanvas.width - 10", и почему он говорит 15 раньше?