Холст не рисует после использования

Question

У меня есть функция, которая при вызове очищает холст.

function ClearCanvas() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
}

Проблема, с которой я столкнулся, заключается в том, что, когда я пытаюсь снова что-то нарисовать на холсте, используя fillRect(), элементы, которые я хочу нарисовать, появляются в нижней части холста, и только некоторые из них появляются. Второй раз, когда я пытаюсь, ничего не появляется.

Чтобы увидеть мой полный код и тестовый прогон, перейдите здесь

var width = 50;
var height = 50;

var interpolate = d3.interpolate('white', 'black');

var elevation = [];
var colormap = [];

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
ctx.canvas.width  = window.innerWidth;
ctx.canvas.height = window.innerHeight;

var rectY = 0;

Generate2DArray(elevation, 0, width, height);
Generate2DArray(colormap, 0, width, height);


var gen = new SimplexNoise();

function Generate2DArray(EmptyArray, fill, width, height) {
    for(var i = 0; i < height; i++) {
        EmptyArray.push([]);
        for(var j = 0; j < width; j++) {
            EmptyArray[i][j] = fill;
        }
    }
}

function noise(nx, ny) {
  // Rescale from -1.0:+1.0 to 0.0:1.0
  return gen.noise2D(nx, ny) / 2 + 0.5;
}

function ClearCanvas() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
}  

function GenTerrain() {


  for(var y = 0; y < height; y++) {
    for(var x = 0; x < width; x++) {      
      var nx = x/width - 0.5, ny = y/height - 0.5;
      elevation[y][x] = noise(nx * 2.57, ny * 2.57);
      colormap[y][x] = interpolate(elevation[y][x]);

      ctx.fillStyle = colormap[y][x];
      ctx.fillRect(x*10, y+rectY, 10, 10);
    }
  rectY += 9
  }
}

Answer 1

Ваш rectY объявляется в верхней части кода на глобальном уровне:

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
ctx.canvas.width  = window.innerWidth;
ctx.canvas.height = window.innerHeight;

var rectY = 0;

Итак, каждый раз, когда GenTerrain запускается, он ссылается на эту переменную и добавляет к ней:

rectY += 9

Исправьте это путем инкапсуляции rectY внутри GenTerrain, чтобы оно начиналось с 0 при каждом вызове функции.

function GenTerrain() {
  var rectY = 0;
  for(var y = 0; y < height; y++) {
    for(var x = 0; x < width; x++) {      
      var nx = x/width - 0.5, ny = y/height - 0.5;
      elevation[y][x] = noise(nx * 2.57, ny * 2.57);
      colormap[y][x] = interpolate(elevation[y][x]);

      ctx.fillStyle = colormap[y][x];
      ctx.fillRect(x*10, y+rectY, 10, 10);
    }
  rectY += 9
  }
}