drawing hidden image to html5 canvas

Question

I am drawing a user uploaded image to the canvas then resizing the image and sending it to amazon S3. However, I don't want to show the user the image while it's being drawn, I want it to stay hidden. Is this possible? I am using angular js and angular upload to handle this. A second alternative would be to draw the images to a table that looks somewhat nice, but I'd like to see if I can crack this first. Here is the code:

$scope.onFileSelect = function ($files) {
        $scope.files = $files;
        $scope.upload = [];
        for (var i = 0; i < $files.length; i++) {
            var fr = new FileReader();
            fr.onload = function (e) {
                var img = new Image();
                var fileSent = false;
                img.onload = function(){
                    var MAXWidthHeight = 488;
                    var ratio = MAXWidthHeight / Math.max(this.width,this.height);
                    var w = Math.round(this.width * ratio);
                    var h = Math.round(this.height * ratio);
                    var c = document.createElement("canvas");
                    c.width = w;
                    c.height = h;
                    c.setAttribute("hidden", true);
                    c.getContext("2d").drawImage(this,0,0,w,h);
                    this.src = c.toDataURL();
                    if(!fileSent) {
                        sendToS3(c.toDataURL());
                        fileSent = true;
                    }
                    document.body.appendChild(this);
                }
                img.src = e.target.result;
            } 
            fr.readAsDataURL($files[i]);
        }
    };

Answer 1

You could try to draw it first on a second always hidden canvas then copy the canvas using:

ctx = c.getContext("2d"); //I like to do this
ctx.drawImage(canvasHidden,0,0,w,h);

I'm not sure where the problem occurs in your code. Also looks like setting width attribute of the canvas to 0 makes it invisible you should try it to hide it... not sure if it messes with the image overflowing it.