How to resize a picture using HTML5 canvas and then upload it to Google drive?

function uploadFiles(form) {
  try {
    var dropbox = "STpics";
    var folder, folders = DriveApp.getFoldersByName(dropbox);
    var data = getData();
    var myName2 = form.sorp3;
    if (folders.hasNext()) {
      folder = folders.next();
    } else {
      folder = DriveApp.createFolder(dropbox);
    }
    var blob = form.myFile;    
    var file = folder.createFile(blob); 
    file.setName(Mohd +".jpg");
    file.setDescription("Uploaded by " + xxxxx);
  } catch (error) {
    return error.toString();
  }
}

<form id="myForm"><input type="file" name="myFile" accept=".jpg,.jpeg,.png,.gif" />  <br><br><input type="submit" value="upload"
           onclick="this.value='uploading..'; 
                    google.script.run.withSuccessHandler(fileUploaded)
                    .uploadFiles(this.parentNode);
                    return false;"></form><div id="output"></div><script>
    function fileUploaded(status) {
        document.getElementById('myForm').style.display = 'none';
        document.getElementById('output').innerHTML = status;
    }</script><div id="Message12"></div><div id="Message"></div><script>
    function DataSaved(){    
    document.getElementById('Message').innerHTML = "sending...";<?var url = getScriptUrl();?> 
   window.open('<?=url?>?page=2 ','_top' // <- This is what makes it open in a new window.
);
};</script>