¿Cómo seleccionar varios cuadrados y hacer clic en cambiar su color de fondo en un lienzo con javascript?
Hasta ahora puedo "dibujar" el lienzo y la cuadrícula de coordenadas. La parte que no puedo entender es cómo cambiar el color de fondo de un cuadrado seleccionado y cómo hacer lo mismo con varios cuadrados (seleccionándolos con el mouse).
function draw() { var canvas = document.getElementById('canvas'); if (canvas.getContext) { var context = canvas.getContext('2d'); for(var x=0.5;x<500;x+=10) { context.moveTo(x,0); context.lineTo(x,500); } for(var y=0.5; y<500; y+=10) { context.moveTo(0,y); context.lineTo(500,y); } context.strokeStyle='grey'; context.stroke(); } } function color(event) { var x = event.clientX - 10; var y = event.clientY - 10; console.log(x + ' ' + y); // how to color the selected squares? } #canvas { border: 1px solid black;} <body onload='draw()'> <div id=container> <canvas id='canvas' width='500' height='500' onclick="color(event)"></canvas> </div> </body>Es una buena idea mantener un estado. Aquí empiezo creando una matriz bidimensional (una matriz de matrices) que contiene un objeto. El estado del objeto se puede seleccionar = verdadero | falso.
En la función dibujar (), itero la matriz y configuro el estilo de relleno de acuerdo con el estado del objeto.
En la función color(), calculo el índice de un objeto y establezco la propiedad seleccionada en verdadero. Y luego vuelvo a dibujar el lienzo.
var squares = [...new Array(50)].map((a,i) => [...new Array(50)].map((a,i) => {return {selected: false};})); var canvas = document.getElementById('canvas'); var context = canvas.getContext('2d'); function draw() { if (canvas.getContext) { context.fillStyle = 'black'; context.fillRect(0, 0, 501, 501); squares.forEach((line, i) => { line.forEach((square, j) => { context.fillStyle = (square.selected) ? 'red' : 'white'; context.fillRect(10*j+1, 10*i+1, 9, 9); }); }); } } function color(event) { var x = Math.floor((event.clientX - 10) / 10); var y = Math.floor((event.clientY - 10) / 10); squares[y][x].selected = true; draw(); } #canvas { /*border: 1px solid black;*/ } <body onload='draw()'> <div id=container> <canvas id='canvas' width='501' height='501' onclick="color(event)"></canvas> </div> </body>