Canvas as background

Monkey Targets Forums/HTML5/Canvas as background

DruggedBunny(Posted 2013) [#1]
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...


impixi(Posted 2013) [#2]
'canvas:focus' should be just 'canvas'.

canvas
{
  outline:none;
  position:absolute;
  z-index: 0;
  top: 0;
  left: 0;
}



DruggedBunny(Posted 2013) [#3]
Ah, that's excellent, many thanks!


Beaker(Posted 2013) [#4]
I don't see a text area on my iPad.


DruggedBunny(Posted 2013) [#5]
Weird, it works on IE10, Firefox, Opera/Opera Next, Chrome and Opera Mobile (Android)... and even on Android 2.2's default browser!

How about this version with impixi's focus fix?

http://hi-toro.com/bgtest2/canvasbgtest.html

Possibly a Safari-on-Ipad bug?

http://stackoverflow.com/questions/3600732/z-index-layering-for-html5-video-ipad
http://stackoverflow.com/questions/3683211/ipad-safari-mobile-seems-to-ignore-z-indexing-position-for-html5-video-elements

(It seems it might apply to other dynamically created/updated elements, too.)


Beaker(Posted 2013) [#6]
That one works fine.


DruggedBunny(Posted 2013) [#7]
Ah, cool, must just have been a focus problem. Nice to know this works pretty much anywhere!