JSFiddle - React, Tailwind, and code Playground

by joshmoto

HTML

<div class="container">
<canvas id="myCanvas" width="400" height="400" style="border:1px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas>

<img src="photo_apple.jpg"/>

</div>

CSS

.container {
  width: 100%;
  height: 10000px;
  background: rgb(34, 193, 195);
  background: linear-gradient(0deg, rgba(34, 193, 195, 1) 0%, rgba(253, 187, 45, 1) 100%);
}

JavaScript

$(window).on("scroll", () => {

  let selector = $(".selector")

  // get pixel color at pos y = 70px, pos x does not matter
  let content = $(".container")
  let rect = content.get(0).getBoundingClientRect()

  // the navbar is fixed, therefore, the containers relative top pos is 0... so we add 70
  let position = rect.top + 70
  console.log(position)
});

window.onload = function() {
  var canvas = document.getElementById('myCanvas');
  var context = canvas.getContext('2d');
  var img = new Image();
  img.src = 'photo_apple.jpg';
  context.drawImage(img, 0, 0);
};

function findPos(obj) {
  var current_left = 0,
    current_top = 0;
  if (obj.offsetParent) {
    do {
      current_left += obj.offsetLeft;
      current_top += obj.offsetTop;
    } while (obj = obj.offsetParent);
    return {
      x: current_left,
      y: current_top
    };
  }
  return undefined;
}

function rgbToHex(r, g, b) {
  if (r > 255 || g > 255 || b > 255)
    throw "Invalid color component";
  return ((r << 16) | (g << 8) | b).toString(16);
}

$('#myCanvas').click(function(e) {
  var position = findPos(this);
  var x = e.pageX - position.x;
  var y = e.pageY - position.y;
  var coordinate = "x=" + x + ", y=" + y;
  var canvas = this.getContext('2d');
  var p = canvas.getImageData(x, y, 1, 1).data;
  var hex = "#" + ("000000" + rgbToHex(p[0], p[1], p[2])).slice(-6);
  alert("HEX: " + hex);
});