JQuery - Paginator

In this exercise we want to implement a paginator. With the help of a paginator, a user can easily choose a page, navigate to the next, previous, first and last page. Furthermore, if not all page numbers can be displayed, the paginator shows only those nearby the current active page. The paginator should be responsive, i.e. resizing the window adapts the paginator, such that always as many page buttons are shown as possible. Also the page button over the mouse pointer should be marked (implementing the hover-functionality) as well as the active page.
You can render the solution for an example how it could look like. Please play around with the window sizes to check the responsive capabilities of the solution.
In the given code of the exercise, a canvas is used in which the paginator is drawn. The example code already gives you some entry points by adding some event handlers whenever the window is resized, the user clicks into the paginator or moves its mouse. By collecting the page buttons to be drawn in the array currentButtons using objects of type DrawObject it is possible to have all information at hand. Drawing those objects of type DrawObject is also already given. Have fun!