Question

I’m trying to create a scrollview container inside a canvas. Please note I do NOT want the entire canvas to scroll, only a subview i.e. a Menu would scroll on the canvas.

I thought of using the canvas.clip() method to create a mask and move the underlying entities based on the scroll position but the clip() method hides all other entities of the canvas. Any way of selecting what would be clipped?

Any ideas how to go about this? Is it possible?

Answer 1

Yes. Superimpose a second canvas over the top of your original canvas and use CSS z-index to sort out which one is on top of the other. Then just use the clip method on the scroll view canvas.

<div id="container">
    <canvas id="canvas"         width="800" height="500"></canvas>
    <canvas id="scroll-view"    width="800" height="500"></canvas>
</div>

div
{
    position:relative;
    width:800px;
    height:500px;
}
canvas
{
    position:absolute;
    left:0;
    top:0;
    display:block;
    width:800px;
    height:500px;
}
#canvas
{
    z-index:1;
}
#scroll-view
{
    z-index:2;
}