how to resize uploading image on to canvas

Question

I am having trouble trying to resize the uploaded image on to my html for project. When I searched for a solution. The site https://www.w3schools.com/tags/canvas_drawimage.asp gave me an idea but I can't seem to wrap my head about the script. Am I misunderstanding something about the script?

<javascript>    
function uploadForegroundImage(){
fileInput = document.getElementById("foregroundImageUpload");
image = new Image(fileInput);
image.onload = function() {
   var c = document.getElementById("foregroundImageCanvas");
   var ctx = c.getContext("2d");
   var img = document.getElementById(fileInput);
   ctx.drawImage(img, 10, 10, 600, 400);
  }
 }
</javascript>

Answer 1

The code provided should work. If you are getting an error, make sure to load it from a URL that you have access to, or select it using an HTML input tag. Also I'm not aware of a "javascript" tag, it should be changed to "script"