Menu
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>
396
To write text on top of image in HTML5 canvas with JavaScript, we can use the fillText and drawImage methods. to add a canvas element. Then we write: const canvas = document.
Drawing Text on the Canvas To draw text on a canvas, the most important property and methods are: font - defines the font properties for the text. fillText(text,x,y) - draws "filled" text on the canvas. strokeText(text,x,y) - draws text on the canvas (no fill)
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;
}
161
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
