I am having is trying to have a grey background, but with text over top of it rather than before or after the grey square.
Here is my code, an HTML document with JS and CSS integrated:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
/* Change svg background color. */
.area {
background-color: #75738a;
}
</style>
</head>
<body>
<svg width="2000px" height="2000px" class="area">
<script>
write("Power up to the top");
</script>
</svg>
<script>
// start game "press any to continue"
document.addEventListener('keypress', (event) => {
}, false);
</script>
</body>
</html>
Previously, I was drawing a square and expecting to be able to put text on it. I realized instead of setting it to print a square, I needed to set the background image in HTML, and use CSS to center and fullscreen it.
<body>
<img src="gymbackground.jpg" id="bg" alt="">
<body>
HTML^
<style>
#bg {
position: fixed;
top: 0;
left: 0;
/* Preserve aspet ratio */
min-width: 100%;
min-height: 100%;
}
</style>
CSS within HTML^