[justAQuestion3]

Building a drawing tool in the browser is complex, when one has to begin to calculate various stuff(do bounding boxes intersect, perform a affine transformation).

Could you share some insights?

Do you use an external math library like math.js(which seems to be very hewavyweight)? Do you have a model with objects and other objects/functions that draw to the canvas, or draw the objects themself on the canvas? When the user moves a object, do you update the model immediately, or only when the move has ended?

[jstogin]

I definitely agree that this kind of tool is complex to build. We have our own model, which I have developed over a few earlier iterations of what we have available now, and we use it to draw all the objects to the canvas.

Generally speaking, there are two types of changes that we deal with. There are the changes that are very important, which don't happen very often, and then there are changes that are not very important but happen quickly. For example, when a user drags an object, each movement of the mouse is of the second type, while the final release is of the first type.

We make a distinction between what a user sees and the underlying "document" that a user is editing. When a user moves an object, we don't update the document until the user releases the move. However, we do send data to other devices so that anyone who is watching still sees the object being moved.