How to select multiple squares and on click change their background color on a canvas with javascript?
So far I am able to "draw" the canvas and the coordinate grid. The part I am not able to figure out is how to change the background color of a selected square and how to do the same thing with multiple squares (selecting them with the 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>It is a good idea to maintain a state. Here I start off creating an two dimensional array (an array of arrays) that holds an object. The state of the object can be selected=true|false.
In the draw() function I iterate the array and set the fillStyle according to the state of the object.
In the color() function I calculate the index of an object and set the selected property to true. And then I draw the canvas again.
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>