CODEWITHSUNDEEP
javascripthtml5-canvas
anekix
anekix

Reputation: 2563

canvas fillRect not working

I have a simple js program.
It creates a tile based map for a game.

The entire canvas is colored green but it should not happen.
Grids on the canvas should be colored based on if their cell is 0 or 1

var tileW = 40,
  tileH = 40;
var mapW = 10,
  mapH = 10;

var gameMap = [
  [0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
  [0, 1, 1, 1, 0, 1, 1, 1, 1, 0],
  [0, 1, 0, 0, 0, 1, 0, 0, 0, 0],
  [0, 1, 1, 1, 1, 1, 1, 1, 1, 0],
  [0, 1, 0, 1, 0, 0, 0, 1, 1, 0],
  [0, 1, 0, 1, 0, 0, 0, 1, 1, 0],
  [0, 1, 1, 1, 1, 1, 1, 1, 1, 0],
  [0, 1, 0, 0, 0, 0, 0, 1, 0, 0],
  [0, 1, 1, 1, 0, 1, 1, 1, 1, 0],
  [0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
];

var canvas = document.getElementById("canvas");

var ctx = canvas.getContext("2d");

function draw_map() {
  for (var x = 0; x < mapW; x++) {
    for (var y = 0; y < mapH; y++) {
      switch (gameMap[y][x]) {
        case 0:
          ctx.fillStyle = "#999787";
        case 1:
          ctx.fillStyle = "#ccffcc";
      }
      ctx.fillRect(x * tileW, y * tileH, tileW, tileH); //->>?? this part is creating problem
    }
  }
}
draw_map();
<canvas id="canvas" width="400" height="400" style="border:1px solid black;">

Upvotes: 0

Views: 461

Answers (3)

n3pixowe
n3pixowe

Reputation: 122

<html>
<body>
<canvas id="canvas" width="400" height="400" style="border:1px solid black;">
</body>
<script>

var tileW=40, tileH=40;
var mapW=10, mapH=10;

var gameMap = [
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 1, 1, 1, 0, 1, 1, 1, 1, 0],
[0, 1, 0, 0, 0, 1, 0, 0, 0, 0],
[0, 1, 1, 1, 1, 1, 1, 1, 1, 0],
[0, 1, 0, 1, 0, 0, 0, 1, 1, 0],
[0, 1, 0, 1, 0, 0, 0, 1, 1, 0],
[0, 1, 1, 1, 1, 1, 1, 1, 1, 0],
[0, 1, 0, 0, 0, 0, 0, 1, 0, 0],
[0, 1, 1, 1, 0, 1, 1, 1, 1, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
];

var canvas = document.getElementById("canvas");

var ctx = canvas.getContext("2d");

function draw_map(){
    for(var x=0; x<mapW; x++) {
        for(var y=0; y<mapH; y++) {
          switch(gameMap[y][x]) {
            case 0:
               ctx.fillStyle="#999787";
               ctx.fillRect(x*tileW, y*tileH, tileW, tileH);
               break;
            case1:
               ctx.fillStyle="#ccffcc";
               ctx.fillRect(x*tileW, y*tileH, tileW, tileH);
               break;
          }

        }
     }
}
draw_map();
</script>

</html>

You need to render every tile in cases of switch with break; statement at the end of case.

Upvotes: 1

Șerban Ghiță
Șerban Ghiță

Reputation: 1947

You're missing the break; statements on switch:

 switch (gameMap[y][x]) {
    case 0:
      ctx.fillStyle = "#999787";
      break; // <------- here
    case 1:
      ctx.fillStyle = "#ccffcc";
      break; // <------- here
  }

Upvotes: 1

Evan Knowles
Evan Knowles

Reputation: 7501

You're missing breaks in your switch statement, so it's falling through from black to green. Try this instead.

      switch(gameMap[y][x]) {
        case 0:
           ctx.fillStyle="#999787";
           break;
        case 1:
           ctx.fillStyle="#ccffcc"; 
           break;
      }

Upvotes: 3

Related Questions