Thursday, December 1, 2011

Add Some Keys to Those Clicks

This is the same mouse test as before, but I've also added some keyboard behavior. Pressing the number keys displays a number in the corresponding box. (The numeric keypad keys do not, just the ones in the top row of the keyboard.) The different shape of the grid is intentional. The appearance of the boxes, and consequently the mouse hit detection, gets computed from the width and height of the canvas as described in the HTML rather than being defined on the JavaScript side. This is a minor little example of separating appearance and functionality.

Sorry, you browser does not support the canvas element, you will not be able to see this demo.

No comments: