JSFiddle - React, Tailwind, and code Playground

HTML

<canvas id = "gameCanvas" width = "320" height = "480">
</canvas>

JavaScript

var rows = 20;
var cols = 10;
//size of the blocks in image
var size = 32;

    function drawBoard(){
    ctx.fillStyle="#D3D3D3";
	ctx.fillRect( 0,55,320, 400);
    var colors = ['#FFFFFF','#000000'];
    var squares = colors;
    var square = 0;
	canvas = document.getElementById('gameCanvas');
	canvas_width = canvas.width;
    canvas_height = canvas.height;
    for(var row=0; row<rows; row++) {
        for(var col=0; col<cols; col++) {
            var x = col*size;
            var y = row*size;

            ctx.fillStyle = squares[square++%colors.length];
            ctx.fillRect(x,y,size,size);

	

        }
        square += colors.length-1;
    }
    }
var logo2 = new Image();
logo2.src = 'http://hdwallphotos.com/wp-content/uploads/2014/02/Green-Background-Image-CSS-Wallpaper.png'

    function blocks(){
    logo2.onload = function(){
    canvas = document.getElementById('gameCanvas');
    ctx = canvas.getContext('2d');
    for(var row=0; row<rows; row++) {
        for(var col=0; col<cols; col++) {
            var x = col;
            var y = row;
            
    ctx.drawImage(logo2, x,y,23,13);
        }

    }
    };
    }

function main(){
    canvas = document.getElementById("gameCanvas");
    width = window.innerWidth;
    height = window.innerHeight;
        canvas.style.border = "1px solid #000";

	width = 320;
    height = 480;
    canvas.width = width;
    canvas.height = height;
    ctx = canvas.getContext("2d");
    document.body.appendChild(canvas);
}
main();
drawBoard();
blocks();