JSFiddle - React, Tailwind, and code Playground

by Josh Pullen

JavaScript

const canvas = document.createElement("canvas");
const ctx = canvas.getContext("2d");

canvas.width = 640;
canvas.height = 640;
canvas.style.border = "1px solid black";

document.body.append(canvas);

const image = new Image();
image.setAttribute('crossOrigin', 'anonymous');

image.onload = function() {
	ctx.drawImage(this, 0, 0);

	const img = ctx.createImageData(canvas.width, canvas.height);

  for (let x = 0; x < canvas.width; x++) {
    for (let y = 0; y < canvas.height; y++) {
      const red = x % 255;
      const blue = y % 255;
      const green = (x + y) % 255;

      const i = y * (canvas.width * 4) + x * 4;
      img.data[i] = red;
      img.data[i + 1] = green;
      img.data[i + 2] = blue;
      img.data[i + 3] = 255; // alpha
    }
  }

  console.log(img);

  /* ctx.putImageData(img, 0, 0) */
}

image.src = "https://u.cubeupload.com/PullJosh/evan.jpeg";