Saving our funny face using the toImage() method

For our very last part of this application, we want to combine the two images together (being our me photograph and the funny face image we have chosen) and save them to the filesystem as one complete image. To do this, we will hook up the event listener of our save button control and use another common method found on almost all views and control types, toImage. Once we've combined both our images together and saved the resulting image off to the local filesystem, we'll then create a quick e-mail dialog and attach our funny face to it, allowing the user to send the complete image off to their friends!

How to do it…

Underneath the instantiation of your btnSave object, add the following event listener and handler code:

btnSave.addEventListener("click", function(e) {
  //hide the footer
  footer.visible = false;

  //do a slight delay before capturing the image
  //so we are certain the footer is hidden!
  setTimeout(function(e) {
    //get the...