JSFiddle - React, Tailwind, and code Playground

by angstrey

HTML

<canvas id="tutorial" width="240" height="240">
    Your browser doesn't support canvas!
</canvas>

CSS

#tutorial
{
    border: solid 1px #999;
    box-shadow: 10px 10px 5px #ccc;
}

JavaScript

function drawCheckerBoard(id) {
    var canvas = document.getElementById(id);

    if (!canvas.getContext) {
        return;
    }
   
    var ctx = canvas.getContext("2d"),
        rowCount = 1,
        colCount = 12,
        row, 
        col;
    
    for (row = 0; row < rowCount; row += 1) {
        for (col = 0; col < colCount; col += 1) {
            if (col % 2 === 0) {
                drawWhiteSquare(ctx, row, col);
            } else {
                drawSolidSquare(ctx, row, col);
            }
        }
    }
    
    function drawWhiteSquare(ctx, row, col) {
        ctx.strokeRect(20 * col, 20 * row, 20, 20);
    }
    
    function drawSolidSquare(ctx, row, col) {
        ctx.fillRect(20 * col, 20 * row, 20, 20);
    }
}

drawCheckerBoard("tutorial");