Published: 2013-03-03 21:45:51
Help us better understand how the Canvas and HTML DOM relate to each other within a Web Page.
Now that we know how to Load an Image into the containing HTML Document, it's a simple matter to render it onto the Canvas Element.
One step and a time and we'll get there.
The Canvas allows us to break out of the constraints of the Standard HTML Layout into the realm whether more Dynamic Visuals can help convey the meaning of your Web Page or Application.
We'll first cover the 2D Canvas but the real exciting frontier of 3D within a Web Page is right on the horizon.
It’s pretty easy to use javascript to work with images marked up in the body of an html document, but sometimes it is necessary to dynamically load them. I’ll do my best to explain how to do this.
var img = new Image();
To create a new image element in javascript we will use the Image() constructor.
element = document.getElementById(id);
element
is a reference to an Element object, or null if an element with the specified ID is not in the document.
id
is a case-sensitive string representing the unique ID of the element being sought.
Return Value
Returns an object of type DOM Node.
An element that matches the specified ID. If there are multiple matches, the first is returned.
