'gpu.js how to find needed pixels in a canvas by rgb?

I'm new to image processing. I found the "gpu.js" package and it seems to be very powerful for any kind of image operations in the browser, but there is not much information on google about it and I don't understand how to use it properly.

What I'm trying to do now: I've drawn a canvas with a black (0,0,0) background. I also overlaid a few pixels of different colors on it. I want to get the coordinates (x, y) of all exact RGB pixels on the canvas but I am stuck on this and I don't even see is it possible.

The code for canvas:

const draw = async () => {
      const canvas = document.createElement('canvas');
      canvas.width  = window.innerWidth;
      canvas.height = window.innerHeight;
      canvas.style.backgroundColor = 'rgb(0,0,0)'
      document.body.appendChild(canvas);

      const ctx = canvas.getContext('2d');
      ctx.fillStyle = "rgb(234,0,255)";
      ctx.fillRect(100,100,1,1);

      ctx.fillStyle = "rgb(0,0,255)";
      ctx.fillRect(600,600,1,1);

      ctx.fillStyle = "rgb(0,255,0)";
      ctx.fillRect(600,450,1,1);

      ctx.fillStyle = "rgb(0,254,253)";
      ctx.fillRect(230,230,1,1);

      ctx.fillStyle = "rgb(140,8,9)";
      ctx.fillRect(230,118,1,1);
    }
    draw();

    const gpu = new GPU({mode: "gpu"});

* {
      margin: 0;
      padding: 0;
    }

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8"/>
  <title>GPU</title>
  <script src="https://cdn.jsdelivr.net/npm/gpu.js@latest/dist/gpu-browser.min.js"></script>
  <style>
    
  </style>
</head>
<body>
 
</body>
</html>

For example I'd like to find coordinates of pixels with colors rgb(234,0,255) and rgb(140,8,9)

What should I do to achieve it?

javascript gpu.js

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source

'gpu.js how to find needed pixels in a canvas by rgb?

Sources

Related Questions