JSFiddle - React, Tailwind, and code Playground

by ourjs

HTML

<canvas id="example2" width="400" height="300"></canvas>

JavaScript

// get the canvas and context
var canvas = document.getElementById('example2');
var context = canvas.getContext('2d');

// orange fill style
context.fillStyle = '#ff7700';

// create squares in a loop
for(var x = 0; x < canvas.width; x += 25){
  for(var y = 0; y < canvas.height; y += 25){
    context.fillRect(x, y, 20, 20);
  }
}