Canvas 2D Web Apps/Pages

This chapter shows how to set up multiple pages and allow the user to navigate between them with the help of responsive buttons.

The Example
The example of this chapter (which is available online; also as downloadable version) allows users to navigate between three pages of different dimensions using four buttons. The pages are automatically scaled to fit the dimensions of the browser window or the screen of a mobile device. The following sections will discuss how to set up the pages. See the chapter on responsive buttons and previous chapters for discussions of other parts.

Defining Multiple Pages
In order to implement multiple pages, we need to have one  object for each page. In the example, these are created this way:

Each constructor call defines the width and height of the page and the page's process function. The first process function looks like this:

It checks whether  has processed the event and whether the button was clicked (with  ). If that's the case, it sets the global variable  to the current time (in milliseconds since January 1, 1970) plus 50 milliseconds in order to ignore all events for the next 50 milliseconds. This is useful because the current user interactions should not be applied to the next page, which is set by assigning another  to the global variable. Lastly, the new page is painted by calling.

Otherwise, if the button hasn't been clicked, the page's background is rendered if  is.

The process functions of the other two pages work similarly, except that the second page has two buttons:

And the third page with one button:

Implementation of cuiPage
The constructor for  objects is defined as follows:

There is only one method defined for, which is only relevant for animated transitions between pages; see the chapter on transitions.

Note that each page uses a  object (called  ) for its transformation. This is applied in the  function (which also calls the page's user-defined process function). The function is relatively complex since it has to scale the page optimally by taking the page's dimensions and the dimensions of the screen into account. Furthermore, it has to apply the transformation of the transformable object. And then it has to apply the inverse transformation to event points such that they are correctly transformed.