<script>

  window.onload = function() {

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

  var context = canvas.getContext("2d");
////////////////////////////////////// start here

  //// MODULUS EXAMPLE
var color;
var w = 30;

  var h = 30;
var cols = 15;

  var rows = 10;
// DETERMINE THE ROWS AND COLUMNS
for (var j=0; j<cols; j++) { // COLUMNS
 for (var k=0; k<rows; k++) { // ROWS

  

  // is it a multiple of 2? 0 = yes | 1 = no

  

  var jj = j % 2; 

  var kk = k % 2; 

  

  var jjkk = jj+kk;

  

  var mm = jjkk % 2;

  

  if (mm) { color = "red"; } else {color = "green"; }

  

  // PLAY 

  context.rotate(j/1000);

  

  // CREATE THE GRID

  square(j*w,k*h,w,h,color);

  

  // TEST THE VALUES OF THE VARIABLES

  

  var myDisplay = " j = " + j + " | k = " + k + " | jj = " + jj + " | kk = " + kk + " | mm = " + mm + " | jj + kk = " + (jj+kk) + "<br />"; 
document.getElementById('display').innerHTML += myDisplay;

  

  }

  }


// CREATE EACH INDIVIDUAL SQUARE USING THEW INFO YOU SEND FROM THE REPEAT LOOP
function square(x,y,w,h,color) {

  

  context.beginPath();

  

  

  context.rect(x,y,w,h);

  

  context.fillStyle = color;

  context.fill();

  context.strokeStyle = "black";

  context.lineWidth = 2;

  context.stroke();

  }


////////////////////////////////////// end here
};
</script>