HTML and CSS Reference
In-Depth Information
The Document Object Model (DOM) and Canvas
The
DocumentObjectModel
representsalltheobjectsonanHTMLpage.Itislanguage-neut-
ral and platform-neutral, allowing the content and style of the page to be updated after it is
renderedinthewebbrowser.TheDOMisaccessiblethroughJavaScriptandhasbeenastaple
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.
