So I find working with external assets a little bit of a hassle, unless I use a framework to make quick work of loading image assets I end up spending a lot of time working on making a loader, and other aspects of a canvas framework of sorts rather than working on what makes my project truly original. So with that said there are other ways of creating and working with images in canvas as well, some of which do not need an external resource loaded first.
Still sometimes I just want or need to work with extremal sprite sheets, and other image assets, so in this post I will be going over the use of the draw image method and other canvas image related topics.
In canvas there is the drawImage method that is used to draw an image onto a canvas. With the drawImage method an external image, a Data URL, or another canvas element can be used as a source as passed as the first argument to this method. Additional arguments can then be used to define a source position and size, as well as a destination position and size when it comes to drawing to the canvas with this source image.
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. To do so I start out by creating a new Image Object instance with the Image constructor. Once I have that I can attach an on load event that should fire when the image is done loading, at which point it is safe to draw the image to the canvas. I then set an src attribute to the location of the image, the very instant that I do that the image will start to load.
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 advanced examples of drawImage.
The drawImage method can be given five arguments in total out of a maximum of nine. Just like the simple three argument example in the first argument is a reference to the image, or other supported resource such as a 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.
Doing this eats up a little overhead, it is best to keep your assets native, but on the fly scaling can be preformed this way. Finally there is using all the arguments of the draw image method to not just set variables for the process of drawing the image, but getting an area from the source image also.
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 source image to be drawn to the canvas, as well as the destination values when it comes to the location and scale in the canvas as well when drawing.
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. The remaining values are then the values that have to do with setting the position and scale when drawing to the canvas. So this is useful when working with a spite sheet where there is a collection of frames in a static image format.
Another canvas element can be used in place of an image element for the first argument of the drawImage method. To do this I just need to create an extra canvas element by one way or another. The extra canvas element does not need to be appended to the HTML at all, and in most cases that is what I would want.