Here is the code I am working with. With a JavaScript library, I can draw on the first canvas and then merge it onto the second canvas.
My question is, how can I make the first canvas stay in place or float, regardless of where I scroll on 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>