在Javascript中使用x，y坐标访问像素

我有以下Javascript代码-

var img=new SimpleImage('image.png');

---

image.png文件的尺寸为10x10。现在我需要访问坐标（5,4）处的像素并获取其红色值。我在谷歌上搜索过，但找不到使用像素坐标访问像素的方法。如何才能做到这一点？

您必须将图像加载到画布上，使用以获取图像数据

摘自MDN

var img=newimage（）；
img.src=https://i.imgur.com/KM2bAUL.jpeg';
img.crossOrigin=“匿名”；
var canvas=document.getElementById（'canvas'）；
var ctx=canvas.getContext（'2d'）；
img.onload=函数（）{
ctx.drawImage（img，0，0，300，300）；
img.style.display='none'；
};
var color=document.getElementById（'color'）；
功能拾取（事件）{
var x=事件.layerX；
var y=event.layerY；
var pixel=ctx.getImageData（x，y，1，1）；
var数据=像素数据；
变量rgba='rgba（'+data[0]+'，'+data[1]+
“，”+数据[2]+”，“+（数据[3]/255）+”）；
color.style.background=rgba；
color.textContent=rgba；
}
canvas.addEventListener（'mousemove'，pick）
我会改变