HTML and CSS Reference
In-Depth Information
Example 1-2. HTML5 Hello World!
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CH1EX2: Hello World HTML Page With A DIV </title>
</head>
<body>
<div style="position: absolute; top: 50px; left: 50px;">
Hello World!
</div>
</body>
</html>
The
style="position: absolute; top: 50px; left: 50px;"
code is an example of inline
CSS in an HTML page. It tells the browser to render the content at the
absolute
position
of
50
pixels from the top of the page, and
50
pixels from the left of the page.
<canvas>
Our work with
<canvas>
will benefit from using the absolute positioning method with
<div>
. We will place our
<canvas>
inside the
<div>
tag, and it will help us retrieve in-
formation, such as the relative position of the mouse pointer when it appears over a
canvas.
The Document Object Model (DOM) and Canvas
The Document Object Model represents all the objects on an HTML page. It is
language- and platform-neutral, allowing the content and style of the page to be up-
dated after it is rendered in the web browser. The DOM is accessible through JavaScript,
and has been a staple of JavaScript, DHTML, and CSS development since the late 1990s.
The
canvas
element itself is accessible through the DOM in a web browser via the
Canvas 2D context, but the individual graphical elements created on Canvas are not
accessible to the DOM. As we stated earlier, this is because Canvas works in immediate
mode and does not have its own objects, only instructions on what to draw on any
single frame.
Our first example will use the DOM to locate the
<canvas>
tag on the HTML5 page so
that we can manipulate it with JavaScript. There are two specific DOM objects we will
need to understand when we start using
<canvas>
:
window
and
document
.
The
window
object is the top level of the DOM. We will need to test this object to make
sure all the assets and code have loaded before we can start our Canvas applications.
The
document
object contains all the HTML tags that are on the HTML page. We will
need to look at this object to find the instance of
<canvas>
that manipulates with
JavaScript.
