When it comes to canvas and images most of the time that means knowing a thing or two about how to use the drawImage 2d context method. There are other ways of creating and working with images in canvas as well though, so lets take a looks at some canvas image basics.
There is the drawImage method that is used to draw an image onto a canvas. This can be an external image, or another canvas element as well. There is also ways to create an image from a canvas, and create images with just context drawing methods using no external assets at all.
Here I have a basic example of the drawImage method. To use the draw image method with an external image that external image must be loaded first.
In this example I am giving the drawImage method just three arguments in this case the whole image will be drawn at the given location set by the following two arguments after the image is given. However the drawImage method can be given up to nine arguments in total. SO lets look at some more examples of drawImage.
The drawImage method can be given five arguments in total, just like the simple three argument example the first is a reference to the image that is to be drawn to the canvas. In addition just like before the second two arguments set the location that the image is to be drawn at in the canvas as well. However now an additional two arguments can be used to scale the image when it is drawn to the canvas as well.
Doing this eats up a little overhead, it is best to keep your assets native, but on the fly scaling can be preformed.
So there is then the most complicated use case example of the drawImage method that can be used to set the source location and size in the image to be drawn, as well as the destination values when it comes to the location and scale in the canvas as well.
In this example the four arguments given after the image are not the values that have to do with the location and size when drawing to the canvas, but the same values when pulling image data from the source image. So this is useful when working with a spitesheet where there is a collection of frames in a static image format.