How do I wait to execute my code until all of my images are loaded in pure javascript

my code is

 var stone = new Image(20, 20); var grass = new Image(20, 20); var dirt = new Image(20, 20); stone.id = 'stone' ; stone.src = 'stone.png'; dirt.src = 'dirt.png'; dirt.id = 'dirt' grass.src = 'grass.png'; grass.id = 'grass'` 

and I want to make it so the rest of my code will run after all these images have loaded because as it is now, the images dont get loaded in and when I use them in the HTML Canvas they don't show up