Images and drawImage()

Getting an image to display into your canvas follows a very simple formula made up of these two steps:

1. Gain access to an image source (aka an image file, another canvas element, a frame from a video element, etc.)
2. Display the data from the image source to the canvas

That’s really all there is to it, but like most things we’ve looked at so far, it’s in the details where things get a little crazy. The first detail (that also happens to be crazy) is the drawImage method that is ultimately responsible for getting your image pixels to display on the canvas.

Just like all of the other drawing methods we’ve seen, it operates off of our rendering context object and looks as follows: