CODEWITHSUNDEEP
javascriptcanvas
Daley
Daley

Reputation: 43

js chrome graphics problem: data is correct, render is wrong

I am a beginner at JS so I hope this problem is not too ridiculous. I want to render a white square 6x6 with a blue square 2x2 in the centre, using Canvas. When I print out the data I generate, it seems ok. But when it renders, all I get is a blue square 6x6. This is part of a larger file but I have simplified it to concentrate on this one problem. Using chrome devtools. Thanks.

<html lang="en">

  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>obstacleTest</title>
  </head>

  <body>
    <script>
      let _data;
      let gridLength = 6;
      let grid = [];
      let tempGrid = [];

      function drawGrid (data) {
        let width = 600;
        let height = 600;
        let gridLength = data.length;
        let widthCell = width / gridLength;
        let heightCell = height / gridLength;

        let canvas = document.getElementById("grid");
        if (canvas == null) {
          canvas = document.createElement("canvas");
          canvas.id = "grid";
          canvas.width = width;
          canvas.height = height;
          document.getElementsByTagName("body")[0].appendChild(canvas);
        }
        let context = canvas.getContext("2d");

        function drawCells () {
          for (let i = 0; i < gridLength; i++) {
            for (let j = 0; j < gridLength; j++) {
              if (_data && _data[i][j] === cellColor(data[i][j])) {
                continue;
              }
              context.clearRect(
                i * widthCell,
                j * heightCell,
                widthCell,
                heightCell
              );
              context.fillStyle = cellColor(data[i][j]);
              context.fillRect(
                i * widthCell,
                j * heightCell,
                widthCell,
                heightCell
              );
            }
          }
        }
        drawCells();
        if (!_data) {
          _data = [];
        }
        for (let i = 0; i < gridLength; i++) {
          _data[i] = [];
          for (let j = 0; j < gridLength; j++) {
            _data[i][j] = cellColor(data[i][j]);
          }
        }
      }

      function updateGrid (data) {
        drawGrid(data);
      }

      let cellColor = function (cell) {
        return cell.obstacle = true ? "rgb(0,0,250)" : "rgb(125, 125, 125)"; //blue or grey
      };

      function Cell (i, j) {
        this.i = i;
        this.j = j;
        this.obstacle = false;
      }

      function initGrids () {
        for (let i = 0; i < gridLength; i = i + 1) {
          grid[i] = [];
          tempGrid[i] = [];
          for (let j = 0; j < gridLength; j = j + 1) {
            grid[i][j] = new Cell(i, j);
            tempGrid[i][j] = new Cell(i, j);
          }
        }
      }

      function setObstacle () {
        let xmin = 2;
        let xmax = 3;
        let ymin = 2;
        let ymax = 3;
        console.log("xmin, xmax, ymin, ymax ; " + xmin, xmax, ymin, ymax);

          for (let i = xmin; i <= xmax; i++) {
            for (let j = ymin; j <= ymax; j++) {
              grid[i][j].obstacle = true; //  implies blue
              console.log(i, j, grid[i][j].obstacle);
            }
            console.log("________________");
          }
      }

      //___________________________________________________________________________

      initGrids();
  
      for (let i = 0; i < gridLength; i++) {
        for (let j = 0; j < gridLength; j++) {
          grid[i][j].obstacle = false;
          console.log(i, j, grid[i][j].obstacle);
        }
        console.log("_______");
      }

      setObstacle();
      drawGrid(
        grid.map(function (row) {
          return row.map(function (cell) {
            return cell;
          });
        })
      );

      //____________________________________________________________________________

    </script>
  </body>

</html>

Upvotes: 1

Views: 58

Answers (1)

obscure
obscure

Reputation: 12891

There is a really tiny error in your code which causes your issue. Let's have a look at the function returning the appropriate color based on the obstacle property:

let cellColor = function (cell) {
        return cell.obstacle = true ? "rgb(0,0,250)" : "rgb(125, 125, 125)"; //blue or grey
};

If obstacle is true it should return blue and if not gray. The problem is that

return cell.obstacle = true

is not a comparison it's an assignment. So as you always assign true to obstacle, all you get is the blue color. Try changing it to this:

return cell.obstacle === true

Upvotes: 2

Related Questions