My HW instruction specifically calls for this: RGB where red is 0, green is the x-coordinate divided by 2, and blue is the y-coordinate divided by two. So far, my big canvas' colors are controlled by addColorStop functions but I'm not sure how to get the colors to change and how it should change. Any help is appreciated as I have been stuck on this for 2 days. Thanks.
<!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; //pixelContainer grabs the context of "big" canvas but only one pixel worth
console.log(pixelContainer); //just to see if pixelContainer is working
console.log(pixelContainer[0],pixelContainer[1],pixelContainer[2],pixelContainer[3])
//understand what this is later
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>
This is a straightforward way to have the background color of the canvas change on mousemove
rif: mousemove MDN
document.querySelector('canvas').addEventListener('mousemove', evt =>
evt.target.style.backgroundColor = `rgb(0, ${evt.offsetX / 2}, ${evt.offsetY / 2})`
)<!DOCTYPE html>
<html>
<head>
<title>test</title>
</head>
<body>
<canvas width="512" height="512"></canvas>
</body>
</html>