JSFiddle - React, Tailwind, and code Playground

by Noreh AD

HTML

<canvas id="canvas" style="border: 1px solid blue"></canvas>

JavaScript

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

canvas.width = 10;
canvas.height = 10;

var x = 7;
var y = 4;
var rectWidth	= 1;
var rectHeight	= 1;

context.beginPath();
context.rect(x, y, rectWidth, rectHeight);
context.fillStyle = "red";
context.fill();

var redPixPos	 = (y * canvas.width + x) * 4; // 188
var redImageData = context.getImageData(x, y, rectWidth, rectHeight).data;	// [255,0,0,255]