JSFiddle - React, Tailwind, and code Playground

by Darby Rathbone

HTML

<canvas id="canvas" height="256" width="256"></canvas>

JavaScript

var canvas = document.getElementById('canvas');
canvas.width = document.getWidth()-10;
canvas.height = document.getHeight()-10;
var canvasWidth  = canvas.width;
var canvasHeight = canvas.height;
var ctx = canvas.getContext('2d');
var imageData = ctx.getImageData(0, 0, canvasWidth, canvasHeight);

var data = imageData.data;
var index = 0;
for (var y = 0; y < canvasHeight; ++y) {
    for (var x = 0; x < canvasWidth; ++x) {
        //var index = (y * canvasWidth + x) * 4;

        var value =( x%256) * (y%256 )%256;

        data[index++]   = x&0xff;    // red
        data[index++] = y&0xff;    // green
        data[index++] = value;    // blue
        data[index++] = 255;      // alpha
    }
}

ctx.putImageData(imageData, 0, 0);