Implement program flow - Programming in HTML5 with JavaScript and CSS3 - page 152

access in those blocks, the variables need to be declared outside the try block. Look at this
example:

var canvas;
var context;
try {
document.getElementById("myCanvas");
context = canvas.getContext("2d");
contxt.arc(50, 50, 25, 0, 360);
context.fillStyle = "blue";
context.fill();
context.strokeStyle = "red";
context.stroke();
}
catch (e) {
context.strokeText(e.message, 50, 50);
console.log(e.message);
}
finally {
//do any final logic before exiting the method
}

The declaration for the reference to the canvas and the canvas context is moved outside
the try block so that it can be accessible in the catch block. The catch block can now write the
error to the canvas.

NOTE USING DEBUGGING TOOLS

A call to console.log was added to the catch block. This is a great way to add information
that can be viewed in the client debugger. For example, in Internet Explorer, you can access
the debugger tools by pressing F12.

Exceptions bubble up the call stack, a special stack in the processing environment that rep-
resents the functions currently being processed in sequential order. Take the following code
sample:

window.onload = function () {
try {
WorkWithCanvas();
} catch (e) {
console.log(e.message);
}
}

function WorkWithCanvas() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
contxt.arc(50, 50, 25, 0, 360);
context.fillStyle = "blue";
context.fill();
context.strokeStyle = "red";
context.stroke();
}