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 :

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.

Cheers !!!

Written by 

Rishi is a Lead Consultant, with experience of more than 7 years. Rishi is product focused developer who loves developing both front-end user interfaces and scalable back-end infrastructure. He is a good team player, quick learner and a humble person. He has good time management skills, aimed to give best results and fully dedicated towards his work & responsibilities. He is able to work as individual and as well as in team. He loves to share his knowledge, therefore he often writes technical blogs.

Leave a Reply

%d bloggers like this: