draw on a image uploaded to a html canvas

See more:

HTML5

Canvas

In my web application I need to upload an image into a html5 canvas and draw on that image and save it to the computer.

Html

 <input type='file' id="fileUpload" 
<canvas id="colors_sketch"  width="800" height="600" style="background-color:#ffffff;"></canvas>  

Javascript

function el(id) { return document.getElementById(id); } // Get elem by ID

       var canvas = el("colors_sketch");
       var context = canvas.getContext("2d");

       function readImage() {
           if (this.files && this.files[0]) {
               var FR = new FileReader();
               FR.onload = function (e) {
                   var img = new Image();
                   img.onload = function () {
                       context.drawImage(img, 0, 0,img.width,img.height,0,0,800,600);
                   };
                   img.src = e.target.result;
               };
               FR.readAsDataURL(this.files[0]);
           }
       }

       el("fileUpload").addEventListener("change", readImage, false);

Image uploading is done using the above way.What I want to is find a way to draw on the uploaded image.Can some one help please.