Canvas : Image
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.