Updating the state in a react component with canvas object fails - reactjs

Question

We have a few regions on a world map that will highlight when the user puts their mouse over that region. My approach to the problem is to use the canvas element and draw rough polygons around the regions and using some MIT code detect whether the user has their mouse inside the polygon. If they do then the image will switch to the appropriate graphic that shows the highlighted and labeled region.
Everything seemed to be going okay, but when I try to change the state it bombs out. I'm figuring it has something to do with the vitual dom somewhere.
Here is the component
class HomeMap extends Component {
constructor(props) {
super(props);
this.onMouseMove = this.onMouseMove.bind(this);
this.state = {
placeName: 'default',
};
}
onMouseMove(canvas, eX, eY) {
const { top, left } = canvas.getBoundingClientRect();
const [x, y] = [eX - left, eY - top];
const mouseOver = mapImages.map(image => ({
...image,
isInside: inside([x, y], image.polygon),
}))
.filter(({ isInside }) => isInside);
const stateChange = {
placeName: mouseOver.length === 0
? 'default'
: mouseOver[0].name,
};
console.log(stateChange);
this.setState(stateChange);
}
componentDidMount() {
this.ctx.drawImage(getImage('default').image, 0, 0, 656, 327);
}
componentDidUpdate() {
console.log(getImage('default'))
console.log(this.state);
this.ctx.drawImage(getImage(this.state.placeName).image, 0, 0, 656, 327);
}
render() {
return (
<div>
<canvas
onMouseMove={(e) => { this.onMouseMove(this.canvas, e.clientX, e.clientY); } }
width={626}
height={327}
ref={(ref) => {
this.ctx = ref.getContext('2d');
this.canvas = ref;
} }
/>
</div>
);
}
};
here is a fairly minimal reproduction running on codesandbox
When I run it in production when the component updates the canvas ref becomes null, I believe that is what throws the error.

Answer 1

I found the cause of the problem: caching the 2d context.
<canvas
onMouseMove={(e) => { this.onMouseMove(this.canvas, e.clientX, e.clientY); } }
width={626}
height={327}
ref={(ref) => {
this.ctx = ref.getContext('2d'); // <=== remove this
this.canvas = ref;
} }
/>
So rather than saving the reference to the getContext, I just cached the canvas element and called canvas.getContext('2d') when I needed to access the drawing functions.