CS 424: Computer Graphics, Fall 2013
Lab 3: 2D HTML Canvas Graphics

This lab asks you to work with the 2D graphics API for the HTML <canvas> element. You should see how graphics fundamentals that you learned in Java carry over to another API. You will need to know some JavaScript, but most of what you need is very similar to Java. The background information that you need is in Section 4 and Section 5 of the notes.

The files that you need for this lab can be found in /classes/cs424/canvas-templates. This directory contains four files that are meant as starting points for simple applications that use canvas graphics. You will need copies of

The same directory also contains basic.html, which is a very simple template for an application with no animation or mouse interaction, and cart-and-windmills.html, which is actually an application based on screen-graph.html that you will recognize from the notes. You don't necessarily need copies of these, but you might want to look at them.

You won't be working in Eclipse for this lab. Although you could do everything with a basic text editor, my suggestion is to use Komodo Edit, a free web development tool that can do things like syntax checking and content assist. You can use Komodo Edit to edit files without creating a project, but there are advantages to combining files into a project. To do that, create a folder named lab3. Start Komodo Edit, and use the "New Project" command under the "Project" menu. Navigate to the lab3 folder, and create the project in that folder. A project file with extension .komodoproject will be created in the folder, and project files will be stored there. If you add files to the folder, Komodo Edit will find them and add them to to the project (although you might have to refresh the view for it to see them). Of course, you can create new files with the "New File" command. From there, you can probably figure things out. If you need help, ask.

This lab is due at the beginning of lab next week. You should copy your work into your homework folder in /classes/cs424/homework. Your work should be in a folder named lab3 or something very similar.

Exercise 1: Animating

Note: When working on the exercises in this lab, I suggest that you keep the Firefox Web Console (or the equivalent in another browser) available as you view your pages. This is good advice whenever you are working on web applications. A JavaScript error will often have no visible result on the page, except that nothing seems to be happening. You need to have the Web Console open to see an error message. Remember that you can also use console.log() in your code to output debugging messages to the console. However, you should not leave those statements in finished code.

For the first exercise, you should start with a copy of animate.html, and create a new, non-trivial animation. You can either use the following idea, or you can make up something that is at least of similar complexity.

Idea for animation: A small randomly colored circle appears at a randomly chosen point in the canvas and grows over a series of frames. When it reaches a certain size, it stops growing, and a new dot appears somewhere else. For this to work, the frame-drawing function, draw(), should not clear the canvas before drawing the new frame. (Perhaps after a long time, you can clear the canvas and start over.) Note that there is an example of setting a random color in mouse.html. You might want to make the circles translucent: See the specification of graphics.globalAlpha in the notes.

Exercise 2: Mousing

For this exercise, start with a copy of mouse.html, and use it as the basis for a graphics application with mouse interaction. You should also add at least one input element, such as a checkbox or popup menu, to the web page, and use it to control some aspect of the program. You can either use the following idea, or you can make up something of at least similar complexity. You should add some words to the web page to tell the user how to use your program.

Ideas for mouse interaction: Write a drawing program, where the user can sketch curves by dragging the mouse. Or to be more ambitious, let the user drag squares around on the canvas, and let the user place new squares by shift-clicking; to implement this, you will need an array of objects to store information about the squares.

You could use a popup menu for selecting color. Maybe use a checkbox that lets the user select drawing with 50% translucent colors. Recall that a popup menu on a web page is a <select> element such as 

<select id="sel">
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
</select>

which gives this menu: . You need the id so that you can refer to the element in JavaScript: The currently selected item in the menu can be obtained as:  document.getElementById("sel").value

A checkbox is created as an <input> element of type checkbox, and should have a label containing the text that describes the checkbox. The purpose of using a <label> element here is so that the user can check/uncheck the box by clicking the text as well as by clicking the box itself. For example, use the following HTML code to get this:  

<input type="checkbox" id="box"> <label for="box">Check Me!</label>

In JavaScript, you can test whether the box is checked with:  document.getElementById("box").value

As discussed in the notes, you can use an onchange event handler to respond when the user changes the value of a checkbox or select element. You don't always need to do that. Sometimes, it's good enough to just get the current value from the element whenever you need to know it. For this application, I would not use the onchange event for the popup menus, but I might use it for the checkbox.

Exercise 3: Simple Scene Graph

Starting with a copy of scene-graph.html, port the simple object-oriented scene graph that you wrote in Java for Exercise 2 in Lab 2. The animation on your web page should be almost identical to the animation from that exercise. This should be an easy port from the Java version.

Exercise 4: Freedom

Write another canvas graphics application that is significantly more complex than the previous three applications. One possibility is to make a more complex scene graph, but don't just port the one that you did for Exercise 3 from Lab 2. You can also make some other kind of application, as long it uses canvas graphics.