Hello, and welcome to our presentation about canvas rendering. I'm Gokashe Chatur. I will be presenting you

why we are using a canvas object and how we are using it and what the results we get at the end. Kolobor online as you know uses images sent from the core site for rendering the documents.

Users need to be able to view documents comfortably but the technology is rapidly improving and it's created high-resolution devices with tiny pixels as we aim to have consistent look across as many devices as we can. We need to have a new solution for having crisp images in all targeted

devices we choose to use a canvas object. One of the problems we saw was blurry images. Another one was gaps between tiles. HTML canvas object helped us overcome these issues in a proper and maintainable way. We will first talk about how we render the tiles and UI. Then we are going to have a look at our implementation. As last step of our presentation,

we will have a look at the great results we have. And let's move to the second slide and we will have a look at benefits in detail. Kolobor online is now using an HTML canvas element for rendering the tiles along with consistent look.

There are other benefits that we have with this choice. Let me talk about these items. It is easier to maintain and improve. We now have our own class canvas section container. Thanks to this new structure, we have control over events and UI. It's designed to work isolated and flexible enough to be improved.

At the end, we reduced the need for the third-party libraries that we were using for event handling and UI. One of the challenges of using a canvas for UI and event handling was with testing. We are using Cypress test library for testing the behavior of our library.

Unlike unit testing, Cypress library works like a real user and it checks the HTML elements states to see if the software is working or not. Since our canvas drawings are inside canvas and thus not HTML elements, it was a challenge to test the behavior of our drawings. We solved this issue by creating cross-pending

HTML elements for our drawings. These HTML elements are created only while testing. Now we have testable and ready-to-use canvas library. Our main target was rendering the tiles onto a canvas object.

This is done by using more tiles for devices with tiny pixels so users can benefit from the high resolution of their devices. And rendering the UI. After having a class for canvas rendering, we could easily use this class for also some parts of our UI.

Our gain is fast reaction time and implementation. So having some things drawn on a canvas element doesn't make those work for the user. We needed event handling.

Certainly, we needed to know about where the mouse pointer is, is user holding a button and the like. For solving this issue, we added event handling capabilities to our new class structure and the first look of our new class.

That was a beginning. This image is from the days that this class was just a proposal. The first implementation was looking like the image you see. This picture shows the main goals of the new class. Rendering the tiles on a canvas, having a UI tool for the UI elements like row headers in calc and

event handling. As you see in the in the picture, all the UI elements are on their places and if you resize the window with this technology, with the library we created, they will be moved to the edges so they will keep their relative positions all the time.

So this is a tiny UI library that we are using now. Also, the event handling is making this UI library work for the users too.

Features and challenges. And of course, there are some challenges we needed to overcome while we develop our library. For example, event propagation. It is easy to handle events if you have only one layer drawn onto accounts, but if there are overlapping elements and they need to handle the events separately, then it may be challenging.

Let me explain an example situation. We have tiles as a layer and shapes as another layer. A shape certainly overlaps with a part of the document. We also have scroll bars. At least two of these three objects overlap. The canvas section container needs to decide which section will handle the events in this case. All of them,

many of them, or only a sub-selection of them. We turned these challenges into features and now we are using the new class with many layers. And

for event propagation, this picture shows a tiny code piece from our implementation. Event handling is always some

some difficult, has always some difficult sides. Like when the mouse pointer moves outside of a layer while dragging, or mouse pointer can move to outside of the canvas element or even window. In these cases, some checks are required. After having these kinds of checks for mouse events,

we needed to have a look at the touch events. The library we had was checking if the device is touch-enabled or not. And this check sometimes makes difficult to use devices with both touch and mouse devices enabled. We unified the touch and click events in our library for solving this issue.

So we can now use our core library for handling touch events and mouse events at the same time. This is an image from our implementation.

Crisp images. This was the most challenging part. I spent quite a good time while implementing this and thanks to Michael and Candy for their mentoring.

Making the images look crisp on every device that Koloboro Online works was the main target of this library at first place. Because of window device pixel ratio property of the browser, that is a new, relatively new property, crisp images were difficult to render. This value is sometimes equal to something like

0.9 or so. We have tiles with dimensions 255 and 255 pixels. When we draw these tiles onto a device with device pixel ratio 2, they are drawn half-sized. We kept as the solution. For the solution, we kept the

height and width of our tiles and we increased the number of tiles when device pixel ratio is above 1. We also solved problems with floating-point numbers. In the end, the resolution of the document became good once again. This is

this picture, this image is from our UI of CALC and as you can see, we have now many sections drawn on the canvas elements. The side cursor,

scroll bar and row and column headers are all drawn objects onto a canvas element and they are handling their own events and users can see the tiles crisp again. Thank you for listening.