JSFiddle - React, Tailwind, and code Playground

by intrinsica

HTML

<canvas id="displayCanvas" width="300px" height="300px"></canvas>

JavaScript

//initialize
var displayCanvas = document.getElementById("displayCanvas");
var context = displayCanvas.getContext("2d", {alpha:true});
var displayWidth = displayCanvas.width;
var displayHeight = displayCanvas.height;
context.imageSmoothingEnabled = false;

//write pixels
context.fillStyle = "rgba(95,212,117,.43137254901960786)";
context.fillRect(0,0,displayWidth,displayHeight);

//read a pixel
var lastImage = context.getImageData(0,0,displayWidth,displayHeight);
var pixelIndex = 4*(300*150 + 150); // grab a pixel from the middle
var message = " results: " + lastImage.data[pixelIndex] +", " + lastImage.data[pixelIndex+1] + ", " + lastImage.data[pixelIndex+2] + ", " + lastImage.data[pixelIndex+3];

//report
var p = document.createElement('pre');
p.innerHTML = message + "<br>expected: 95, 212, 117, 110";
document.body.appendChild(p);