Phonegap - Source image larger on canvas than on html page - html

Question

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).

Answer 1

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...