JSFiddle - React, Tailwind, and code Playground

context.createImageData

by schrodingers

HTML

<canvas id="canvas"></canvas>

CSS

body {
  overflow: hidden;
  margin: 0;
  padding: 0;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

JavaScript

/*
title: 
 date: 2017-
 */
//   colorMode(HSB, 360, 100, 100);    fill((int) random(255, 300) / rad * 5, 80, 80);
var canvas, context, image, imageData, x, y, offset;
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
imageData = context.createImageData(canvas.width, canvas.height);
for (y = 0; y < imageData.height; y += 1) {
  for (x = 0; x < imageData.width; x += 1) {
    offset = x * 4 + y * 4 * imageData.width;
    imageData.data[offset] = Math.sin(x * 0.01) * 127 + 128;
    imageData.data[offset + 1] = Math.sin(y * 0.02) * 127 + 128;
    imageData.data[offset + 2] = Math.cos(x * 0.04 + y * 0.03) * 127 + 128;
    imageData.data[offset + 3] = 255;
  }
}
context.putImageData(imageData, 0, 0);;