image or phot Manipulation in a website
===

I want to give  a user the opportunity to upload an image see the image there then change the color of the photo as he wishes then save the image , I looked around and I saw something called Canvas, I found this code on this site "but I don't know, how I can give more option to the user for variaty of changes as well as how I can save everything at the end" any help is appreciated , 
I also know here is the code for uploading an image


but I dotn how u can show the image in a original size after submitting it

            <title>HTML5 Canvas Test</title>
            <script type="text/javascript">
    var x; //drawing context
    var width;
    var height;
    var fg;
    var buffer
    
    window.onload = function() {
        var drawingCanvas = document.getElementById('myDrawing');
        // Check the element is in the DOM and the browser supports canvas
        if(drawingCanvas && drawingCanvas.getContext) {
            // Initaliase a 2-dimensional drawing context
            x = drawingCanvas.getContext('2d');
            width = x.canvas.width;
            height = x.canvas.height;
    
            // grey box grid for transparency testing
            x.fillStyle = '#666666';
            x.fillRect(0,0,width,height);
            x.fillStyle = '#AAAAAA;
            var i,j;
            for (i=0; i<100; i++){
                for (j=0; j<100; j++){
                    if ((i+j)%2==0){
                        x.fillRect(20*i,20*j,20,20);
                    }
                }
            }
    
            fg = new Image();
            fg.src = 'profile.jpg';
    
            // create offscreen buffer, 
            buffer = document.createElement('canvas');
            buffer.width = fg.width;
            buffer.height = fg.height;
            bx = buffer.getContext('2d');
    
            // fill offscreen buffer with the tint color
            bx.fillStyle = '#FFF803'
            bx.fillRect(0,0,buffer.width,buffer.height);
    
            // destination atop makes a result with an alpha channel identical to fg, but with all pixels retaining their original color *as far as I can tell*
            bx.globalCompositeOperation = "destination-atop";
            bx.drawImage(fg,0,0);
    
    
            // to tint the image, draw it first
            x.drawImage(fg,0,0);
    
            //then set the global alpha to the amound that you want to tint it, and draw the buffer directly on top of it.
            x.globalAlpha = 0.5;
            x.drawImage(buffer,0,0);
        }
    }
            </script>
        </head>
        </body>
     <form action="" method="post" enctype="multipart/form-data">
    			<label for="file">Filename:</label>
    				<input type="file" name="file" id="file" /> 
    			<br />
    			<input type="submit" name="submit" value="Submit" />
    			</form>
    
            <canvas id="myDrawing" width="770" height="400">
                <p>Your browser doesn't support canvas.</p>
            </canvas>

