JSFiddle - React, Tailwind, and code Playground

by ElijahCirioli

HTML

<canvas id="myCanvas" width="600" height="400"></canvas>

JavaScript

var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");

var red = 0;
var green = 0;
var blue = 0;

function draw() {
	context.fillStyle = "black";
	context.fillRect(0, 0, 600, 400);

	context.textAlign = "right";
	context.font = "20px Arial";
	context.fillStyle = "red";
	context.fillText(red, 585, 25);
	context.fillStyle = "green";
	context.fillText(green, 585, 50);
	context.fillStyle = "blue";
	context.fillText(blue, 585, 75);
	
	context.drawImage(img, 50, 50, 300, 300);
	context.drawImage(img, 75, 75, 250, 250);
}

canvas.onmousemove = function(e) {
	var rect = canvas.getBoundingClientRect();
  var x = Math.round(e.clientX - rect.left);
  var y = Math.round(e.clientY - rect.top);
	
	var colorData = context.getImageData(x, y, 1, 1);
	red = colorData.data[0];
	green = colorData.data[1];
	blue = colorData.data[2];
	
	draw();
	context.fillStyle = "white";
	context.textAlign = "right";
	context.fillText("(" + x + ", " + y + ")", 585, 385);
}

var img = new Image();
img.src = "http://dph.am/iDropper/images/hue_ring.png";

draw();