JSFiddle - React, Tailwind, and code Playground

by Scott Kaye

HTML

<canvas id="source"></canvas>
<canvas id="scope"></canvas>

CSS

canvas {
  outline: 1px solid lime;
}

JavaScript

let source = document.getElementById("source");
let scope = document.getElementById("scope");

source.width = 100;
source.height = 100;

scope.width = 100;
scope.height = 100;

let sourceContext = source.getContext("2d");
let scopeContext = scope.getContext("2d");

sourceContext.fillStyle = "#d00";
sourceContext.fillRect(0, 0, source.width, source.height);

function renderScope() {
	let imageData = sourceContext.getImageData(0, 0, source.width, source.height).data;
  let length = imageData.length;
  
  for (let i = 0; i < length; i += 4) {
  	let r = imageData[i];
    let g = imageData[i + 1];
    let b = imageData[i + 2];
    let a = imageData[i + 3];
    
    let y = r *  0.299000 + g *  0.587000 + b *  0.114000;
		let u = r * -0.168736 + g * -0.331264 + b *  0.500000 + 128;
		let v = r *  0.500000 + g * -0.418688 + b * -0.081312 + 128;
    
    let xCoord = ((u / 255) * 100) | 0;
    let yCoord = ((v / 255) * 100) | 0;
    
    scopeContext.fillStyle = "#000";
    scopeContext.fillRect(xCoord, yCoord, 4, 4);
  }
  
  console.log(imageData);

	//requestAnimationFrame(renderScope);	
}

renderScope();