coding with image object, HTML Canvas and HTML Form data

I am writing some code to work with images in users browser to work with image. To perform these I need some sample code which can work with html image, canvas and then can send to server as form data.

User will choose some image file(s) and it will be opened in image object, later will move to canvas and user will do some adjustment (rotate, brightness, color adjust etc) in canvas then finally these will send to server to save.

To perform these I need to know how can I transform form data to image and canvas or image object to canvas then form data. Overall if I can get some sample code which can work with image data and can transform among these three then it will be fine for me.

I have tried below codes for my work

From Canvas to Image

function to_image()
{
   var canvas = document.getElementById("thecanvas");
   document.getElementById("theimage").src = canvas.toDataURL();
   var image = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream"); 
   window.location.href=image; // can not save to local file, I need to save with file name
   //Canvas2Image.saveAsPNG(canvas); - not working
}

Canvas to Image and then save

function imagePrcessAndSave()
{
  var image = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream"); 
  window.location.href=image; // it will save locally
}

Get file from form data and set to image and after processing add to form data

function Process()
{
 var data = new FormData();
  for (var i = 0; i < selectedFiles.length; i++) 
  {
    target_img.src=selectedFiles[i].src; //Get and assign to image object
    //Process Image here
    data.append(selectedFiles[i], target_img);//processed image add back to form data to send server 
  }
}