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 that manipulates with JavaScript.JavaScript and CanvasJavaScript, the programming language we will use to create Canvas applications, can be run inside nearly any web browser in existence. If you need a refresher on the topic, read Douglas Crockford’s JavaScript: The Good Parts (O’Reilly), which is a very popular and well-written reference on the subject.JavaScript Frameworks and LibrariesThere are many popular JavaScript frameworks that developers use to help get their JavaScript off the ground, including libraries such as jQuery, Processing.js, and others. We expect these frameworks to add robust support for Canvas in the next 6–12 months. In the meantime, we will focus on straight JavaScript to control the canvas. However, where appropriate, we will introduce you to frameworks and JavaScript libraries that will help augment Canvas development (e.g., Modernizr, JSColor, and WebGL).Where Does JavaScript Go and Why?Because we will create the programming logic for the Canvas in JavaScript, a question arises: where does that JavaScript go in the pages we have already created?It’s a good idea to place your JavaScript in the of your HTML page because it makes it easy to find. However, placing JavaScript there means that the entire HTML page needs to load before your JavaScript can work with the HTML. This also means that the JavaScript code will start to execute before the entire page loads. As a result, you will need to test to see whether the HTML page has loaded before you run your JavaScript program.There has been a recent move to put JavaScript right before the at the end of an HTML document to make sure the whole page loads before the JavaScript runs. However, because we are going to test to see whether the page has loaded in JavaScript before we run our program, we will put our JavaScript in the traditional location. If you are not comfortable with this, you can adapt the style of the code to your liking.No matter where you put the code, you can place it inline in the HTML page or load an external .js file. The code for loading an external JavaScript file might look like this:To make things simple, we will code our JavaScript inline in the HTML page. However, if you know what you are doing, saving an external file and loading it will work just as well.NOTEIn HTML5 you no longer have to specify the script type.HTML5 Canvas “Hello World!”As we just mentioned, one of the first things we need to do when putting Canvas on an HTML5 page is test to see whether the entire page has loaded and all HTML elements are present before we start performing any operations. This will become essential when we start working with images and sounds in Canvas.To do this, you need to work with events in JavaScript. Events are dispatched by objects when a defined event occurs. Other objects listen for events so they can do something based on the event. Some common events that an object in JavaScript might listen for are key presses, mouse movements, and when something has finished loading.The first event we need to listen for is a window object’s load event, which occurs when the HTML page has finished loading.To add a listener for an event, use the addEventListener() method that belongs to objects that are part of the DOM. Because window represents the HTML page, it is the top level of the DOM.The addEventListener() function accepts three arguments:Event: loadThis is the named event for which we are adding
JavaScript and Canvas
JavaScript, the programming language we will use to create Canvas applications, can be run inside nearly any web browser in existence. If you need a refresher on the topic, read Douglas Crockford’s JavaScript: The Good Parts (O’Reilly), which is a very popular and well-written reference on the subject.
JavaScript Frameworks and Libraries
There are many popular JavaScript frameworks that developers use to help get their JavaScript off the ground, including libraries such as jQuery, Processing.js, and others. We expect these frameworks to add robust support for Canvas in the next 6–12 months. In the meantime, we will focus on straight JavaScript to control the canvas. However, where appropriate, we will introduce you to frameworks and JavaScript libraries that will help augment Canvas development (e.g., Modernizr, JSColor, and WebGL).
Where Does JavaScript Go and Why?
Because we will create the programming logic for the Canvas in JavaScript, a question arises: where does that JavaScript go in the pages we have already created?
It’s a good idea to place your JavaScript in the
There has been a recent move to put JavaScript right before the at the end of an HTML document to make sure the whole page loads before the JavaScript runs. However, because we are going to test to see whether the page has loaded in JavaScript before we run our program, we will put our JavaScript in the traditional location. If you are not comfortable with this, you can adapt the style of the code to your liking.No matter where you put the code, you can place it inline in the HTML page or load an external .js file. The code for loading an external JavaScript file might look like this:To make things simple, we will code our JavaScript inline in the HTML page. However, if you know what you are doing, saving an external file and loading it will work just as well.NOTEIn HTML5 you no longer have to specify the script type.HTML5 Canvas “Hello World!”As we just mentioned, one of the first things we need to do when putting Canvas on an HTML5 page is test to see whether the entire page has loaded and all HTML elements are present before we start performing any operations. This will become essential when we start working with images and sounds in Canvas.To do this, you need to work with events in JavaScript. Events are dispatched by objects when a defined event occurs. Other objects listen for events so they can do something based on the event. Some common events that an object in JavaScript might listen for are key presses, mouse movements, and when something has finished loading.The first event we need to listen for is a window object’s load event, which occurs when the HTML page has finished loading.To add a listener for an event, use the addEventListener() method that belongs to objects that are part of the DOM. Because window represents the HTML page, it is the top level of the DOM.The addEventListener() function accepts three arguments:Event: loadThis is the named event for which we are adding
No matter where you put the code, you can place it inline in the HTML page or load an external .js file. The code for loading an external JavaScript file might look like this:
To make things simple, we will code our JavaScript inline in the HTML page. However, if you know what you are doing, saving an external file and loading it will work just as well.
NOTE
In HTML5 you no longer have to specify the script type.
HTML5 Canvas “Hello World!”
As we just mentioned, one of the first things we need to do when putting Canvas on an HTML5 page is test to see whether the entire page has loaded and all HTML elements are present before we start performing any operations. This will become essential when we start working with images and sounds in Canvas.
To do this, you need to work with events in JavaScript. Events are dispatched by objects when a defined event occurs. Other objects listen for events so they can do something based on the event. Some common events that an object in JavaScript might listen for are key presses, mouse movements, and when something has finished loading.
The first event we need to listen for is a window object’s load event, which occurs when the HTML page has finished loading.
To add a listener for an event, use the addEventListener() method that belongs to objects that are part of the DOM. Because window represents the HTML page, it is the top level of the DOM.
The addEventListener() function accepts three arguments:
Event: load
This is the named event for which we are adding