newguy newguy - 5 months ago 6
HTML Question

How do i get a JS ID to be the background page of a website?

I have this code in the .js file that allows me to stream an image:

//Image streamaing!
function onMessage2(evt) {
$("#image").attr('src', 'data:image/jpg;base64,'+evt.data);
}


I then display it in a rectangle in html like so:

<div class="row" style="margin-left:0px; margin-right:0px">
<img id="image" src="">
<canvas id="canvas"></canvas>
</div>


The problem I have is that I need the stream to be displayed in the background of the canvas, so I can catch mouse/touch input for some other work I need.

I've tried switching the order (canvas first then image) but then all I get is a big blank screen.

Answer

Give the parent relative position and absolute position for the childs then canvas will overlay the img :

.row{position: relative;}
.row img, .row canvas{position:absolute; top:0; left:0;}

<div class="row" style="margin-left:0px; margin-right:0px">
 <img id="image" src=""> 
 <canvas id="canvas"></canvas> 
</div>