title: Why is HTML5 drawImage not drawing images on canvas?
body: <p>I have tried adding an eventListener to draw the image only after the image has loaded.
  I have also tried placing the event listener before and after setting the image src but still nothing seems to work.</p>
  <p>I just cant seem to figure out exactly what's causing this. Can someone explain please.</p>
  <pre><code>import React from 'react';
  import {useEffect, useState} from 'react';
  
  function Main() {
      //initiate state
      const [ plane, setPlane ] = useState( new Image() );
      const [ star, setStar ] = useState( new Image() );
      const [ bird, setBird ] = useState( new Image() );
      const [ parachute, setParachute ] = useState( new Image() );
      const [ cloud, setCloud ] = useState( new Image() );
      
      //draw the game animation
      let draw = () =&gt; {
          const canvas = document.getElementById('canvas');
          const context = canvas.getContext('2d'); //context
  
          //set background color
          context.fillStyle = '#74b9ff';
          //context.fillRect(0, 0, canvas.width, canvas.height);
  
          //load images
          plane.src = 'images/plane.png';
          plane.onload = drawImage( context);
          star.src = 'images/star.png';
          bird.src = 'images/bird.png';
          parachute.src = 'images/parachute.png';
          //cloud.src = 'images/cloud.png';
          // setPlane( prevState =&gt; { return {...prevState, src: 'images/plane.png' }  } );
          // setStar( prevState =&gt; { return {...prevState, src: 'images/star.png' }  } );
          // setBird( prevState =&gt; { return {...prevState, src: 'images/bird.png' }  } );
          // setParachute( prevState =&gt; { return {...prevState, src: 'images/parachute.png' }  } );
          // setCloud( prevState =&gt; { return {...prevState, src: 'images/cloud.png' }  } );
          
          
  
      }
  
      let drawImage = ( context ) =&gt; {
          context.drawImage(plane, 0, 0, 50, 50);
      }
  
      useEffect( () =&gt; draw(), [] );
  
      return (
          &lt;div className=&quot;container&quot;&gt;
              &lt;canvas width='400px' height='400px' id='canvas'&gt;&lt;/canvas&gt;
          &lt;/div&gt;
      );
  }
  
  export default Main;
  
  </code></pre>