How to fill an <insert> with a <canvas>
<p>I am trying to allow users to upload a picture, if it is too big I resize it using a canvas then I want to save that canvas as their picture. This is my code:</p>

<pre><code>    &lt;input type="file" id="Avatar" class="input-file" name="uploadProfile" accept="image/*" onchange="myFunction()" /&gt;

    &lt;canvas id="BigPicture" style="border:1px solid #d3d3d3;"/&gt;

    &lt;script&gt;
            function myFunction() {

            //get the element with the picture
            var x = document.getElementById(name["Avatar"]);
            var size = x.files[0].size;

            //if size is too big resize
            if (size &gt;= 4000000) {

                //when the image loads
                img.onload = function () {

                    //this is the size to reduce the picture by
                    var resize = .5;

                    //Get the content of the canvas in a 2d model
                    var ctx = c.getContext("2d");

                    /// step 1 - draw the picture to a dummy canvas so we can modify it before uploading
                    var oc = document.createElement('canvas'),
                    octx = oc.getContext('2d');

                    //make the size of the dummy canvas
                    oc.width = img.width * resize;                    
                    oc.height = img.height * resize;
                    octx.drawImage(img, 0, 0, oc.width, oc.height);

                    // the two step reduction of the picture is totry to  preserve picture quality.
                    //Does not work for really large pictures as they end up looking pixleated.     

                    /// step 2 - resize the image
                    octx.drawImage(oc, 0, 0, oc.width * resize, oc.height * resize);

                    var c = document.getElementById("BigPicture");
                    var ctx = c.getContext("2d");

                    do{
                        /// step 3, resize image until it is small enough
                        ctx.drawImage(oc, 0, 0, oc.width * resize, oc.height * resize, 0, 0, c.width, c.height);                    

                    } while (imgData.data.length &gt;= 4000000)                        
                }
            }
    &lt;/script&gt;
</code></pre>

<p>(BTW I copied snippets of code from my work ^^ this all works for me.)</p>

<p>So once I have loaded the picture and resized it then displayed it for the user to see I want to take the canvas image and replace the input info with the canvas image. </p>

<p>like so...</p>

<pre><code>&lt;script&gt;
    function ifUserLikes()
    {
        var c = document.getElementById("BigPicture");
        var ctx = c.getContext("2d");
        $("Avatar").val(c);
     }
 &lt;/script&gt;
</code></pre>