JSFiddle - React, Tailwind, and code Playground

by brigand

HTML

<div id="example"></div>

CSS

#example {
  width: 314px;
  height: 120px;
  
  overflow: visible;
  box-shadow: 0 0 3px 2px black;
}
#example canvas {
  box-shadow: 0 0 2px 3px blue;
  position: relative;
  top: -5px;
  left: -4px;
}

JavaScript

function rotate(turns, x, y, width, height) {
	switch(turns % 4) {
		case 0: return [x, y];
    case 1: return []
	}
}


const trimCanvas = (c) => {
  const ctx = c.getContext('2d');
  let imgData = ctx.getImageData(0, 0, c.width, c.height);
  let pixels = imgData.data;

let fx1, fx2, fy1, fy2;

  for (let i = 0, j = pixels.length; i < j; i += 4) {
    const r = pixels[i];
    const g = pixels[i + 1];
    const b = pixels[i + 2];

    if (r >= 250 && g >= 250 && b >= 250) {
      pixels[i] = 0;
      pixels[i + 1] = 0;
      pixels[i + 2] = 0;
      pixels[i + 3] = 0;
    }
  }
  

  ctx.putImageData(imgData, 0, 0);
}

const img = new Image();
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');

img.src = 'https://stephenhendricks.me/img/example.jfif';
img.crossOrigin = 'Anonymous';

img.onload = function () {
  canvas.width = this.naturalWidth;
  canvas.height = this.naturalHeight;

  ctx.drawImage(this, 0, 0);

  example.appendChild(canvas);
  trimCanvas(canvas);
};