JSFiddle - React, Tailwind, and code Playground

HTML

<canvas id="myCanvas" width="500" height="400" style="border:1px solid #d3d3d3;"></canvas>

JavaScript

var seed = 1;
function random() { // bad idea from http://stackoverflow.com/a/19303725
    var x = Math.sin(seed++) * 10000;
    return x - Math.floor(x);
}

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");

var width = 50
var height = 25
var colors=["#FF0000","#FFF","#00FF00"]
for (var x=0; x < canvas.width; x += width) {
  for (var y=0; y < canvas.height; y += height) {
    ctx.fillStyle = colors[Math.floor(random()*colors.length)];
    ctx.fillRect(x, y, width, height);
  }
}