Ниже небольшой кусочек кода, который рисует сетку Canvas . Как мне обратится к ячейке сетки чтоб ее закрасить по клику?
DrawGrid=(w, h)=> {
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext('2d');
ctx.canvas.width = w;
ctx.canvas.height = h;
for (x = 0; x <= w; x += 20) {
ctx.moveTo(x, 0);
ctx.lineTo(x, h);
for (y = 0; y <= h; y += 20) {
ctx.moveTo(0, y);
ctx.lineTo(w, y);
}
}
ctx.stroke();
};
class Draw extends React.Component{
componentDidMount(){
DrawGrid(600,450);
}
render(){
return(
<canvas id="canvas"></canvas>
);
}
}
ReactDOM.render(<Draw />, document.getElementById('root'));
вот ссылка на мой пока что весь код https://codepen.io/xlabuchik/pen/eMpYGp
canvas
нужно установить обработчик событияclick
(как это делается - читайте документацию reactjs). Далее в установленный обработчик, при его вызове, в первом аргументе придёт объектEvent
. Он будет содержать координаты указателя в момент клика. Далее найдите клетку по этим координатам