Question: 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.

```css
#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;
}

```

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

```

<https://jsfiddle.net/wz2g8hwz/>

Answer: 
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%;
}

```
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. (Sadly, the images from the placeholder service don’t seem to work via HTTPS any more, that worked yesterday. But you got the general idea, I think.) <https://jsfiddle.net/wz2g8hwz/4/>

```css
#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;
}
```

```html
<div id="container">
  <img id="canvas1" src="//via.placeholder.com/400x200">
  <div id="innerContainer">
    <img id="canvas2" src="//via.placeholder.com/1200x800">
  </div>
</div>
```