Why does this not work? It is supposed to return the RGB values in an alert box.
Is there any unnecessary code?
Is there any unnecessary code?
JavaScript:
<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);
red=imgData.data[0];
green=imgData.data[1];
blue=imgData.data[2];
alpha=imgData.data[3];
alert(red + " " + green + " " + blue + " " + alpha);
};
</script>
</body>
</html>