benjamin54 benjamin54 - 1 month ago 26
Javascript Question

Scrollable canvas inside div

I have a html5 canvas. I need to show the fixed portion of it in the div(

Div1
). When I swipe inside
Div1
, I need to scroll the canvas. So as I scroll, I'll see corresponding part of the canvas.

enter image description here

I tried something like this:

<div id="Div1" style=" float: left; width: 50px; overflow:hidden; ">
<canvas id="myCanvas1" width="200px" style="border: 1px solid #ff0000; position: absolute;">
</canvas>
</div>


jsFiddled here

Answer
  1. "scroll" in canvas , you need to handle 2 case :
    • bind event "mousedown" in this canvas and bind event "mouseup" in "mousedown" binding function.
    • bind event " DOMmouseup" in this canvas . User can wheel button in mouse to scroll.
  2. To show canvas like a scroll
    1. Redraw canvas
    2. Use clip() in canvas. Re-set the rectangle of this clip to show your canvas
  3. Please remove "position:absolute" in your css of canvas . And set height for your "div"

Hope it'll help you