title: TypeError: ctx.translate is not a function
body: <p>I'm following a tutorial on using react with html5 canvas. The author is using a class base component and therefore using componentDidMount when a method updateCanvas() has rendered.</p>
  
  <p>I'm using a function based component along with hooks. Therefore I am using useEffect when the methods drawTree, Branch and Leaf rendered. </p>
  
  <p>I am receiving an error message 'TypeError: ctx.translate is not a function' in my browser, but in <a href="https://codesandbox.io/s/xenodochial-shape-whtqc?file=/src/App.js" rel="nofollow noreferrer">sandbox</a> I am not receiving any error message but my component is not rendering. Additionally in my code editor .getContext('2D') is grayed out and when i hover over it i get a message 'unresolved function or method'. </p>
  
  <p><a href="https://i.stack.imgur.com/VOFiR.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/VOFiR.png" alt="enter image description here"></a></p>