Recall we used translate to move our canvas co-ordinates, and then actually drew our image half a height & width back from there, so we could rotate properly around our center.

Our drawImage looked slightly (but not exactly) like this:

With these extra parameters, it's going to look like this: It's a bit of an eye-full, and it's going to get even moreso when we include all the "syntactic sugar" necessary to make it correct.

The complicating factor is that there are two different sets of x & y:

• The x & y within the image, from where we want to extract our costume
• The x & y on the canvas where we want the costume drawn

There's also two different sets of height and width:

• The height and width of the entire image file (the PNG or whatever)
• The height and width of the costume

---

This could get a little confusing, so we'll need to get it straight in our own heads. Fortunately, once it's done we can just use it without having to stress about the details.