Aligning a hover event to specific location of the canvas - html

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");
}