How to implement infinite scroll on canvas using paper.js


We make drawing on canvas using paper.js. In this blog, i would explain that how can we implement infinite scroll on canvas.

Suppose we have a fixed size canvas :

<canvas id="myCanvas" width="2500" height="1000"></canvas>

But we want to implement infinite scroll i.e. we can draw infinite items on canvas using paper.js. As we will either scroll down or scroll up, then it should scroll infinitely.

First of all, we have to detect mouse scroll event. We have to do separate event handling for scroll up and scroll down.
You can use any method to detect mouse scroll. I am using below approach for that :


var canvas= document.getElementById("myCanvas");
function mouseDown(e) {

		if (parseInt(navigator.appVersion) > 3) {

			var evt = e ? e : window.event;
			var delta = evt.wheelDelta ? evt.wheelDelta / 120
					: evt.detail ? -evt.detail : 0;

			/* For canvas scrolling */
			if (delta > 0) { // Scroll up
                             
		               // Perform action for scroll up

			} else { // Scroll down

                              // Perform action for scroll down

			}

		}
		return true;
}

	if (parseInt(navigator.appVersion) > 3) {
		canvas.onmousewheel = mouseDown;
		if (navigator.appName == "Netscape"
				&& parseInt(navigator.appVersion) == 4) {
			canvas.captureEvents(Event.MOUSEDOWN);
		}
	}

Now we will create a paper.js scope :

var scope = new paper.PaperScope();
var canvas= document.getElementById("myCanvas");
scope.setup(canvas);

As we know, paper.js scope has one project and its view, by default. Whatever items we draw, it holds by the project and using view, we can handle drawing and user interaction with mouse and keyboard.
So for infinite scrolling, we have to play with view.

For scroll Up :

 // Perform action for scroll up
scope.view.scrollBy(new scope.Point(0,-100));

As we scroll up, view should also be scroll by (0,100) i..e x = 0, y = 100. You can change the y value as per your need.

For scroll down :

 // Perform action for scroll down
scope.view.scrollBy(new scope.Point(0,100));

As we scroll down, view should also be scroll by (0,-100) i..e x = 0, y = -100. You can change the y value as per your need.
Its done. Now you will be able to get infinite scrolling.

Cheers !!!

About Rishi Khandelwal

Sr. Software Consultant having more than 6 years industry experience. He has working experience in various technologies such as Scala, Java, Play, Akka, Spark, Hive, Cassandra, Akka-http, ElasticSearch, Backbone.js, html5, javascript, Less, Amazon EC2, WebRTC, SBT
This entry was posted in Bootstrap, CSS, JavaScript, jQuery, Scala, Web. Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s