I have recently written a script to upload images. Everything works well. But now I want to resize the image after uploading it. I have done some research on it and I want to try it with the `<canvas>` element. I have parts of the script, others are missing and I don't know how to connect everything.

These are the steps:

1. Upload the image into `img/uploads` - Done.

`<form action="picupload.php" method="post" enctype="multipart/form-data">
 <input name="uploadfile" type="file" accept="image/jpeg, image/png">
 <input type="submit" name="btn[upload]">
</form>`

picupload.php:

`$tmp_name = $_FILES['uploadfile']['tmp_name'];
$uploaded = is_uploaded_file($tmp_name);
$upload_dir = "img/uploads";
$savename = "[several code]";`

`if($uploaded == 1)
{
move_uploaded_file (
 $_FILES['uploadfile']['tmp_name'] ,
 "$upload_dir/$savename");
}`
2. Put the image into a canvas element - Missing
3. Resize it - Part of the code I want to use somehow:

```
var MAX_WIDTH = 400;        
var MAX_HEIGHT = 300;
var width = img.width;
var height = img.height;

if (width > height) {
    if (width > MAX_WIDTH) {
        height *= MAX_WIDTH / width;
        width = MAX_WIDTH;
    }
} else {
    if (height > MAX_HEIGHT) {
        width *= MAX_HEIGHT / height;
        height = MAX_HEIGHT;
    }
}

```
4. Replace the existing image with the new resized one. - Missing

It would be very nice if someone would give me some tips to complete it - Thank you!