Mi instrucción HW requiere específicamente esto: RGB donde el rojo es 0, el verde es la coordenada x dividida por 2 y el azul es la coordenada y dividida por dos. Hasta ahora, los colores de mi gran lienzo están controlados por las funciones addColorStop, pero no estoy seguro de cómo cambiar los colores y cómo debería cambiar. Se agradece cualquier ayuda ya que he estado atascado en esto durante 2 días. Gracias.
<!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>Esta es una forma sencilla de hacer que el color de fondo del lienzo cambie al mover el mousemove
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>