FillStyle not working

1

HTML Code

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Snake game</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
  <canvas id="myCanvas"></canvas></br></br>
  <marquee>Created by Sapna</marquee>
  <script src="index.js"></script>
 </body>
</html>

CSS code

#myCanvas{
  width:520px;
  height:520px;
  margin-top:30px;
  display: block;
  padding: 0;
  margin-left: auto;
  margin-right: auto;
}

JS Code

alert("Hi");
var height=520;
var width=520;
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var N=20;
var cellSize=width/N;
for(var i=0;i<N;i++){
  for(var j=0;j<N;j++){
      if(i+j%2==0){
        context.fillStyle ="#FFFFFF";
        context.fillRect(i*cellSize, j*cellSize, cellSize, cellSize);
      }
      else{
        context.fillStyle ="#000000";
          context.fillRect(i*cellSize, j*cellSize, cellSize, cellSize);
      }
  }
}

I wanted to create a black and white grid. Can you please find what is wrong with this code.

2

Hello Sapna,
remember the logic priority of operators, if you want to accomplish first x+y you have to put it into brackets!
But iā€™m sure it was an oversight!

1 Like