Adopting drawImage allows you to insert images into canvas, including both img and canvas element. And you can even dram SVG figure in Opera, but the processes are relatively complicate, methods of invoking three, five or nine parameters separately are available for your option.

Three parameters: basic drawImage method. One parameter specifies figure’ location in web page, and the other two parameters define its position in canvas.

Five parameters: intermediate drawImage method. Besides the three parameters mentioned above, it contains other two parameters for specifying width and height of figure. (Use this method if you need to change figure’ dimension in future.)

Nine parameters: advanced drawImage method. It includes all five parameters above, and the other four parameters are used to set position, width as well as height of resource figure. There four parameters enable you to cut resource figure before displaying outcome figure in page.

Please preview sample of employing of these three methods. And the codes are recommended as follows:

// Three arguments: the element, destination (x,y) coordinates.
context.drawImage(img_elem, dx, dy);
// Five arguments: the element, destination (x,y) coordinates, and destination
// width and height (if you want to resize the source image).
context.drawImage(img_elem, dx, dy, dw, dh);
// Nine arguments: the element, source (x,y) coordinates, source width and
// height (for cropping), destination (x,y) coordinates, and destination width
// and height (resize).
context.drawImage(img_elem, sx, sy, sw, sh, dx, dy, dw, dh);