JSFiddle - React, Tailwind, and code Playground

by loktar

HTML

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

JavaScript

var canvas = document.getElementById("canvas"),
    ctx = canvas.getContext("2d"),
    width = 200;
    height = 200;

canvas.width = canvas.height = 200;

ctx.fillStyle = "red";
ctx.beginPath;
ctx.fillRect(90,90,20,20);

var imageData = ctx.getImageData(0, 0, width, height),
    inputData = imageData.data,
    objectx = 100,
    objecty = 100;


// grab a 1 pixel area at location 100, 100
var pData = (~~(objectx) + (~~(objecty) * width)) * 4;
var r = inputData[pData],
    g = inputData[pData + 1],
    b = inputData[pData + 2],
    a = inputData[pData + 3];

// the results report 255,0,0,255 because we grabbed the portion in the red rect.
console.log(r + " : " + g + " : " + b + " : " + a);