Pass down a canvas ref through Context in React
You can access the ref only after in componentDidMount (after it is rendered). But the parent component is considered rendered only when all of its children are rendered. So children can't access parent's ref before it is rendered. Instead of returning canvas ref directly, try to pass custom function getCanvas() instead:
getCanvas = () => { return this.canvas}And then in your children component call this function to retrieve canvas ref.