JSFiddle - React, Tailwind, and code Playground

by razh

HTML

<canvas></canvas>

JavaScript

var canvas = document.querySelector( 'canvas' );
var context = canvas.getContext('2d');

var scale = 1;
var portrait = true;
if (portrait) {
    canvas.width = 768 * scale;
    canvas.height = 1024 * scale;
} else {
    canvas.width = 1024 * scale;
    canvas.height = 768 * scale;
}

var gridSize = 32 * scale;
var cols = canvas.width / gridSize;
var rows = canvas.height / gridSize;

var x, y;
context.font = (8 * scale) + 'px monospace';
context.textBaseline = 'middle';
context.textAlign = 'center';
for ( y = 0; y < rows; y++ ) {
    for ( x = 0; x < cols; x++ ) {
        context.fillStyle = '#555';
        if ( ( y + x ) % 2 ) {
            context.fillStyle = '#000';
        }
        
        context.fillRect( x * gridSize, y * gridSize, gridSize, gridSize );
         
        context.fillStyle = '#fff';
        context.fillText(x + ',' + y, ( x + 0.5 ) * gridSize, ( y + 0.5 ) * gridSize );
    }
}