This is just to point out that there is no point in trying to replicate data input controls like buttons or drop-down lists within the canvas. HTML already provides a wide selection of such controls. Therefore simply make the canvas a bit smaller than the whole window so that HTML controls may be fitted around it. Examples of this may be seen at The Green and The Forest.
<div> is more useful than <p> for this kind of thing because paragraphs have some default margins and padding around them which you would need to change using CSS.Alternatively an HTML div element may be positioned in front of the canvas but allow the user to hide and reveal it as necessary (using the CSS visibility style). Examples of this may be seen at Mandelbrot & Julia sets and Kaleidoscope. It is also possible to arrange for such an overlaid div to be draggable, to move out of the way of something in the canvas.
A simple way to give information back to the user is to make the canvas less high than the whole window and put this beneath it (between the canvas and script elements in the HTML):
<div id="info"></div>
Then whenever the program needs to tell the user something (a score perhaps?) write this Javascript:
document.getElementById("info").innerHTML = "message";
And as that implies you can embed HTML elements within the message - sometimes handy.
That looks much better than using Javascript's alert("message");