HTML5 Canvas, 2nd Edition

Exporting Canvas to an Image

Earlier, we briefly discussed the toDataUrL() property of the Canvas object. We are going to use that property to let the user create an image of the game screen at any time. This acts almost like a screen-capture utility for games made on Canvas.

We need to create a button in the HTML page that the user can press to get the screen capture. We will add this button to <form> and give it the id createImageData:

<form>
<input type="button" id="createImageData" value="Export Canvas Image">
</form>

In the init() function, we retrieve a reference to that form element by using the getElementById() method of the document object. We then set an event handler for the button “click” event as the function createImageDataPressed():

var formElement = document.getElementById("createImageData");
formElement.addEventListener('click', createImageDataPressed, false);

In canvasApp(), we define the createImageDataPressed() function as an event handler. This function calls window.open(), passing the return value of the Canvas.toDataURl() method as the source for the window. Since this data forms a valid .png, the image is displayed in the new window:

function createImageDataPressed(e) {

   window.open(theCanvas.toDataURL(),"canvasImage","left=0,top=0,width=" +
   theCanvas.width + ",height=" + theCanvas.height +",toolbar=0,resizable=0");
   }

Note

We will discuss this process in depth in Chapter 3.