How would I overlay a canvas over text?

Question

My Dilemma

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>

First of all I'll recommend you to validate your HTML using [W3 Validator](http://validator.w3.org/) — Teneff, Dec 21 '12 at 09:14
@Teneff Thanks for the link, I just did!!! I re-edited the code I posted. I really appreciate that!! Got rid of 20 errors! However syntax wasn't the problem :/ still experiencing the same issues. — KingPolygon, Dec 21 '12 at 09:43
@Sonhja I've never used jsfiddle.net but here you go, I hope I did it right! http://jsfiddle.net/tQFZ5/ — KingPolygon, Dec 21 '12 at 09:49

score 13 · Accepted Answer · answered Dec 21 '12 at 09:51

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;
}

Question: Is there a way to have mouse and keyboard events pass through to the underlying text? — Matthew Cornell, Mar 07 '16 at 13:50
@MatthewCornell, at #labelDiv I also add `user-select: none;` — rma, Aug 02 '19 at 20:03
@MatthewCornell, you might try `user-select: none;` at least for the mouse events. — JohnK, Nov 06 '20 at 21:51

Philipp Hofmann · Answer 2 · 2012-12-21T09:54:27.093

This works fine for me: JSFiddle

HTML

<p>Some text</p>
<canvas></canvas>

CSS:

body {
   background-color:#5FC0CE;
}

canvas {
  position:absolute;
  top:0;
  left:0;
  z-index:100;

  background-color:#FFAE73;  


  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
  filter: alpha(opacity=50);
  -moz-opacity:0.5;
  -khtml-opacity: 0.5;
  opacity: 0.5;    
}

How would I overlay a canvas over text?

2 Answers2