CODEWITHSUNDEEP
javascripthtmlcsscanvas
GrantD71
GrantD71

Reputation: 1875

Overlaying Canvas on top of tiff img

I'm attempting to overlay a canvas on top of a tiff image. I must overlap the canvas and img because tiff files can not be set as backgrounds on canvas elements.

I have read proposed solutions here but the proposed solution of using the z-index isn't working for me. Perhaps I am missing something as the demo is broken in the solution link.

I have created a jsfiddle with my attempt at the solution. However, no matter how I alter the position of the img and canvas, they never seem to overlap; rather they display side by side or above/below one another.

<!DOCTYPE html>
<html>
<style>
.img{position:absolute;z-index:1;}

  #canvas{
     position:relative;
     z-index:20;
  }
  #container{
    display:inline-block;
    margin: 0 auto; 
    background: black; 
    position:relative; 
    border:5px solid black; 
    border-radius: 10px; 
    box-shadow: 0 5px 50px #333}

</style>
<body>

<div id="container" style="height: 100%; overflow:scroll;">
<img id="center_img" onload="makeSquare()" src="http://www.vtk.org/Wiki/images/0/03/VTK_Examples_Baseline_IO_TestReadTIFF.png" />
<canvas id="canvas"
style="border:1px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas>
</div>

<script>
function makeSquare(){
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.fillRect(0,0,150,75);
}
</script>

</body>
</html>

Upvotes: 0

Views: 400

Answers (2)

arnuga3
arnuga3

Reputation: 241

In your jsfiddle(css part) you use .img class, if you remove that class dot, you will point to img tag and your canvas will go on top of that image. Is that what you are looking for? Sorry if I misunderstood.

Upvotes: 0

Sphinxxx
Sphinxxx

Reputation: 13017

Updated fiddle: https://jsfiddle.net/505ohh63/3/

The important part is to set position: absolute on the canvas so it can be put on top of other stuff, and then position it at the top of its container with top:0;left:0.

In makeSquare(), you also need to update the canvas' width and height if you want to draw things across the whole image.

Upvotes: 2

Related Questions