Why is my loop for the getImageData() results not appearing , am I running the loop wrongly? (React)

Question

This is the code

 useEffect(() => {
    if (imageUrl && imageUrl !== '') {
      console.log(imageUrl)
      const canvas = canvasRef.current
      canvas.width = 100
      canvas.height = 100

      const context = canvas.getContext('2d')
      const image = new Image()
      image.src = imageUrl
      image.crossOrigin = "Anonymous";
      image.onload = () => {
        context.filter = 'grayscale(1)';
        context.drawImage(image, 0, 0, canvas.width, canvas.height)
        let pixels = context.getImageData(0, 0, canvas.width , canvas.height).data

        let diseasePixels = 0
        
        //Loop over every pixel - pixel with value of 0 to 86 and 125 to 250 will be counted
        for (let i = 0 ; i >= pixels.length -1 ; i++) {
          if(pixels[i] >= 0 && pixels[i] <= 86) {
            diseasePixels += 1
            console.log(pixels[i])
          } else if (pixels[i] >= 125 && pixels[i] <= 250) {
            diseasePixels += 1
          }
        }
        console.log(diseasePixels)
      }
    }
  }, [imageUrl])

Am i running through the loop the right way? Basically what i want is to run through all the values in the returned pixel array to count how many of those are between 0 to 86 and between 125 to 250. What is the right way to do it. The console.log diseasePixels returns 0.

Answer 1

You've added '>=' try using '<='. as i is starting from 0 and because of that its giving false for your condition. Thanks and voteup if its useful