Aligning a hover event to specific location of the canvas

Question

As you can see I am trying to develop a canvas for a earth based animation. I wanted to start off with providing the instructions as a hover event from the user. Here you can see I have managed to place the text 'Instructions' however, I wanted to move it so it displays on the top left side of the canvas in line with the text 'Solar System'. I tried all sorts of methods but nothing seem to move the 'Instructions' text. I also wanted to change the text after hover below the 'Instructions' text so it looks nicely laid out and maybe even change the colour.

I was also wondering if it was to possible to change the canvas to a specific background i.e stars through;

<canvas style="float:left" ; id="animation-stage"></canvas>
<canvas id="myCanvas" width="1400" height="800"></canvas>
<script>
 /* Sets */
    var can = document.getElementById('animation-stage');
    can.setAttribute('height', window.innerHeight);
    can.setAttribute('width', window.innerWidth);
</script>
</body>
</html>

body {
 overflow: hidden;
 font-family:fantasy;
 font-size:13px;
 color: white;
 background-color: black;
}

span{
    color: #ffffff;
    font-size: 13px;
    height: 160px;
    letter-spacing: 1px;
    line-height: 30px;
    margin: 0 auto;
    position: static;
    text-align: center;
    text-transform: uppercase;
    top: -80px;
    left:-30px;
    display:none;
    padding:0 20px;

}
span:after{
    content:'';
    position:absolute;
    background:#f8f8f8;
    left:50%;
    margin-left:-5px;
}
p{

    margin:100px;
    float:left;
    position:absolute;
  text-transform: uppercase;
  top: 100px;
  left: 0;
    cursor:pointer;

}



p:hover span{
    display:block;
}

h1,h2,h3 {
 margin:10px 0;
}

article {
 padding:20px;
 width:400px;
}

article header {
 font-weight: bold;
}

section {
 padding-bottom: 10px;
 padding-top:10px;
}

span.note {
 display: block;
 /*font-style:italic;*/
 font-size:12px;
}

header{
 position: fixed;
 width: 100%;
}

.container {
 display: inline-block;
}

.container > .info {
 float: left;
}

.container > .info > header {
 padding: 20px;
}

<header>
    <h1 style="text-align: center">Solar System</h1>
    <p>Instructions<span>
    Rotation - Click and drag in the direction of rotation <br />
    Increase/Decrease Orbit Radius - Up and Down Keys <br />
    Increase/Decrease Orbit Speed - Left and Right Keys <br />
    Translation Of X - Alt plus mouse drag <br />
    Translation Of Y - Shift plus mouse drag <br />
    Translation Of Z - Mouse scroll
    </span></p>
    <h3 style="text-align: center">Web earth</h3>
</header>

Answer 1

To move the <p> to the top left of the screen, you need to modify your styles affecting <p> like so:

p {
    margin: 0; /* removed margin */
    position: absolute;
    text-transform: uppercase;
    top: 18px; /* modified top */
    left: 18px; /* modified left */
    cursor: pointer;
}

When you move it to the top left and you hover over "Instructions", the instructions overlap with the "Solar System" text, so it's a good idea to give the <span> a black background-color. Also, you can left align the instructions text to make them more readable:

span {
    color: #ffffff;
    font-size: 13px;
    height: 160px;
    letter-spacing: 1px;
    line-height: 30px;
    margin: 0 auto;
    position: static;
    text-align: left; /* left align text */
    text-transform: uppercase;
    top: -80px;
    left: -30px;
    display: block;
    padding: 0 20px;
    background-color: black; /* to prevent clashing of text */
}

The output of these changes will look like so (on hover):

There are several ways of adding background images to your canvas, but the simplest will be to simply set a background-image with CSS like so:

canvas {
    background-image: url("path/to/bg/image.png");
}