I need to load a server side image into a user defined 'frame' with straight js on canvas element-

Question

I have a canvas that allows the user to stroke a rectangle - I need this newly drawn rectangle to become the destination coords for an image coming in from db

Im hoping that one of you javaScript jedi's would quickly high-level outline or pseudo-code the most logical approach to my padawan problem. 'Help Me [your name here], You're my only hope.' Im stopping now.

Answer 1

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.