CODEWITHSUNDEEP
csshtmlcanvas
sulaiman sudirman
sulaiman sudirman

Reputation: 1845

Overlay canvas over canvas

I have following code below, using a JavaScript library, I can draw in first canvas then merge to the second canvas.

The question is, how do I make the first canvas to be static or float, regardless where I scroll the second canvas.

#container {
  position: relative;
  border: 1px solid black;
  overflow: auto;
  width:400px;
  height:200px;
}
#canvas1 {
  position: absolute;
  left: 0;
  top: 0;
  border: 3px solid green;
  width:100%;
  height:100%;
}
#canvas2 {
  position: absolute;
  left: 0;
  top: 0;
  border: 2px solid red;
}

<div id="container">
  <canvas id="canvas1"></canvas>
  <canvas id="canvas2" height="1200" width="800"></canvas>
</div>

https://jsfiddle.net/wz2g8hwz/

Upvotes: 2

Views: 5461

Answers (2)

C3roe
C3roe

Reputation: 96151

Right now you are scrolling the element that contains both of your canvas - so both of them move. So, put the second canvas into its own container element, and set overflow for that instead, so that only the content of that container (which is only the second canvas) moves.

The new container element needs to be positioned the same way as the second canvas was before (absolute), and that canvas itself then not absolute any more.

In the following example I replaced the empty canvasses with images, so the effect becomes visible. https://jsfiddle.net/wz2g8hwz/4/

#container {
  position: relative;
  border: 1px solid black;
  width: 400px;
  height: 200px;
}

#canvas1 {
  position: absolute;
  left: 0;
  top: 0;
  border: 3px solid green;
  width: 100%;
  height: 100%;
}

#innerContainer {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  border: 2px solid red;
}

#canvas2 {
  opacity: .5;
  width: 1200px;
  height: 800px;
}
<div id="container">
  <img id="canvas1" src="https://placehold.co/400x200">
  <div id="innerContainer">
    <img id="canvas2" src="https://placehold.co/1200x800">
  </div>
</div>

Upvotes: 2

Figar Ali
Figar Ali

Reputation: 866

Just add width:100% and height:100% on #canvas2.

Like this.

#canvas2 {
    position: absolute;
    left: 0;
    top: 0;
    border: 2px solid red;
    width: 100%;
    height: 100%;
}

Upvotes: 3

Related Questions