5.2. Resizing and cropping images

You already know about the first way of calling the drawImage method, which draws an image onto the canvas at its full size with the chance of being cropped at the edges. To overcome the cropping problem, you need to either resize the image or control the way that it is cropped. Perhaps unsurprisingly, there is a means to perform both of those tasks using the final two ways of calling the drawImage method; the first can resize the image, and the second can both resize and crop the image. The only difference between all of the ways to call drawImage is the amount and type of arguments used.

5.2.1. Resizing images

Just like drawing one at full size, resizing an image is really easy to understand; you literally just pass the width and height at which you want the image to be drawn. In notational form, the drawImage method with the arguments for resizing looks like this: