Finding RGB Value - Conditional

When red is less than the RGB value it is supposed to document.write “Y”. Why does it not work, please?

<html><body>
<img id="rabbit" src="https://clipartstation.com/wp-content/uploads/2017/11/rabbits-clipart-4.gif"  width="220" height="277">
<canvas id="myCanvas" width="220" height="277" style="border:1px solid #d3d3d3;"></canvas>

<script>
document.getElementById("rabbit").onload = function() {
  var c = document.getElementById("myCanvas");
  var ctx = c.getContext("2d");
  var img = document.getElementById("rabbit");
  ctx.drawImage(img, 0, 0);
  var imgData = ctx.getImageData(0, 0, c.width, c.height);  
  
var imgData = ctx.getImageData(30, 30, 50, 50);
red = imgData.data[0];
green = imgData.data[1];
blue = imgData.data[2];
alpha = imgData.data[3];

  var i;
  for (i = 0; i < imgData.data.length; i += 4) {
    imgData.data[i] = 255 - imgData.data[i];
   if (red < 214) { document.write("Y") }  // Writes "Y" when RGB is 214
    imgData.data[i+1] = 255 - imgData.data[i+1];
    imgData.data[i+2] = 255 - imgData.data[i+2];
    imgData.data[i+3] = 255;
  }
};
</script>
</body></html>

When I try to run the code from Codepen, I see the following error in the browser console:

Uncaught SecurityError: Failed to execute ‘getImageData’ on ‘CanvasRenderingContext2D’: The canvas has been tainted by cross-origin data.

You will need to resolve this error first.

OK, thanks. I just read a little about cross-origin data on third-party sites. But how do I fix it, please?

You can not fix it. The website https://clipartstation.com apparently does not allow hot linking of the site’s images from other websites. You could download the image and host the image on the same site that you host your html file.