Does anyone know how to do this properly, or if it's even possible without changes to mojo?
(NB. The rockets are moving behind the text area.)
Live version: http://hi-toro.com/bgtest/canvasbgtest.html
This works fine on all browsers I've tried, except that left-clicking on the text area, in all browsers, causes the whole text area to disappear and reappear.
Anyone know why? Is this a quirk of how mojo refreshes the canvas, or in the way it reads mouse events, or even perhaps some deliberate action I can't figure out?
This is the modified CSS section in MonkeyGame.html:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
canvas:focus{
outline:none;
[ADDED]
position:absolute;
z-index:0;
top:0;
left:0;
}
body{
[EDITED: The usual stuff!]
}
[ADDED]
#content{
position:absolute;
z-index:1;
padding:10px;
margin:100px;
width:400px;
height:800px;
background-color: #abc;
}
</style>
</head>
<body>
<canvas id="GameCanvas" onclick="this.focus();" oncontextmenu="return false;" width=640 height=480 tabindex=1></canvas><br>
<div id="content">
Blah, blah, blah, etc.
...
The underlined parts are what it depends on to display things in order, but I'm still very rough with all this stuff...
|