Resizing a canvas do not change the data

Question

I m currently using canvas to resize image and then send the resized image to my server.I already done this, and it work fines using canvas.But for this requirement, the canvas is to be resized by the user.I m able to resized the canvas correctly and sending the resized image from the canvas.But the image sent is not the resized one, but the original. Here is my code for the drawing part :

function drawImageOnCanvas(me){
    var file = me.files[0];         
    var fileReader = new FileReader();
    fileName = file.name;

    //make the div visible
    $j(".dv2").show();

    fileReader.onloadend = function(e) {
        var tempImg = new Image();
        var dataURL;
        tempImg.src = this.result;
        tempImg.onload = function() {
            var MAX_WIDTH = 1000;
            var MAX_HEIGHT = 800;
            var tempW = tempImg.width;
            var tempH = tempImg.height;
            if (tempW > tempH) {
                if (tempW > MAX_WIDTH) {
                    tempH *= MAX_WIDTH / tempW;
                    tempW = MAX_WIDTH;
                }
            } else {
                if (tempH > MAX_HEIGHT) {
                    tempW *= MAX_HEIGHT / tempH;
                    tempH = MAX_HEIGHT;
                }
            }            
            var canvas = document.getElementById('myCanvas');
            canvas.width = tempW;
            canvas.height = tempH;                  
            var ctx = canvas.getContext("2d");
            ctx.drawImage(this, 0, 0,tempW,tempH);
            $j("#jq_stretch").height(tempH);
            $j("#jq_stretch").width(tempW);
            $j("#jq_hw_size").text(tempW + " x " + tempH);
        }
    }
    fileReader.onerror = function(e) {
        alert("There was an error reading the file.  Please try again.");
    }
    fileReader.onabort = function(e) {
        alert("There was an error reading the file.  Please try again.");
    }
    fileReader.readAsDataURL(file); 
}

Then I have the user resized part :

$j(function() {
    $j("#jq_stretch").resizable();
    $j("#jq_stretch").resize(function(){
        $j("#jq_hw_size").text($j(this).width() + " x " + $j(this).height());
    });
});

This is my sending part :

function uploadImage(){
    var canvas = document.getElementById('myCanvas');
    var attachment = canvas.toDataURL("image/jpeg");
    attachment = attachment.slice(23);
    var positionIndex = 0;
    var fileSize = attachment.length;   
    var chunkSize = 950000;        //Maximum Javascript Remoting message size is 1,000,000 characters       
    var fileBody = "";
    showMsg('waitmsg',1);

    if(fileSize <= positionIndex + chunkSize) {
        fileBody = attachment.substring(positionIndex);
    } else {
        fileBody = attachment.substring(positionIndex, positionIndex + chunkSize);
    }
    //now try to upload
    VFC99_ImageUploader.doUploadAttachment(
        '{!parentId}', 
        fileBody, 
        fileName, 
        function(result, event) { 
            if(event.status){                 
                if(result == "successful upload") displayMsg(true,result);
                else displayMsg(false,result);
            }
            else 
                displayMsg(false,event.message);

            //finish the waiting msg
            showMsg('waitmsg',0);
        },
        {buffer: true, escape: true, timeout: 120000}
    );
}

Answer 1

I got it to work.In fact, i was resizing the div containing the canvas, so it is not altering the canvas data, but the canvas was resizing, but i think it was only visual.The solution was to redraw the canvas from the user size :

    var canvas = document.getElementById('myCanvas');
    //just added the 6 lines and it works great
var w = $j("#jq_stretch").width();
var h = $j("#jq_stretch").height();
canvas.width = w;
canvas.height = h;
var ctx = canvas.getContext("2d");
    ctx.drawImage(tempImg, 0, 0,w,h);
    var attachment = canvas.toDataURL("image/jpeg");