Place images in Canvas

Drawing lines or simple shape is boring, let's draw some pictures!

In above demo, I use only one context method, "drawImage()". However, "drawImage" method can have 3,5 or 9 arguments. I have three functions which are "draw_dragon()", "draw_smaller_dragon()" and "draw_dragon_head()", each of them implements 3,5 and 9 arguments respectively.

Overloading of drawImage()Description
3 arguments
drawImage (img,x,y)
img is the image element.
x and y being the coordinate to place the image object.
5 arguments
drawImage (img,x,y,width,height)
img is the image element.
x and y being the coordinate to place the image object. width and height will be image size that you want, resize as you want.
9 arguments
drawImage (img, crop_x, crop_y, crop_width, crop_height, x, y, width, height)
img is the image element.
crop_x and crop_y is where you start cropping your image.
crop_width and crop_height is the size you want to crop your image.
x and y still being the coordinate to place the image object.
width and height will be image size that you want, resize as you like it.

Here is the code of of the dragon demo.