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 = 10
var height = 10
var colors=["#FF0000","#FFF","#00FF00"]
var prev=undefined
for (var x=0; x < canvas.width; x += width) {
  for (var y=0; y < canvas.height; y += height) {
    var colors2=colors.concat(colors.filter(function(c){return c!=prev}))
    var colors3=colors2.concat(colors.filter(function(c){return c!=prev}))
    var col=colors3[Math.floor(random()*colors3.length)]
    prev=col
    ctx.fillStyle = col
    ctx.fillRect(x, y, width, height);
  }
}