<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
#color {
background: red;
}
</style>
<title>
</title>
</head>
<body>
<canvas id="canvas"></canvas>
<div id="color">цвет</div>
<div id="object" style="display: flex;">[<div id="results"></div>]</div>
<script type="text/javascript">
var mass_color = [];
var img = new Image();
img.src = '2.png';
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
canvas.width = 1000;
canvas.height = 1000
img.onload = function() {
ctx.drawImage(img, 0, 0, 1000, 1000);
img.style.display = 'none';
};
var color = document.getElementById('color');
function pick(event) {
var x = event.layerX;
var y = event.layerY;
var pixel = ctx.getImageData(x, y, 1, 1, 1000, 1000);
var data = pixel.data;
var rgba = 'rgba(' + data[0] + ', ' + data[1] +
', ' + data[2] + ', ' + (data[3] / 255) + ')';
color.style.background = rgba;
color.textContent = rgba;
results.innerHTML += `"${data[0]}${data[1]}${data[2]}${data[3] / 255}",`
}
canvas.addEventListener('mousemove', pick);
</script>
</body>
</html>