Skip to content

Instantly share code, notes, and snippets.

@Fabryz
Created August 29, 2011 20:51
Show Gist options
  • Save Fabryz/1179372 to your computer and use it in GitHub Desktop.
Save Fabryz/1179372 to your computer and use it in GitHub Desktop.
HTML5 canvas overlay bug?
<!DOCTYPE html>
<html>
<head>
<title>Wander game</title>
<meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
<link type="text/css" rel="stylesheet" href="./css/style.css" media="screen">
<script type="text/javascript" src="./js/jquery-latest.min.js"></script>
<script type="text/javascript" src="./socket.io/socket.io.js"></script>
<script type="text/javascript" src="./js/Socket.js"></script>
<script type="text/javascript" src="./js/Fps.js"></script>
<script type="text/javascript" src="./js/Player.js"></script>
<script type="text/javascript" src="./js/Tile.js"></script>
<script type="text/javascript" src="./js/Map.js"></script>
<script type="text/javascript" src="./js/Viewport.js"></script>
<script type="text/javascript" src="./js/Game.js"></script>
<script type="text/javascript" src="./js/wander.js"></script>
</head>
<body>
<h1>Wander</h1>
<p>Use the arrow keys to wander around and explore, tab for player list. <a href="./status" title="See the server status">Server status</a>.</p>
<div id="gameUI">
<div id="gameIntro">
<h1>Who are you?</h1>
<p>Insert your nick and press Play to start</p>
<p><input type="text" value="Player" id="playerNick" name="playerNick" maxlength="30" /></p>
<p><a href="#" id ="play" class="button disconnected">Connecting...</a></p>
</div>
<div id="gamePlayersList">
<h1>Players list</h1>
<ul></ul>
</div>
</div>
<p id="fps">XX</p>
<canvas id="gameCanvas" width="480" height="480">
<p>Looks like your browser does NOT support HTML5 Canvas.</p>
<p>Please get a decent one.</p>
</canvas>
<div id="chatLog"><ul></ul></div>
<input type="text" value="" id="chatMsg" name="chatMsg" maxlength="255" />
<p id="footer">&copy;2011 Fabrizio Codello - Follow me on <a href="http://twitter.com/#!/fabryz">Twitter</a>!</p>
<a href="https://github.com/Fabryz/wander"><img id="ribbon" src="./img/ribbon.png" alt="Fork me on GitHub"></a>
</body>
</html>
* {
margin: 0;
padding: 0;
}
body {
background-color: #001022;
color: #FFF;
font-family: Georgia, "Lucida Sans", monospace, serif;
font-size: 62.5%;
margin: 10px;
padding: 0;
}
a {
color: #FFF;
}
a:hover {
color: #1D7CF2;
}
h1 {
font-size: 3.2em;
font-weight: bold;
margin-bottom: .5em;
}
h2 {
margin-bottom: .5em;
}
p {
font-size: 1.5em;
}
#gameUI {
position: absolute;
width: 95%;
height: 480px; /* change according to canvas height */
margin-top: 1em;
}
#gameIntro,
#gamePlayersList {
background: rgba(0, 0, 0, .8);
margin: 0 auto;
padding: 40px 0;
text-align: center;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
#gameIntro {
width: 500px;
margin-top: 80px;
}
#gamePlayersList {
width: 90%;
margin-top: 20px;
display: none;
}
#gamePlayersList ul {
font-size: 1.8em;
list-style-type: none;
height: 300px;
overflow: auto;
}
#gameIntro input[type="text"] {
font-size: 1.8em;
margin-top: 10px;
}
#gameIntro a.button {
background: #2488F5;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
display: block;
font-size: 3em;
margin: 0 auto;
margin-top: 30px;
padding: 10px;
width: 70%;
text-decoration: none;
}
#gameIntro a.button:hover {
background: #F7F7F7;
color: #333;
text-decoration: none;
}
#gameIntro a.disconnected {
background: #185DA8;
}
#gameCanvas {
background: url('../img/grass.png') 0 0 repeat;
display: block;
margin: 1em auto;
margin-bottom: 0;
}
#debugCanvas {
background-color: #FFF;
position: absolute;
top: 0;
right: 0;
filter: alpha(opacity=75);
-moz-opacity: 0.75;
opacity: 0.75;
}
#debugLog {
background-color: #FFFFDD;
color: #333;
font-size: 1.5em;
padding: 1em;
width: 50%;
height: 200px;
overflow: auto;
position: fixed;
bottom: 0;
right: 0;
filter: alpha(opacity=75);
-moz-opacity: 0.75;
opacity: 0.75;
}
#debugLog ul {
list-style-type: none;
}
#chatLog {
background-color: #FEFEFE;
color: #333;
font-size: 1.5em;
padding: 1em;
width: 400px;
height: 200px;
overflow: scroll;
margin-top: -220px;
z-index: 999;
}
#chatLog ul {
list-style-type: none;
}
#chatMsg {
display: block;
margin: 0 auto;
font-size: 1.5em;
border: 2px solid #CCC;
}
#footer {
margin-top: 1em;
}
#ribbon {
position: absolute;
top: 0;
right: 0;
border: 0;
}
/*
* Status
*/
dl {
font-size: 1.5em;
}
dt {
font-weight: bold;
margin-bottom: .5em;
}
dd,
#status-players {
margin-left: 1.5em;
margin-bottom: 1em;
}
#status-players {
list-style-position: inside;
}
@goshlanguage
Copy link

Did you ever find any solution to handling input's when overlayed on the canvas?

I just ran into this issue today. I'm trying to disable all mouseEvents, but I'm using three.js and because the 3D canvas lays itself in the foreground, all mouse functions do not work.

I noticed that I can tab to the input, which is strange. If I find anything I'll make sure to comment here.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment