キャンバスのピクセルデータを取得するのがCSSで設定した後に間違っています

Question

rgb color dataをpainted canvasから取得しようとしています。この機能を持つ ：

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()); 
} 

しかし、私はこのような、任意の相対width (80%/100%)にcanvas要素を設定していたとき：

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

私はもはやこの関数から正しい値を取得しています。あなたはストレッチや座標にそれを掛けたときの幅の違いを見つける必要があり https://jsfiddle.net/iliran11/ay9nf1p9/

Answer 1

：私のJSフィドルを取り付ける

。 offsetLeftとoffsetTop補償

//color names 
 
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)" 
 
]; 
 
//init 
 
var ctx = canvas.getContext("2d"); 
 
var width = canvas.width; 
 
var height = canvas.height; 
 
var heightPerColor = height/basecolors.length; 
 
//init cursor 
 
var xCursor = 0; 
 
var yCursor = 0; 
 
drawPallete(width, height, "s"); 
 
function drawPallete(width, height, type) { 
 
    canvas.width = width; 
 
    canvas.height = height; 
 
    ctx.clearRect(0, 0, canvas.width, canvas.height); 
 
    var Grad = ctx.createLinearGradient(0, 0, canvas.width, 0); 
 
    Grad.addColorStop(0/6, '#F00'); 
 
    Grad.addColorStop(1/6, '#FF0'); 
 
    Grad.addColorStop(2/6, '#0F0'); 
 
    Grad.addColorStop(3/6, '#0FF'); 
 
    Grad.addColorStop(4/6, '#00F'); 
 
    Grad.addColorStop(5/6, '#F0F'); 
 
    Grad.addColorStop(6/6, '#F00'); 
 
    ctx.fillStyle = Grad; 
 
    ctx.fillRect(0, 0, canvas.width, canvas.height); 
 
} 
 
; 
 
function pick(event) { 
 
    var canvas = document.getElementById("canvas"); 
 
    //Here comes the stretch offset 
 
    //var off = (1/canvas.width) * canvas.offsetWidth; 
 
    var off = (1/canvas.offsetWidth) * canvas.width; 
 
    //Applying offset 
 
    var x = Math.floor(event.layerX * off) - Math.floor(canvas.offsetLeft * off); 
 
    var y = Math.floor(event.layerY * off) - Math.floor(canvas.offsetTop * off); 
 
    var pixel = ctx.getImageData(x, y, 1, 1); 
 
    var data = pixel.data; 
 
    $("#color").val([pixel.data[0], pixel.data[1], pixel.data[2], pixel.data[3]].join(',')); 
 
    //console.log("offset between", canvas.width, "and", canvas.offsetWidth, "is", off); 
 
    console.log(off, canvas.offsetWidth, canvas.width, x); 
 
} 
 
// target the button 
 
var btn = $("#myBtn"); 
 
var modal = $("#myModal"); 
 
btn.click(function() { 
 
    modal.css("display", "block"); 
 
    var canvas = document.getElementById("canvas"); 
 
    canvas.addEventListener('mousemove', pick); 
 
});

#myModal { 
 
    display: none; 
 
    /* Hidden by default */ 
 
    position: fixed; 
 
    /* Stay in place */ 
 
    z-index: 1; 
 
    /* Sit on top */ 
 
    padding-top: 100px; 
 
    /* Location of the box */ 
 
    left: 0; 
 
    top: 0; 
 
    width: 100%; 
 
    /* Full width */ 
 
    height: 100%; 
 
    /* Full height */ 
 
    overflow: auto; 
 
    /* Enable scroll if needed */ 
 
    background-color: rgb(0, 0, 0); 
 
    /* Fallback color */ 
 
    background-color: rgba(0, 0, 0, 0.4); 
 
} 
 
.modal-content { 
 
    background-color: #fefefe; 
 
    margin: auto; 
 
    padding: 20px; 
 
    border: 1px solid #888; 
 
    width: 80%; 
 
} 
 
canvas { 
 
    width: 100%; 
 
    /*margin-left: auto; 
 
      margin-right: auto; 
 
      display: block;*/ 
 
}

<form action="" method="post"> 
 
    <label for="POST-name">Name:</label> 
 
    <input id="color" type="text"> 
 
</form> 
 

 
<button id="myBtn">Open Color</button> 
 
<div id="myModal" class="modal"> 
 
    <!-- Modal content --> 
 
    <div class="modal-content"> 
 
    <!-- Set height and width --> 
 
    <canvas id="canvas" width="1000" height="1000"></canvas> 
 
    </div> 
 

 
</div> 
 

 
<script src="https://code.jquery.com/jquery-3.1.1.js" integrity="sha256-16cdPddA6VdVInumRGo6IbivbERE8p7CQR3HzTBuELA=" crossorigin="anonymous"></script>

EDIT 1

。