JSFiddle - React, Tailwind, and code Playground

by Alan Doe

HTML

<div id="canvasContainer">
    <canvas id="drawer">
        
    </canvas>
    
</div>

CSS

#drawer
{
    width:100%;
    height:100%;
    
}

JavaScript

$(document).ready(function()
                  {
           var ctx = $("#drawer").get(0).getContext('2d');
            var bodWidth = $(document).width();
             
            var bodHeight = $(document).height();
           
             var tilesX = bodWidth / 40;
             var tilesY = bodHeight /40;
             var fillColours = ["#2A2C2B","#D9CB9E"]
                      
          
                      
              var strokeCounter = fillColours.length; 
                      
                      
                      
                      for(var i = 0; i < 10; i++)
                      {
                          
                          for(var j = 0; j < 10; j++)
                          {    
                              if((j % strokeCounter) == 0)
                              {
                                  ctx.fillStyle = fillColours[0];
                              }
                              else if((j % strokeCounter) == 1)
                              {
                                  ctx.fillStyle = fillColours[1];
                              }
                             
                              ctx.fillRect(j*40, i*40, 30,30);
                          }
                      }           
           
           
                  
                  });