How to add clickable text into a javascript game

Question

I am making a javascript game and I would like to be able to add a main menu but I don't know exactley how. I am lookign up for a way to make filltext() clickable but to no avail. I have looked it up but have found no answer that suites my needs. The games protoype can be viewed here: sketchy.idreesinc.com . Does anyone know anyway to implement this? I am using javacript and HTML5's canvas element but I would prefer javascript. Thanks!

If you are rating it down please list the problem so I can correct it. — user1701901, Sep 27 '12 at 01:24
The title text of the downvote button (hold your mouse over the button until a box shows up) tells you why people downvote things. — rennat, Sep 27 '12 at 01:28
Well I definitively put a lot of research into it, and it could be useful to others, so I can assume it is unclear. But unfortunately considering I do not know where to start it has to be. — user1701901, Sep 27 '12 at 01:30
You won't like this answer but: There is *currently* no nice way to set up a clickable area on a `canvas` element, though this page does list some ideas: http://stackoverflow.com/questions/2932141/does-html5-canvas-have-the-equivalent-of-an-image-map . By the way, that page was one of the very first to come up with I Googled for `Clickable Canvas` — Jeremy J Starcher, Sep 27 '12 at 01:52

score 2 · Accepted Answer · answered Sep 27 '12 at 02:17

Things to know about HTML and canvas first

DOM

HTML elements are part of the DOM (the Document Object Model) which is the data structure of a webpage. DOM elements can have trigger events (like click) and event listeners react to those events.

browser

Your web browser converts the DOM elements into pixels on your screen. It also handles input and figures out what element's events to trigger if you click on the page.

canvas

The canvas element allows you to render bitmap images. You basically set the colors on a grid of pixels through some javascript calls to make pretty pictures.

what that all means

When you create a link element in HTML (the <a> tag) the browser renders the text and attaches a click listener to the element so the link actually works.

When you use javascript to draw the pixels on the canvas the browser's understanding of the DOM stops at the canvas. The browser knows about the DOM and the DOM knows about the canvas but it doesn't keep track of the individual items drawn in the canvas.

The answer

You can't actually attach an event to the text in the canvas but there are many ways to get the desired behavior of click the text, something happens.

One way would be to attach a click event to the canvas but instead of a simple event listener that always runs this event listener would need to check to see if the click happened on the text or somewhere else on the canvas.

Event listener functions get called with an Event argument which has information about the event.

Things to google

Some quick reading about these should get you started towards a working menu.

registering javascript event listeners
javascript event mouse coordinates

Overlaying transparent map with `area` elements is another way to achieve the same effect. All of the methods involve calculating the size of the bounding boxes. — Jeremy J Starcher, Sep 27 '12 at 02:20