When you want to display an image on a canvas, you use the drawImage method. This method can accept several different sets of parameters, allowing you to control exactly how and where the image appears. The most common parameter sets are:

• drawImage(image, dx, dy); Draws the entire image at the specified destination position (dx, dy) on the canvas, using the image’s natural width and height;
• drawImage(image, dx, dy, dWidth, dHeight); Draws the entire image at the specified position, but scales it to fit the width (dWidth) and height (dHeight) you provide;
• drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight); Draws a cropped area of the image, starting at (sx, sy) with the size (sWidth, sHeight), and places it on the canvas at (dx, dy), scaling it to (dWidth, dHeight).

This flexibility makes it easy to scale images or to draw only part of an image, such as when working with sprite sheets for animation or games.

When working with images in JavaScript, you need to be aware that loading is asynchronous. This means the browser may not have finished downloading the image when your code tries to draw it. If you call drawImage before the image is fully loaded, nothing will appear or you might see an error. To handle this, always draw your image inside the onload event handler of the Image object. This ensures the image is ready to be drawn, and you avoid unexpected results. This asynchronous behavior is especially important when loading multiple images for games or complex interfaces, where you may want to track when all images have finished loading before starting your drawing or animation logic.