My homework assignment requires using RGB colors where the red value is set to 0, green is the x-coordinate divided by 2, and blue is the y-coordinate divided by 2. I've been trying to control the colors on a canvas using addColorStop functions, but I'm struggling to make the colors change as needed. Any assistance on how to achieve this would be greatly appreciated, as I've been stuck on it for the past 2 days. Thank you.
<!DOCTYPE html>
<html>
<body>
<canvas id="big" onclick="myFiller(event);" width="512" height="512" style="border: solid #000000;"></canvas>
<canvas id="small" width="100" height="100" style="background-color: #FF0000;"></canvas>
<p id="para"></p>
<script>
// add eventListener
var c = document.getElementById("big");
var ctx = c.getContext("2d");
var rgbCanvas = ctx.createLinearGradient(c.width, c.height, 120,120);
rgbCanvas.addColorStop(0, "red");
rgbCanvas.addColorStop(0.5 ,"green");
rgbCanvas.addColorStop(1, "blue");
ctx.fillStyle = rgbCanvas;
ctx.fillRect(0,0, 512, 512);
var s = document.getElementById("small");
var stx = s.getContext("2d");
function myFiller(event) {
console.log("running");
// document.getElementById("big").innerHTML = style
// console.log(cData);
var x = event.offsetX;
var y = event.offsetY;
var pixelContainer = ctx.getImageData(x, y, 1, 1).data;
console.log(pixelContainer);
console.log(pixelContainer[0],pixelContainer[1],pixelContainer[2],pixelContainer[3])
document.getElementById("big").innerHTML = "(" + pixelContainer[0] + " " + ")";
var red = (pixelContainer[0]).toString(16);
var green = (pixelContainer[1]).toString(16);
var blue = (pixelContainer[2]).toString(16);
document.getElementById("para").innerHTML = "#"+ red+green+blue;
}
</script>
</body>
</html>