CODEWITHSUNDEEP
javascriptjquerycsshtml
benjamin54
benjamin54

Reputation: 1300

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

Upvotes: 29

Views: 40487

Answers (5)

jdnichollsc
jdnichollsc

Reputation: 1569

It is better to scroll inside the canvas, see this Phaser plugin to do that https://jdnichollsc.github.io/Phaser-Kinetic-Scrolling-Plugin/

Upvotes: 2

Milche Patern
Milche Patern

Reputation: 20452

it won't work (scrolling canvas from inside div in some 'design' conditions), first your overflow is hidden. Try scrolling the content inside the canvas instead.

OR, try this : http://jsfiddle.net/9g3GG/2/

<div id="Div1" style=" float: left; width: 150px; overflow:scroll; ">
        <canvas id="myCanvas1" width="200" style="border:1px solid #ff0000;">asdf asd as asfqwe asd asdfasdf asd as asfqwe asd asdfasdf asd as asfqwe asd asdf</canvas>
    </div>

Upvotes: 11

pancake
pancake

Reputation: 3440

Here is a demo of using an oversize canvas, and scrolling with mouse movements by adjusting the CSS margin: https://jsfiddle.net/ax7n8944/

HTML:

<div id="canvasdiv" style="width: 500px; height: 250px; overflow: hidden">
    <canvas id="canvas" width="10000px" height="250px"></canvas>
</div>

JS:

var canvas = document.getElementById("canvas");
var context = canvas.getContext('2d');
var dragging = false;
var lastX;
var marginLeft = 0;

for (var i = 0; i < 1000; i++) {
    context.beginPath();
    context.arc(Math.random() * 10000, Math.random() * 250, 20.0, 0, 2 * Math.PI, false);
    context.stroke();
} 

canvas.addEventListener('mousedown', function(e) {
    var evt = e || event;
    dragging = true;
    lastX = evt.clientX;
    e.preventDefault();
}, false);

window.addEventListener('mousemove', function(e) {
    var evt = e || event;
    if (dragging) {
        var delta = evt.clientX - lastX;
        lastX = evt.clientX;
        marginLeft += delta;
        canvas.style.marginLeft = marginLeft + "px";
    }
    e.preventDefault();
}, false);

window.addEventListener('mouseup', function() {
    dragging = false;
}, false);

Upvotes: 11

PeterFochs
PeterFochs

Reputation: 1

The lines of the div are drawn. set line size to 0:

DIVofCanvas {
    line-height: 0px;
}

Upvotes: 0

LogPi
LogPi

Reputation: 706

  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

Upvotes: 1

Related Questions