Phonegap - Source image larger on canvas than on html page

I'm using Phonegap to allow a user to select a photo from their library, and then edit it.

When I retrieve the photo using Phonegap, I store the image in an html img element that is already on my page:

  sourceImage = document.getElementById('smallImage');  
  sourceImage.style.display = 'block';  
  sourceImage.src = "data:image/jpeg;base64," + imageData;

Of course, when the photo loads in, it could be larger than the phone screen, so I shrink it down in my img element. I modify the actual img element width and height, not the css properties, and the image is properly displaying on screen (around 288 x 200, rather than the original 1024 x 768). So, my img element is now displaying a picture (as a preview) and when the user advances to the next screen, the image is drawn on a canvas so it can be modified:

sourceImage.onload = function(){  
    myCanvas.drawImage(sourceImage, 0, 0);  
}

The image draws correctly, however, it draws the original 1024 x 768 image retrieved from the library and not the modified, smaller image in the actual img element I am displaying on the page. I'm assuming this is due to the fact that the actual image.src is referencing an image that is 1024 x 768, even though I shrink it down.

I have not found any support for re-sizing images before storing them in phonegap. Does anyone know of way I could modify this image src size so that when I am able to shrink it before drawing it to a canvas? (Please keep in mind the user is loading in pictures on-the-fly from their library. I'd prefer to have a client-side solution, but I've not been able to find one).

when you draw the image on canvas you can specify the destination coords on the canvas an the part of the image your like to draw like this:

context.drawImage(image, source_x1, source_y1, source_x2, source_y2, dest_x1, dest_y1, dest_x2, dest_y2);

So you can draw the image in any size you like...