The way I handled this was to use the mouse event handlers rect.startX & rect.startY for the destination (x,y) and the rect.width & rect.height at the destination w/h:
document.getElementById("image").onclick= function() {
context.drawImage(image,rect.startX,rect.startY,rect.w,rect.h);
};
The images from the server are handled in a 'image-prepper' function that loads the images onto an offscreen canvas where they reside until called onto the visible canvas.