JSFiddle - React, Tailwind, and code Playground

HTML

<span id="pixel"></span>
<canvas id="myCanvas" width="400" height="400" style="border:1px solid grey"></canvas>
<script src="https://www.lactame.com/lib/image-js/0.21.2/image.min.js"></script>

JavaScript

async function getImage(url) {
  const imageLoadPromise = new Promise((resolve) => {
    const image = new Image();
    image.crossOrigin = "Anonymous";
    image.src = url;
    image.onload = () => {
      resolve(image);
    };
  });
  return imageLoadPromise;
}
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
async function loadImage() {
	const img = await getImage("https://res.cloudinary.com/casestry-com/image/upload/casestry-studio/render/14PMT/p1/black/2500x3000/gloss_mask.png");
  canvas.width = img.width;
  canvas.height = img.height;
  ctx.drawImage(img, 0, 0);
  const data = ctx.getImageData(551, 1439, 1, 1).data;
  try{
    console.log('read by canvas:', [data[0], data[1], data[2]])
  } catch (e) {
    console.log(e);
  }
}

async function readByImageJs() {
	let image = await IJS.Image.load("https://res.cloudinary.com/casestry-com/image/upload/casestry-studio/render/14PMT/p1/black/2500x3000/gloss_mask.png");
  console.log('read by imagejs:', image.getPixelXY(551, 1439));
}

loadImage()
readByImageJs();