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 :
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 :
Now we will create a paper.js scope :
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 :
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 :
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.