Question

36

Scrollable canvas inside div

rated 0 times [ 40] [ 4] / answers: 1 / hits: 38422 / 11 Years ago, sun, april 21, 2013, 12:00:00

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

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

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

jocelynkarsynr

Add To Favorites

Follow

Total Points: 472

Total Questions: 98

Total Answers: 96

Location: Macau

Member since Mon, Nov 16, 2020

4 Years ago

jocelynkarsynr questions

1 file upload using axios in react

Tue, Feb 8, 22, 00:00, 2 Years ago

1 Unable to write data (addRow) into Excel file in Nodejs

Sat, Jul 11, 20, 00:00, 4 Years ago

1 How can I export * as namespace in Babel?

Sun, May 10, 20, 00:00, 4 Years ago

1 React Routing to Same Component with Different URL

Sat, Jan 18, 20, 00:00, 4 Years ago

1 How do I persist user authentication using the Firebase refresh token?

Tue, Aug 20, 19, 00:00, 5 Years ago

View All

answered 11 Years ago calicinthias · Accepted Answer

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);