# Canvas 2D Web Apps/Static Buttons

This chapter discusses the most basic way to implement buttons with cui2d. It is certainly not the only way to implement buttons, but it is very flexible and the code to define the appearance and function of a button is a simple if statement that checks whether the user event has been occurred in the region of the button and specifies how to react to such events. In this chapter, the appearance of buttons is static; buttons that change their appearance based on user events (e.g., a hovering mouse pointer) are discussed in the chapter on responsive buttons.

### An Example: Selecting a Color

The example of this chapter shows three buttons labeled “red,” “green” and “blue,” as well as a color patch, which changes its color according to the clicked button. The buttons are rendered with a bitmap image which allows for arbitrary button designs. The example is available online, and a version that can be downloaded to mobile devices is also available online. If you want to try out the example on your local computer, you should also download the files cui2d.js and the image selected.png to the same directory as the HTML file.

### Discussion

This discussion assumes that you are familiar with the code example discussed in Chapter Getting Started with the Framework.
The example uses a bitmap image to draw a button. The image is assigned to the global variable imageFocusedButton:
The image file is then specified in the init function:
By setting onload to cuiRepaint, we can make sure that the canvas is repainted in case it has been rendered before the image was completely loaded.
The example defines a global variable myColor to store the user-selected color:
Since the example uses clicks onto the background to set myColor to black, these “one-finger” events should not be processed by the page. Thus, the example deactivates one-finger dragging by only allowing two-finger gestures for this page:
For repainting the buttons and processing clicks on the buttons, the example uses three calls to cuiIsInsideRectangle:
The definition of cuiIsInsideRectangle is discussed below. Here, it is only important that it works similarly to a process function:
* If event is null, cuiIsInsideRectangle writes a string ("red", "green", or "blue") in the specified rectangle and then draws imageFocusedButton under it.
* If event is not null, it checks whether this user event is inside the specified rectangle and returns true if it is. In this case, the type of the event is checked, and in case of mouseup and touchend events, myColor is changed to some color (depending on the button) and a repaint is requested with cuiRepaint to make sure that the new color is used for drawing. Also, the function returns with true to indicate that the event has been processed.
The following code checks whether there was a mouseup or touchend anywhere else, and in this case it sets myColor to black:
Lastly, the function checks whether event is null and in that case it repaints a square rectangle with the color myColor and a grey background:
The code then returns false to indicate that the event hasn't been processed.
When you try out the example, you might realize that it feels very static even though you can change the color by clicking on the buttons and the background. The example in Chapter Responsive Buttons feels a lot more dynamic because the appearance of the buttons responds to user events.

#### Implementation of cuiIsInsideRectangle

The function cuiIsInsideRectangle is defined in cui2d.js:
The implementation is very straightforward: if event is null, the text is written at the center of the rectangle unless the text is null. Similarly, image is drawn into the rectangle unless it is null. On the other hand (if event is not null), the function checks whether the coordinates eventX and eventY in event are inside the rectangle and returns the result.
Note that eventX and eventY are specific to cui2d: these coordinates are in the coordinate system of the page, which is different from any coordinate system that HTML is using and it changes if the user transforms the page with two-finger gestures.
< Canvas 2D Web Apps