How to crop an image using canvas ?
<canvas id="Canvas1" width="100" height="100"></canvas>
drawImage() method: This method can be used to draw an image or video on the web page. It can also be used to draw parts of an image. Another useful function is to increase or decrease the size of the image.
Cropping an image using drawImage() method: In order to crop a source image to its destination image. the following parameters of drawImage() need to be specified.
- image: The image to be cropped.
- sourceX: The x-coordinate of the source image
- sourceY: The y-coordinate of the source image.
- sourceW: The width of the source image.
- sourceH: The height of the source image.
- destinationX: The x-coordinate of the destination image.
- destinationY: The y-coordinate of the destination image.
- destinationW: The width of the destination image.
- destinationH: The height of the destination image.
drawImage(image, sourceX, sourceY, sourceW, sourceH, destinationX,destinationY, destinationW, destinationH)