HTML and CSS Reference
In-Depth Information
}
</script>
</head>
<body>
<div style="position: absolute; top: 50px; left: 50px;">
<canvas id="canvasOne" width="500" height="300">
Your browser does not support HTML5 Canvas.
</canvas>
</div>
</body>
</html>
Figure 1-3. HTML5 Canvas Hello World!
Debugging with Console.log
There is one more thing to discuss before we explore bigger and better things beyond
“Hello World!” In this topic, we have implemented a very simple debugging method-
ology using the
console.log
functionality of modern web browsers. This function lets
you log text messages to the JavaScript console to help find problems (or opportunities!)
with your code. Any browser that has a JavaScript console (Chrome, Opera, Safari,
Firefox with Firebug installed) can make use of
console.log
. However, browsers with-
out
console.log
support throw a nasty error.
To handle this error, we use a wrapper around
console.log
that only makes the call if
the function is supported. The wrapper creates a class named
Debugger
, and then creates
a static function named
Debugger.log
that can be called from anywhere in your code,
like this:
Debugger.log("Drawing Canvas");
