Перерисовка раздела холста (на основе сетки)

Question

У меня есть некоторый перлин-шум, генерирующий «карту»: http://jsfiddle.net/rossc1/RKCdZ/ (обновлено для работы на JSFiddle - спасибо @Ross)

Что я действительно хочу, так это перерисовывать раздел вокруг «reddot» (используйте WASD для перемещения).

Технически это работает, но смещение неверно и карта перерисовывается неправильно :( Я боролся с этим некоторое время. Приветствую вас за помощь!

p.s. Не обращайте внимания на то, что нет проверки ошибок:)

p.p.s Это раздел, который вызывает у меня хлопоты:

function updateMap() {
    //update display functions here

    for (x = yX-8; x <= yX+8; x++) {
        for (y = yY-8; y <= yY+8; y++) {

            if (x >= 0 && y >= 0 && x < mapSize && y < mapSize) {

                if (perlin[x][y] === 0) {
                    rect(7*(x),7*(y), 7, 7, '#6fb4db'); //water
                } else {
                    rect(7*(x),7*(y), 7, 7, 'rgb('+perlin[x][y]+','+ (perlin[x][y] + 50) +','+perlin[x][y]+')'); //land
                }

                if (x === yX && y === yY) {
                    rect(7*(x),7*(y), 7, 7, 'rgb(225,0,0)'); //you
                }

            }

        }
    }   
}

Answer 1

О, дорогой! Я знаю почему. Ты будешь ненавидеть этого.

ctx.rect и ctx.fillRect - это не одно и то же! rect только для путей и fillRect не использует пути. Вы создаете путь, используя fillRect с цветом previous , а затем закрываете свой полностью пустой путь! Сделайте одно из двух изменений:

    function rect(x,y,w,h,col) {
        ctx.beginPath();
        // rect and not fillRect!
        ctx.rect(x,y,w,h);
        if (col) {
            ctx.fillStyle = col;
        }
        //ctx.stroke();
        ctx.closePath();
        ctx.fill();
    }

Или:

    function rect(x,y,w,h,col) {
        // set fillStyle BEFORE calling fillRect!
        if (col) {
            ctx.fillStyle = col;
        }
        ctx.fillRect(x,y,w,h);
    }

Пример: http://jsfiddle.net/RKCdZ/6/

Другими словами, ваша математика была правильной все время! Вы просто заполняли каждый квадрат предыдущим цветом.