Javascript 使用css设置画布像素数据后，获取画布像素数据是错误的

我正在尝试从

绘制的画布

中获取

rgb颜色数据

。 使用此功能：

function pick(event) {
    var x = event.layerX;
    var y = event.layerY;
    var pixel = ctx.getImageData(x, y, 1, 1);
    var data = pixel.data;
    $("#color").val(pixel.data.toString());
    console.log(pixel.data.toString());
}

但是，当我将

canvas

元素设置为任何相对

宽度（80%/100%）

时，如下所示：

canvas {
    /*width: 100%;*/   /*when i set the width, the rgb values are incorrect .... */
    /*margin-left: auto;
    margin-right: auto;
    display: block;*/
}

我不再从这个函数中获得正确的值

附加我的JS小提琴：

---

拉伸时，需要找出宽度的差异，并将其乘以坐标

//颜色名称
var basecolors=[“（255,0,0）”，
"(255,128,0)",
"(255,255,0)",
"(128,255,0)",
"(0,255,0)",
"(0,255,128)",
"(0,255,255)",
"(0,128,255)",
"(0,0,255)",
"(128,0,255)",
"(255,0,255)",
"(255,0,128)",
"(128,128,128)"
];
//初始化
var ctx=canvas.getContext（“2d”）；
var width=canvas.width；
var height=canvas.height；
var heightPerColor=高度/basecolors.length；
//初始化游标
var xCursor=0；
var-yCursor=0；
拖板（宽度、高度，“s”）；
功能拖板（宽度、高度、类型）{
画布宽度=宽度；
canvas.height=高度；
clearRect（0，0，canvas.width，canvas.height）；
var Grad=ctx.createLinearGradient（0,0，canvas.width，0）；
渐变加色停止（0/6，#F00'）；
渐变加色停止（1/6，#FF0'）；
渐变加色停止（2/6，#0F0'）；
渐变加色停止（3/6，#0FF'）；
渐变加色停止（4/6，#00F'）；
渐变加色停止（5/6，#F0F'）；
渐变加色停止（6/6，#F00'）；
ctx.fillStyle=梯度；
ctx.fillRect（0，0，canvas.width，canvas.height）；
}
;
功能拾取（事件）{
var canvas=document.getElementById（“canvas”）；
//这是拉伸偏移量
//var off=（1/canvas.width）*canvas.offsetWidth；
var off=（1/canvas.offsetWidth）*canvas.width；
//应用偏移量
var x=数学地板（event.layerX*off）-数学地板（canvas.offsetLeft*off）；
变量y=数学地板（event.layerY*off）-数学地板（canvas.offsetTop*off）；
var pixel=ctx.getImageData（x，y，1，1）；
var数据=像素数据；
$（“#color”）.val（[pixel.data[0]，pixel.data[1]，pixel.data[2]，pixel.data[3]].join（'，'）；
//console.log（“canvas.width”和“canvas.offsetWidth”之间的偏移量为“关闭”）；
console.log（off，canvas.offsetWidth，canvas.width，x）；
}
//瞄准按钮
var btn=$（“myBtn”）；
var模态=$（“#myModal”）；
点击（函数（）{
css（“显示”、“块”）；
var canvas=document.getElementById（“canvas”）；
canvas.addEventListener（'mousemove'，pick）；
});
#myModal{
显示：无；
/*默认情况下隐藏*/
位置：固定；
/*原地不动*/
z指数：1；
/*坐在上面*/
填充顶部：100px；
/*盒子的位置*/
左：0；
排名：0；
宽度：100%；
/*全宽*/
身高：100%；
/*全高*/
溢出：自动；
/*如果需要，启用滚动*/
背景色：rgb（0,0,0）；
/*退色*/
背景色：rgba（0,0,0,0.4）；
}
.模态内容{
背景色：#fefe；
保证金：自动；
填充：20px；
边框：1px实心#888；
宽度：80%；
}
帆布{
宽度：100%；
/*左边距：自动；
右边距：自动；
显示：块*/
}

姓名：
开放式颜色
这是因为您需要补偿拉伸效果。您附加的代码片段仍然无法正常工作。尝试将调色板悬停到right@LiranC我还没有补偿宽度的潜在偏移。我的第一个答案只是找到拉伸偏移的解决方案。我已经更新了我的答案，所以它现在执行补偿。