How would I overlay a canvas over text?
Hey everyone! So the image above is what I'm trying to achieve with my code, however One or the other is always pushing the other either below it or above it, instead of just sitting above each other.
I've been reading about z-index and top:0; but no matter what I try I can't seem to get the results I want. It could be that I'm using a fade in javascript effect on the text but I'm not sure. Here's my code, what would you recommend? Thanks!
<style type="text/css">
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
background-color: #FFFFFF;
background-repeat: repeat;
font-size: 12px;
color: #333366;
}
#picOne, #picTwo {
position:relative;
display: none;
float:center;
}
#pics {
}
#my-object {
position: absolute;
z-index: 1;
top: 0px;
}
</style>
<script src="http://code.jquery.com/jquery-1.4.4.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#picOne').delay(1000).fadeIn(2000).delay(2500);
$('#picTwo').delay(2000).fadeIn(1500).delay(2000);
});
</script>
</head>
<body>
<div id="pics" align="center">
<table width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td valign="middle" align="center">
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td align="center" valign="middle"><font size="200" face="Arial" id="picTwo" color="black">SOME TEXT</font></td>
</tr>
<tr><td align="center" valign="middle">
<script type="text/javascript" src="widgets.js"></script>
<script src="three.js" type="text/javascript"></script>
<script src="trail.js" type="text/css"></script>
<div id="my-object">
<canvas></canvas>
</div></td>
</tr>
</table>
</td>
</tr>
</table>
</div>
</body>
</html>
Answer
I guess that's what you're looking for: http://jsfiddle.net/6C55n/
I set position absolute to both - the text and the canvas. After that I just set greater z-index to the canvas.
The thing which should be noticed here is the use of transparent image for the canvas.
JavaScript
var canvas = document.getElementById('can'),
context = canvas.getContext('2d');
var img = document.createElement('img');
img.onload = function () {
context.drawImage(this,0,0);
};
img.src = 'http://www.planet-aye.co.uk/seasonal05/snow.png';
HTML
<canvas width="640" height="480" id="can"></canvas>
<div id="labelDiv">Some text</div>
CSS
#labelDiv {
font-size: 70px;
position: absolute;
top: 280px;
left: 100px;
z-index: 1;
}
#can {
position: absolute;
top: 0px;
left: 0px;
z-index: 3;
}