Introduction to HTML5 Canvas - HTML5 Canvas - page 22

//Guesses
context.fillStyle = "#109910";
context.font = "16px _sans";
context.fillText ('Guesses: ' + guesses, 215, 50);
//Higher Or Lower
context.fillStyle = "#000000";
context.font = "16px _sans";
context.fillText ("Higher Or Lower: " + higherOrLower, 150,125);
//Letters Guessed
context.fillStyle = "#FF0000";
context.font = "16px _sans";
context.fillText ("Letters Guessed: " + lettersGuessed.toString(), 10, 260);
if (gameOver) {
context.fillStyle = "#FF0000";
context.font = "40px _sans";
context.fillText ("You Got It!", 150, 180);
}
}
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");
}